GrocerEase
Course: UX Design Professional Certificate, Google
Duration: March 2022 - October 2022
Team members: Solo project
My roles: User Research, Interaction Design, Visual Design, Motion Design
Overview
GrocerEase is an online grocery store dedicated to delivering excellent quality products in a timely manner, while making the shopping experience simple and enjoyable for the user.
The goals for this project were to identify any issues users face with similar apps in this industry and create a new app that satisfies these user needs.
.png)
Project Background
As technology advances, people are starting to use it to complete tasks that were once impossible online, like grocery shopping. I wanted to create a product that makes that experience easier, so I designed GrocerEase, an online grocery store that delivers right to your door.
This was the first project of a UX Design professional certificate course offered by Google. The purpose of this project was to show my understanding of different design concepts learned earlier in the course, and showcase my ability to take a product from conception to delivery. This was a solo project to be completed in Figma.
Some key achievements have been listed below:
-
Turned an idea into a product. This was my first time completing an end-to-end design project and, while it was never intended to be released to the public, it was still a tremendous learning experience. I gained vital knowledge of the design tool Figma, as well as the ability to empathize with users to devise an effective solution to a design problem.
-
Wore many different hats. Since I was the sole designer for this project, I dedicated weeks to conducting user research, sketching, wireframing, prototyping, and testing the product. Doing every role really was a challenge, but I was able to get a feel for what I like and don't like.
-
Pitched ideas & designs to others. With each step in the design process, I had to submit my work for peer review from others in the course program. This required the ability to communicate with others from around the world and present my work in a clear and concise manner.
"I think this app was designed extremely well and would use it for my future grocery needs!" -Brianna S, 22
Process
What's the problem?
Busy parents and those with health issues often lack the time and/or ability to go grocery shopping, and many individuals can only afford to shop for items they have coupons for.
Why GrocerEase?
I want users to be able to shop using coupons easily. Users can seamlessly sync their paper and digital coupons to the app and apply them to purchases. Currently, not many other companies in this industry offer this feature, and for the ones that do it isn't very user friendly.
The goal:
Design a dedicated mobile app that allows users to find and purchase the grocery items they need quickly and easily while saving them money.
Understanding the user
I conducted interviews to determine my primary user types. From that, I developed personas, user stories, and user journeys maps to further understand the different behaviors, needs, and motivations of my users.
Through this research I was able to identify user groups, uncover any pain points these users were experiencing with the products they were currently using, and determine the success of the tasks measured.
Persona (Adam)
Persona (Carmela)
User story (Adam)
-
"As a 25-year-old IT technician who shops online to avoid the lines in physical stores, I want to use filters to narrow my search scope, and get through the checkout process in as few clicks as possible so that I can find and order the exact item I am looking for in the shortest amount of time."
User story (Carmela)
-
"As a retired nurse technician who finds going to physical stores challenging due to age-related difficulties, I want to find exactly what I need at the lowest price by reading honest reviews and applying my digital coupons so that I can get the items I need without having to leave my home."
User journey map (Adam)
User journey map (Carmela)
Pain points
-
Time. Parents and busy individuals often lack the time to go grocery shopping. They want to be able to get what they need fast and are often frustrated by the long checkout lines, busy parking lots, and crowded aisles.
-
Accuracy. Item details and reviews can be misleading which frustrates users as many of them check the reviews to decide or confirm if they should purchase an item. Users also get frustrated when items don't arrive as advertised.
-
Transparency. Users get frustrated when they see additional fees that don't show up until they've reached the checkout page. They like to know how much an order will cost them ahead of time to ensure they can afford it before moving to check out.
-
Accessibility. Grocery shopping apps are not universally accessible. Users with any and all disabilities should be considered, whether they're permanent, temporary, or situational.
Understanding the competition
While understanding the behaviors, needs, and motivations of my users is paramount in creating an effective, user-friendly design, identifying the strengths and weaknesses of key competitors is important as well.
I conducted a competitive audit of both direct and indirect competitors to better understand how these companies position themselves in the market, and examine what they do well and what they could do better. View the complete competitive audit pdf here.
I used the findings from this competitive audit to inform design decisions with reliable evidence, solve usability problems, and identify gaps in the market. This way the business needs are met while keeping the user at the forefront of the design process.
Ideating the solution
After gathering the findings from the research, I defined problem statements for the two user types so I could get a better understanding of what the users really need before I started sketching the first iterations of the designs.
"Carmela is a couponer who needs to be able to access and use digital coupons while shopping because she wants to get the best deal on her items, and she never shops without them."
"Adam is a busy young adult who needs a quick way to order and receive a cookie platter because he waited last minute to get the dessert for the office party."
Creating the designs
I conducted several sketching sessions on paper through the "crazy eights" exercise in order to visualize my ideas so that I could move on to creating the wireframes. This allowed me to filter through many ideas so that only the best and most refined elements made it into the wireframes.
The following key features that aligned with the product vision were identified from the sketching sessions:
-
Seamless coupon integration: Allow users to download their physical coupons onto the app and easily use them along with their digital coupons.
-
List of recommendations: Each user receives targeted products based on their previous activity on the app. These could be newly discounted items, related items, etc.
-
Accurate reviews: Allow users to be able to read and interact with detailed reviews to find the best product to meet their needs.
I mapped out the main user flow in order to visualize the goal and work through how users would achieve that. This allowed me to get a clear overview of the product's functionality before the design phase even began, and uncover any areas where users may get stuck.
User flow
Wireframes & Mockups
When transitioning from paper and digital wireframes to mockups, I made sure to consider feedback received from user research, and to base my designs off of those findings to ensure the user is put first. The paper and digital wireframes were used to guide the deisgn of the mockups and final high-fidelity prototype.
This was also the introduction to Figma in the certification course so it was my first time using the design tool.
Homepage
Digital Wireframe
Mockup
Item Details Page
Digital Wireframe
Mockup
Shopping Cart Page
Digital Wireframe
Mockup
Testing the designs
I conducted two rounds of remote, unmoderated usability studies with 5 participants aged 22 to 75 to see if they can complete the core tasks within the app, and if any pain points arise. I asked them to complete several tasks within the app, while two were specifically asked to simulate using coupons to purchase items. The first round of testing used the low-fidelity prototype and the second round used the high-fidelity prototype.
Round 1 findings
-
Users need more places to access and apply their coupons
-
Users need more navigation options directly from the homepage
-
Users need a way to save information for faster checkout on future purchases
Round 2 findings
-
Users need an option to add an item to their cart from the search results page
-
Users need an option to use their saved delivery address when checking out
-
Users need a way to set up automatic recurring orders
Accessibility considerations
In order to design a more accessible product, I had to consider people from all walks of life when conducting my research including those with temporary, situational, or permanent disabilities. Some key considerations are listed below:
-
Used accessible colors. I double checked that my color palette complies with AA and AAA guidelines.
-
Emphasized universal iconography. I included icons to help make navigation easier, as well as to indicate user success/failure.
-
Improved visual design with images. I included high quality images of grocery items as well as detailed descriptions to help all users better understand the designs.
Takeaways
Impact
This app makes users feel like GrocerEase takes all of their current and potential needs into consideration. It simplifies the grocery shopping process and allows users to easily use coupons.
One quote from user feedback:
"I really liked the app. I think it was immensely intuitive and made the grocery experience stress free."
Next steps
-
Conduct further testing in the form of usability studies to validate whether user pain points have been effectively addressed.
-
Conduct further research to discover any additional issues users might be facing.
-
Consider ways to improve the app’s accessibility, usability, and features.
Key takeaways
I enjoyed this project and learned a tremendous amount. As my first end-to-end design project, I learned skills ranging from empathizing with users to prototyping in Figma. I was introduced to Figma for this project and it was challenging at first, but by the end I was having fun testing out the different features Figma had to offer.
Some key takeaways from this project are:
-
There's no one-size-fits-all approach to the design process. There's no single right way in the design process, and each designer is going to have different opinions and preferences for their designs. As long as it meets the needs of the user and is usable, equitable, enjoyable, and useful then the designer has succeeded in creating a positive user experience.
-
User research is everything. Properly conducting user research throughout the entirety of the product lifecycle ensures that the users are being considered at all stages of the design process, which leads to a satisfied user and a product that's easy to use.
-
Design thinking is key to creating an effective product. I was familiar with the design thinking framework from courses at UCONN, so I applied it during this project and it helped me stay consistent and on track throughout the entire design process.