Groshare
RESEARCH • UX • BRAND • UI
Project Background
The price of food is at an all-time high since its last highest gain in the 80s and while it’s cheaper to buy in bulk, not everyone lives with roommates/family or has the space to store items. People living in small spaces need a way to be able to afford their groceries while staying in their budget.
SOLUTION
Creating a grocery app that allows users to split bulk grocery products and prices with other local users so they can manage their grocery needs and avoid paying the full price for items. Users can set a radius of grocery stores within their area and create a grocery list with an option to split costs for certain bulk items that other people can take advantage of.
TIMELINE
June - July 2022
ROLE
UX/UI Designer, UX Researcher
TOOLS
Figma, Whimsical, Photoshop
Discovery & Research
RESEARCH STRATEGY
To make sure I had a good foundation for my end-to-end application, I laid out a plan outlining everything I would need to research. Similar to previous projects, I would be conducting comparative/competitive research and user interviews. as well as a short survey to determine average household budgets, popular stores, and any existing grocery apps being used to gain insight on how to design an ideal UI. I kept these objectives in mind as I went forward with my plan:
Gather insights of pain points/needs individuals face when budgeting for groceries and how it affects their ability to buy what they need.
Determine what, if any, direct/indirect competitors’ strengths and weaknesses are in the grocery list building process.
IDENTIFYING THE COMPETITION
There are a large amount of grocery and food delivery apps that work with many businesses for user convenience. All share common weaknesses and strengths within their UI. However, UberEats stood out in giving users the most options in regards to payment in the checking out process, such as creating a group order and being able to split the cost. Instacart came close by allowing users to create group/family carts but lacked the ability to split payment costs.
Overall, while the direct competitors were more focused on the grocery aspect for my research, the other competitors offered more help on what to avoid in forming the UI for a successful user experience. The checkout process was my main focus for Groshare and so I was able to gather inspiration for how to approach its design with this research method.
USER INTERVIEWS
I gathered 4 participants for my user interviews, mainly those who live with their partners and often split grocery costs. I made sure to include one participant who lived alone to gain an understanding of how they approached affordability for their grocery needs. I wanted to discern what prevented participants from buying in bulk as it is often a cheaper option, as well as their methods for grocery shopping.
The key takeaways after my interviews from both perspectives (cohabitating/living alone):
Bulk shopping was not possible due to
Lack of space, concerns for food waste, transportation needs
Not all grocery needs could be met because:
High grocery costs, high delivery costs, lack of accessible store options
SURVEY INSIGHTS
My survey consisted of 11 questions and was shared with multiple groups via social media for a wider variety of responses. The results had a nice range of ages as well as a decent range of income brackets to get an idea of how that might affect their approach to grocery shopping. While the ratio of participants who live with their partners and participants who live alone was fairly even, there were a few who still lived with family or with roommates.
A lot more people participate in bulk shopping than I originally thought, and it shows in their preferred shopping stores. I was also surprised at the popularity of Trader Joe’s as a common shopping store given there are so many more Costco/Safeway store locations in the country. But for the participants who answered ‘No’, their common reasoning was their inability to use bulk items before they expired and not wanting to contribute to food waste, aligning with the reasons given by my interview participants.
USE CASES
With my research phase wrapping up, I moved on to listing out all the possible use cases for my Groshare app to view all the uses the app could offer a user. I narrowed down my list and decided to use the first one to begin mapping out my product requirements. Keeping my use case in mind would help me in defining and testing the usability of Groshare.
Defining the Product
PRODUCT REQUIREMENTS
Using the findings from my research, interviews, and surveys, I was able to create my product requirements for each section of the app I would be focusing on.
Initially, I had brainstormed being able to use the app in the store to be able to pay for groceries but decided to simplify it only to a delivery option after reviewing my deadline.
SITEMAP
With the product requirements solidified, it was time to begin mapping out the sitemap to gain a visual idea of how the layout for each section would be organized and laid out. I ended up removing ‘Your Groups’ from the Account Settings into its own section in the navigation since users would quickly need to access and manage their groups without creating an order first.
SCREEN SKETCHES
I sketched out a couple of versions for multiple screens I anticipated I would be designing after referencing my use cases and product requirements. As I finished up my final round of sketches, I realized how many screens would need to be created to follow the task flows I had brainstormed from my use cases. To stay organized, I wrote out a checklist to ensure I would create the necessary screens.
TASK FLOWS
With the site map finished, it was time to map out the pathways users will take when navigating the app to complete certain tasks. I decided to separate out my flows in order for better readability to lay out a plan for the screens I would need to design and prototype.
Create an Account
Create a Group
Split Cart Cost with a Group to Checkout
The third task would be the most involved since it would need to show the process of how a user had to set up their cart and group in order to successfully split the costs of their items.
Wireframes
After finalizing the sketches, I created mid-fidelity wireframes for iPhone screens. They helped me to connect the conceptual structure to the product’s visual design. With these wireframes, you can follow the user flow of creating an account, adding products to a cart, and finishing the checkout process.
Branding & Design
EXPLORATION
For Groshare’s brand, I chose a color palette with a combination of warm and cool tones that invoked a bright and welcoming feel. Since my aim for this app was to help people share the cost of groceries and their costs, I wanted the logo design to reflect that. I ended up with a simple peach fruit split in two to represent how it could be shared between two people while looking similar to a heart to represent how Groshare cares for its users.
WORDMARK
Once the logomark was finalized, I wanted to find a typeface that would compliment its design. While the peach icon would help enhance Groshare’s brand identity, adding a combination of both would help with any future responsive needs. By having multiple logos, I could select whichever worked best for wherever they were needed. I narrowed down my choices to my top three and finalized my decision from those.
STYLE GUIDE
With my logo and color palette established, I created my style guide. I kept my typeface choice simple yet playful so it would be easy to read on mobile. My icon choices helped convey the same feeling and my images consisted of high-resolution shots of different produce items I would use for the user to add to their cart.
ONBOARDING SCREENS
I wanted to keep the onboarding process engaging but simple enough that users would not be deterred by any tedious steps. After filling out the sign-in information, the user would need to only go through five more onboarding steps to reach the main page of Groshare. The user has the option to skip three of the five steps if they wished to rush through the process which they could go back and finish in their account settings.
SEARCH AND FILTER
These were the most time-consuming screens to create as there were a lot of elements that needed to be present in order for the user to have the confidence to build their cart with what they were shown on the homepage. Getting the spacing for product cards was a little tricky at first since they needed to be small enough so multiple items could be shown at once to browse through but tall enough to hold enough product information that the user would be comfortable quick-adding the item to their cart.
During my competitive research, I noted that it was common for users to be presented with popular searches made by other users on the app when they first land on the search feature from the home screen. Since product names could bring up search results from different departments, I made sure to include the option to filter search results by department so users can narrow their results to find what they need.
CART CONTENTS
The spacing also had to be carefully considered in the cart screen so the user could make any last-minute item quantity changes while viewing enough of the product info to decide. To avoid cluttering the cart item cards, users could swipe to the left on an item to delete it from their cart, versus adding an icon or button
SPLITTING COSTS
While the design for these screens was simple compared to the homepage, they required more thought to create a secure way for the user to split their grocery costs with anyone they chose. Initially, users could only select to split with a group for their orders but a singular member option was added once the prototype testing was finished. Users could select a invitation deadline for splitting an order to give the other party time to review the order before accepting. Finally, the split options. I wanted this to be somewhat customizable so I created three options to choose from:
Divide Equally
Users split costs equally so everyone pays the same amount
Pay your Own
Users select which items they want to pay for themselves. This was made in mind for users who lived with roommates/housemates who kept groceries separate.
Select Items to Split
Users can select certain items to split costs on. This was again made in mind for roommates who kept groceries separate but shared household items such as toilet paper.
Prototype
TESTING
My prototype was built so that during testing, participants would be able to complete the following tasks:
Create an account from the homepage.
Build up your grocery cart by adding items using quick add option.
Complete checkout process using ‘Divide Equally’ option for Home Groceries group.
View the final prototype with changes implemented after user testing.
Usability
ITERATIONS
While the prototype was well received overall, I was able to get insights on what I could change to make the experience smoother for users. The changes were simple to implement as most of them revolved around adding a bit more information to a page or changing colors for elements to help with readability.
Colors for background and quick add buttons were changed for easier readability
Increase the size of elements
Adding more info/features to Cart, Order Confirmation, and Account screens
Tip option
Order Number
Help/Support option
NEXT STEPS
After the usability testing, I was able to see how much more I could take this project without being limited to a four week time frame. I would love to be able to push myself more in adding more product items and flushing out all the screens needed so that participants in the next round of testing would be able to create a full grocery order with Groshare.
This was my first time completing an end-to-end application project and while I wish I had more time, I enjoyed the experience and look forward to continuing building my UX skills while working on new projects with the knowledge and perspective I gained from this.