top of page
FIONA ANGELINA
Project Scope:
Roles:
Tools:
1 month (2022)
UX Research, UX Designer, UI Designer
Zoom, Miro, Figma
Freshmart
Grocery Store app
FreshMart is an online application to meet the daily needs of users, comes with a ‘pick up order’ and ‘fast delivery’ feature in order to enable users to get fresh ingredients every day.
The Problem
Around my environment, I realize that there are problems occurring in our society since the COVID-19 pandemic has spread. I notice there are changes in behavior towards shopping for daily necessities, which is now turning online. They do the shopping by calling small grocery stores around their houses or familiar supermarkets trusted by their own families. Furthermore, many users who are busy working also have difficulty in shopping for their daily needs.
The Goals
To create an online grocery store application to fulfill daily needs with organic and original ingredients that is also fast in delivery.
Emphatize Phase
User Research
I conducted interviews with 7 people, to find out insight and explore the pain points felt by users. They are working mothers and several overseas students aged around 20-40 years. After interviewing the users, I made an ‘Affinity Mapping’ with a purpose to group similar insights.
Persona & User Journey Map
After I conducted interviews with 7 people and did the ‘Affinity Mapping’, I became more familiar with the behavior of the target audience of this application. Then I created 2 fictional personas and 1 user journey map in order to help me watch the steps users take to accomplish their goal, and also to help me to see the opportunity that I can do to improve a better and optimized user experience.
Define & Ideate Phase
This is the Solution
After I received the main problems from the users based on the interview researches, I offer some solutions to answer their pain points.
User Flow
Information Architecture
Prototype Phase
Paper Wireframe Until Lofi Prototype
These are the initial sketches I started with paper wireframe to determine the overall layout at the beginning and start with the features that will be on the homepage and the category. Based on the same sketches from paper wireframe, I immediately created a complete digital wireframe based on user research, before entering usability testing, I ensured to checklist first all the information and goals that can overcome the user's pain points.
Usability Testing
Usability Testing
I conducted Usability Testing on LOFI to observe the main user experience, order, finding and tracking, whether it is easier or not to complete and if errors occur, it can be iterated quickly with less effort. Usability Testing was tested out with 3 females and 2 males all aged between 20-50 years, using the moderated method carried out on Zoom with share screen mode from users for approximately 15-20 minutes. Here are key insights from Usability Testing.
New Iterations After Usability Testing
Through the iteration process from Usability Testing, it allowed me to earn new insights that I had never thought of before and surely made this designed application even better.
Before
After
Provide track order after successful payment
Before
After
Provide ‘points’ feature for users to exchange their points into discounts and promos (rewards)
Before
After
Add new method in checkout process
Add Request Pick Up at checkout page
Visual Design
Style Giude and UI Kit
High Fidelity Design
Onboarding Screen
Onboarding made to introduce the benefits of this application so that users will be interested in exploring this application; here the user can directly click "get started" to go to the sign up/login page.
Sign Up/Login
After users pass the onboarding screen, they can easily sign up by entering their email address and password, or login via Gmail and Facebook.
Homepage
On this homepage, I created categories and search filters to make it easier for users while searching for products, equipped with an ongoing promotion banner. I included promos and rewards so that users can look at ongoing promos and exchange points for other discounts.
Track Order
Users can track their orders after ordering goods successfully, which could be from navigation orders. Within this feature, users can find out the location of the driver along with how long it takes for their products to arrive at the destination.
All screens
HIFI Prototype
Look at this interactive FreshMart Prototype using Figma.
Final Reflection
- Working on this case study requires good time management; I organize my own deadlines with the result that I will be more committed and insisted in completing it.
- Validating user research, both in empathize and usability testing phases is very important when creating UX that comes up with complex problems. I could not have designed a product with a better solution without the help of the people who actually use it.
- Wireframe and Usability Testing from LOFI design help me to save a lot of time and to avoid many mistakes during the process.
bottom of page