Winkel is a fictitious mobile grocery shopping application that provides locally-sourced, seasonal groceries delivered to your door.
The Challenge
Winkel is a mobile platform that improves the way people shop for cooking ingredients online and helps people eat healthier. They want to create a mobile-first experience that allows a person to buy what they need on the go. As a UX/UI designer, I needed to combine two main features into Winkel. First I had to make sure the user flow is easy so people can quickly find what they want. Second, I wanted Winkel to help users have a healthier diet.
The Research
The Market
I did domain research and competitor analysis aiming to define the target users and find opportunities for Winkle. The research showed that millennials, aged between 23-38 are the primary consumer of online cooking ingredient shopping, most millennials either just graduated from university or are developing their career. They have busy lives, they are also educated and modern. Most people of this type pay more attention to new healthy dietary habits and food preparing methods; they have a higher demand for food safety, online shopping helps them save more time, they are familiar and comfortable adopting new technology, they work and live with internet and electronic devices. With the rapid development of technology, there were 2.1 billion mobile phone users in the world and approximately 1.4 billion PC users in 2016, which means the main battlefield of e-commerce in the future is not on the PC but on the mobile device. Online shopping is a thriving market. Shopping within their phone will still be the trend for the next couple of years, so Winkel is a product in high demand.
The Opportunities
Our target users are young and have a busy working schedule, they care about having healthy diets but they don't have time to shop and cook. Winkel could have a feature that helps save their time for cooking. Additionally, Winkel can also incorporate some social media features so the users not only use Winkel as a shopping app for their healthier diet but also be able to share information with friends and family.
User Persona
Zoe (Cooking Hobbyist)
Zoe lives in Atlanta with her husband. She has a very busy schedule working in a bank. She loves to cook and wants to keep herself and her family in a healthy diet. However, its stressful to figure out what to cook every day, and going to the store to get all the ingredients is very time consuming, she can't do it regularly.
The Process
Moodboard
Style Tile
Ideate and Sketches
The App Map
Logo Design
Initial Design
User Testing
I tested the initial prototype with 4 users, who match with Winkel’s target user base. Users really like the color choice, they thought it feels fresh and clean with the white space. I tried to figure out what they found confusing about Winkle and what they struggled with while interacting with Winkel, and gathered some valuable feedback from them. There are some main takeaways for the iteration improvement below.
"When I was adding cucumber to my cart, I could see that quantity bar, it kind of stuck in my head. So when I see the same thing again next to the serving number, I was confused for a second. I feel like it would be better if there was some difference between the two of them."
"I was not sure if I successfully added it to the cart. That's why I clicked it a couple of times."
"I really like this suggestion section. If I only want to buy one thing form the suggested items, do I need to set all the other choices' quantity to zero? That is not convenient."
"The way that it allows me to share recipes and photos with friends is very creative. The layout between recipes and pictures are too similar, it made me feel lost for a little bit. Besides, how do I check my posts?"
Final Design
I cooperated with the feedback from users and iterated my design.
When a user is looking at an item, he/she can also see this item's related recipes. Winkel also provides the cooking suggestion on both produce and meat. I designed this feature to help the user to eat healthier and also help them save time on shopping.
One of the pain points of Winkel users was they are often too busy to figure out what to cook every day. So Winkel lets users shop by recipe. A user can pick a dish and add all the ingredients to the cart all at once.
Based on the user testing with the initial prototype, I redesigned the serving number bar to make it easy to differentiate from the quantity bar. Additionally, I added more affordance to help users confirm that they had successfully added items to the cart.
Winkel's target users are young and busy, most of them desire to keep in touch and be able to share information with people. Besides, social media is one kind of the most popular mobile applications nowadays. I integrated this "Moments" feature into Winkel to let users share their recipes and photos of food with their friends and family. I combined both recipes and photos from Winkel friends into the same section but in a different layout. Users can easily switch between their posts and Winkel friends' posts.
What I learned
As the designer I knew exactly how the product worked because I am the one who conceived every step within the app after learning users' pain points. However, when testing with users, since it's a new product to them, every detail matters. Like when the Winkel users pointed out that they were not sure if they successfully added the item to the cart because it's not obvious to show it in the app.
It's very unlikely for a designer to think of all the detail as someone who never sees the product before. However, I think what could help to spot those little details that I have ignored is to seek feedback and test with people(not necessary to be target users but someone never used or had seen the design before) as early/much as I can while designing the wireframes.
