freshfinds
Introducing a faster and more seamless way for users to shop for groceries through freshfinds grocery store app. The application also allows users to save grocery lists and ingredients for recipes for a smoother experience.
Role
UI/UX Designer from conception to delivery. Responsibilities included were conducting interviews, designing paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem
As a shopper it can be difficult to keep track of how much the products in the cart cost before getting to the checkout lane. It’s also easier to forget how many products in the cart are on sale. Going grocery shopping can also be very time consuming, especially for an already busy person .
Target Audience
The target audience for the project are in the age range between 18 to 50 year olds who are too busy to get to the grocery store. The app is geared towards those who work long hours or are in school and can’t make it to the grocery store. This group also has knowledge about online shopping and use their smartphones frequently.
User Research
User Research Goals: to find out what the shoppers’ pain points are. The goal is to learn these pain points in order to make the user’s experience be quick, hassle free and enjoyable.
To gather the research, five interviews were done. These five candidates were found and chosen through an online forum. The results from these interviews helped gather information around user shopping habits and the pain points that the grocery app can help solve.
Frustrations:
Some have busy schedules and find it harder to go grocery shopping
Others live further away from their local grocery store causing them to have to travel farther out and don't go grocery shopping as frequently.
Biggest frustration was that most didn’t have the time to shop and make sure they were getting the freshest ingredients.
They also forgot a few things and either had to go back for them or just leave them behind.
Major Pain Points:
Making sure the produce is fresh and good quality.
Not having the time to go to the grocery store or the grocery store is located far away.
Forgetting items- it’s not worth going back for the forgotten items especially if they don’t have the time or if the grocery store is to far out.
Difficult to keep track of how much products in the cart cost before the user checks out.
While shopping it's easy to forget what is being added and if its already on sale.
Design
Low Fidelity Wireframes
In Figma, I chose to design the landing page, a sign in page, profile page, shopping list page, a product page, a product detail page, shopping cart and check out page. I focused on shopping list and sales because I found those two options were the most talked about when conducting my user interviews.
High-Fidelity Mockups
Using Figma, the low-fidelity wireframes were turned into High-Fidelity Mockups.
Color Palette
First thing that comes to mind when thinking of a grocery store is the color green. Since fresh produce tends to have green found throughout it. Green also signifies growth and is associated with peace and renewal and life. For those reasons, I chose green shades for the color palette.
Logo
The name of the app, freshfinds, was chosen to represent the fresh produce and groceries available in the app. The font chosen for the logo is called Assistant Extra Light. Above the F in freshfinds there are two leafs to represent nature as well as fresh produce.
Typography
For the typography I chose three different fonts. For the headings I chose Raleway as it is a well-balanced. For the text body and buttons I chose Avenir as it a crisp and clean font. The font SF Pro Display, was used for the shopping lists and buttons. Throughout the different screens there are different weights of all three fonts, the weights range from light to bold.
High Fidelity Prototype
Takeaway
For this case study I learned the importance of research. Research helped me not only empathize with the users better but also get more ideas on how to design. The sample size used for this project wasn’t ideal. In a real-life scenario, the more participants you can survey and interview the better. I was also excited to be working on the UI design for freshfinds, I was able to understand the importance of using and implementing a design system which helped me with productivity and effectiveness.