Winkel
A personalized grocery shopping app for every budget and lifestyle.
Skills: UX Design, UI Design, Prototyping
Tools: Sketch, InVision
Timeframe: 5 weeks
The Goals for Winkel
By 2025, mobile shopping is predicted to account for 45% of all sales made outside of physical stores.
Winkel is a start-up that wants to improve the way people shop for groceries online. They wanted to create a mobile-first experience that allows a person to buy what they need on the go.
My task was to determine users' needs and goals. I applied a user-centered design approach to create the best experience possible based on my findings.
The Challenge
Conduct UX/UI research and design to create an innovative mobile grocery shopping app
- Research: domain research, competitive analysis, user interviews
- Create: 6-8-5 Sketching, problem statement, product requirements, user stories, paper prototype, app map, wireframes
- Design: visual competitive analysis, style tiles, high-fidelity mockups, high-fidelity prototype
After determining the goal and the challenge of the project, I conducted research on the marketplace to see where Winkel was standing with it’s competitors
Competitive Analysis & Domain Research
Quantity Does Not Equal Quality
The online grocery retail market is very saturated, but there is room for improvement in the field. Based on an article on supermarketnews.com, Amazon is the lead competitor in this market with 30% of online grocery spending. However, quantity does not mean quality. Amazon might have the most amount of grocery sales, but consumers are spending less money on their amazon orders with an average order of $45, as opposed to Freshdirect with an average order of $143. This shows that although Amazon might have the most amount of sales, consumers are not using it to do all of their grocery shopping, rather than using it as a supplement if they need just a few things. There are aspects to sites such as Freshdirect and Instacart that are more appealing to consumers and having them actually use them for what they are intended to be: a replacement of heading to their local supermarket.
Room for Personalization
Freshdirect and Instacart might be receiving orders, but there are many aspects that could be improved on in a new shopping app. With so many food lifestyles and sensitivities in the population, online shopping might be a bit difficult for these customers. Some of the stores that were researched offered some type of filtering for gluten free, but none had an option to only show vegan options, and only Freshdirect had the option to search kosher foods. This would be a great addition for Winkle if it could give customers the option to shop through a certain dietary need. Furthermore, none of the websites that were searched had an option to shop by budget. This could be a great addition to Winkle to make it stand out from the competition.
Mobile First is The Way To Go!
A trend that I noticed between all of the competitors, is that they all focused on appealing to working, busy people. As technology advances, people will become used to having everything at their fingertips, including their groceries. According to Hexa Research in an article published by grocerydive.com, the online grocery market is expected to reach $26.9 billion by 2025. They attribute this to technological advancements, service expansion, and a growing consumer acceptance. This suggests that going mobile first is the best route for Winkle. As people become more accepting of online grocery shopping, they will be able to shop with ease from anywhere with only their smartphone.
I created a persona, problem statement, and product requirements based on four separate user interviews that I assessed
Persona: Heather Lee
Motivations: Eating healthy, trying new recipes, being eco friendly
Goals: Make time to cook dinner, set a budget for groceries, eat healthier snacks
Frustrations: Not having vegan options, eating fast food when fridge isn’t stocked, long lines at the grocery store
“The busy New Yorker needs a way to keep her fridge stocked with vegan food because she does not have time to go grocery shopping”
Product Requirements
Shop by Dietary Needs
Set a Shopping Budget
Choose a Delivery Window
Key Features
The two features that make Winkel unique to other grocery shopping apps are the dietary restrictions and budget screens. These two screens are part of the onboarding flow. Users have the options to select any dietary restrictions they might have, and also set a budget, or they could skip for now and edit this information later in their preferences.
The dietary restriction feature will filter the items that the user will view based on their selected options, which will make shopping a lot easier for people who would usually need to check every item for certain ingredients.
The budgeting feature will allow users to set a personal spending limit for a specified amount of time, and notify the user when they are approaching their limit. This will help users stay have better control of their spending and have further trust in Winkel.
I was then ready to start building the app!
Starting from a paper prototype, all the way through high-fidelities!
Paper Prototype
I created a paper prototype to get an idea of how I wanted Winkel to function before wireframing. This helped me decide the overall flow of the app, and I was able to make changes while wireframing. I already knew the key screens, so I was able to focus on other aspects of the app.
Application Map
I created an app map that shows how the different areas of Winkel app are organized, such as the bottom navigation, onboarding, and checkout flow. This includes all of the touch points of the app.
Wireframes
Design Directions
I created two style tiles for Winkel. The first one was a bright and colorful theme with vibrant colored stock photos and a playful vibe. The second, and chosen design, was a natural and rustic design. It was inspired by upscale food brands such as Whole Foods and Starbucks. We wanted users to feel that they are getting high-quality products while shopping on a budget. This design is inclusive for people interested in top products, and for people looking to save.
High-Fidelity Mock Ups
Future Recommendations
Further implementation of budgeting feature:
Back to Top
The budgeting feature is great for people trying to save money while grocery shopping, so I think that with further research and testing, this could be better implemented into the design of the app. I would like to do some user testing on this, and see if users would respond well to having a budgeting button accessible from the top navigation at all times.
Add more dietary restriction filters:
Because the dietary restrictions feature is one of the key aspects of Winkel that sets it apart from competitors, I would suggest adding more filters to incorporate a better variety of special diets, such as Keto or Paleo.