Heather Sterman
Made with

Winkel Design Challenge

Designing an app to help busy shoppers find fresh produce & new recipes.

Project Overview

Winkel is a start-up that wants to improve the way people shop for groceries online. Their mission is to create a mobile-first experience that allows users to buy what they need on the go.


This case study highlights my entire process of designing the app - from learning the needs, behaviors & pain points of users, to designing a detailed prototype & finally testing it through the lens of a first-time user flow. 

Research Findings

Research Findings

To learn more about the needs of Winkel's potential user base, I conducted a Competitive Analysis of 3 direct competitors & 3 indirect competitors. Next, I analyzed 3 user stories & their subsequent highlights. Then, I created a User Persona to visualize an average customer.

Afterwards, I jotted down key findings on Post-Its to create an affinity map. Then, I focused on a few key themes that I wanted to consider in my design. 

Research Takeaways 

Below is a summary of the most frequent findings in the user interviews:

πŸ’²βŒš
When it comes to grocery shopping, users are primarily concerned with saving money & time
πŸ‘©πŸŒ†πŸŽ
66% of users interviewed are female, live with at least 1 other person in major cities & have special dietary considerations
πŸ“±πŸ›’
Users are tech-savvy & highly familiar with multiple shopping apps

User Persona

Meet my User Persona, Julia Berman. 

Meet my User Persona, Julia Berman. 

User Persona

After analyzing the takeaways from the Competitive Analysis & User Stories, I developed a User Persona with certain criteria: 

  • The user is female, resides in a major city & lives with at least 1 other person
  • The user follows a certain diet
  • The user shows proficiency in using similar apps for online purchases & is familiar with a variety of brands
  • The user has a specific goal in mind for using this app 

Sketches

Rough Sketches & Mobile Paper Prototype

After performing the necessary Research, I created a series of rough sketches to display the beginnings of the Winkel app. Next, I highlighted aspects to be carried over to the next round of design.

I refined my sketches and uploaded them to Marvel to create a mobile paper prototype. Once all of my screens were uploaded & cropped to fit to the size of the device I was designing for (in this case, Android), I created "hot spots" to simulate a first-time user flow from start to finish. 

Winkel in Low-Fidelity form. The ideas are beginning to come alive, but are still in the early stages. Note: if the bottom navigation menu appears to be cut off, simply scroll down to view it better. 

Wireframing

Wireframing in Sketch

Now that my Winkel designs were starting to take shape, the next task was to create a Mid-Fidelity wire frame to show what the app would look like from a more realistic level prior to adding colors, typography & images. In order to create a Mid-Fidelity wire frame, I used Sketch


Once the Mid-Fidelity wire frames were completed, I uploaded my individual screens to InVision


Note: Sketch is only available for Mac OS, so if you are a Windows user you can use a comparable tool like Figma or Adobe XD. 

The "skeleton" of the Winkel app. Just imagine what it will look like when colors, typography & images are added in! 


Note: If you want to go back to the first screen after clicking through the entire prototype, try refreshing your screen.

Design Inspiration

To see the full Mood Boards, visit my Pinterest Board

To see the full Mood Boards, visit my Pinterest Board

Design Inspiration

Once my Mid-Fidelity wireframes were created, I started to think about how I wanted them to look & feel. For inspiration, I turned to Pinterest to create Mood Boards. This was a really fun process of selecting images, typeface & device layouts for design inspiration. 

I also performed a Visual Competitive Analysis of various sites to examine their UI elements including Color, Typography, Visual Hierarchy & Layout. Finally, I created a set of Style Tiles as a sample guide to what the Winkel app would look like on a Hi-Fidelity scale. 

Bringing Designs To Life

From Paper To Hi-Fidelity Prototype

Once I settled on the aesthetics of Winkel, I went back into Sketch & created a series of Hi-Fidelity wire frames to simulate the app. I uploaded all my screens to InVision, the same way I did with the Mid-Fidelity wire frames, and created hot spots to demonstrate the process of a first-time user flow, from on-boarding to checkout. 

Introducing Winkel, a new grocery shopping app for all your budget/dietary/recipe needs! 

User Testing

User Testing

With all the hard work done, it was time to test Winkel with some participants before handing off the final deliverable! 

Summary of Testing:

  • Testing was conducted during the final phase of the project, in order to present a mostly-complete prototype to potential users. 
  • I interviewed 3 test subjects. Each individual had specific dietary needs, and showed interest in discovering new recipes. All 3 met the target group. 
  • All tests were conducted in-person. 
  • Each participant was asked to sign up for Winkel with one of the following options: through social media, through email, or as a guest. All 3 users chose to sign up with email. Next, they were taken to the homepage where they browsed listings of featured recipes (this ties back to my initial problem statement that I wanted to solve for, which was to find new recipes). Once they found a recipe they liked, they clicked on the heart icon next to the image & added that recipes to their list of favorites. Finally, they walked me through the checkout process. All 3 participants successfully completed each task. 
  • Overall ratings for Winkel were positive, with the lowest score being 3.5 & the highest being 4 on a scale of 1 to 5 (1 the lowest & 5 the highest). 
  • All 3 participants would recommend Winkel to others. 

Takeaways

Onward!

Onward!

Takeaways 

In the 6 weeks I spent designing Winkel, I became better acclimated with the Stanford Design Thinking Process: Empathize, Define, Ideate, Prototype, Test. I also grew more comfortable using a Mac OS, as I normally gravitate towards Windows. 

I learned what users like & what they want to see improved. I developed confidence in my research methods, as well as increased my understanding of key terms in UX Design. 

With the fundamentals of UX/UI Design I acquired throughout this process, I am ready to take on more projects!