Winkle grocery delivery user research and designs for mobile shopping experience

Originally published April 4, 2021

Overview- Winkle grocery app is designed with busy professionals in mind who would like to save their downtime for other things besides grocery shopping and want to be in charge of planning and creating their own meals.

Problem Statement

The young, health-conscious gourmet needs an app to allow them to purchase groceries within their budgetary guidelines, so that they can continue to satisfy their distinct taste palette without breaking the bank.

Users and Audience

The app may be used by anyone within the Winkle market, the development of this app focused on young professionals between the ages of 25-35 in the Midwest area. Income ranged from $45,000-$100,000/year. Statistics show that a large majority of users in this area primarily use their phone for data access.

Roles and Responsibilities

This was a solo project. Initial user interviews were provided but competitive analysis, user analysis, design and prototyping were all completed by myself in the scope of the project.

Scope and Constraints

Timeline for project completion was 6 weeks. App screens should include onboarding, home page, product listing and description pages and checkout process. Out of scope pages may also include a blog, recipes, and account pages.

Process
Week 1- Empathizing and Defining

Step 1-Domain Research and Competitive Analysis

Researched direct competitors Thrive Market, Walmart, Instacart and indirect competitors Mealime, Blue Apron and Flipp.

Takeaways: The app needs a simplified and updated menu design; needs to have functional white space to allow for proper eye tracking and scanning for desired products; if products are suggested, users should know why those products are suggested, or be able to set guidelines for suggestive product; recipes could be included within the app to assist with meal planning and can add ingredients straight to the cart.

Instacart Splash page. Instacart was one of the competitors analyzed.

Step 2: User Interviews and Persona Creation

While user interviews were provided, interviews needed to be synthesized with quantification of the qualitative data. Overall, users tended to be younger adults aged 23-30, had a professional job and lived/worked in the city. They enjoyed cooking and planning their meals and chose not to eat out as often, unless it was with friends. They wanted to be recognized as frequent customers with a loyalty program. Above all, they wanted healthy food at a reasonable cost that would fit their budget.

From there, I created a persona based on the synthesis of that data. I told the story of Sophia, a 27-year-old public interest attorney living in Minneapolis with her husband. A self-proclaimed foodie, she grew up in the South on her grandmother's cooking. Her husband and her now enjoy traveling to new countries experiencing its unique cuisine.

Week 2- Ideate and Prototype

6-5-8 sketching, application map, and paper prototype

During this phase, I started creating paper sketches of the app and initial wireframing. Using the 6-5-8 method, I sketched six different quick designs in 5 minutes. I will be honest, this was perhaps the most difficult thing I experienced in UX design. It was very difficult initially to step out of my comfort zone to come up with ideas when I thought I already had some idea of it should look like. Just because you think you know what something should look like, however, doesn't mean it's the best it can be.

I also completed an application map, or customer journey. It became really interesting to visualize all the different paths a customer may take within the app, and work out any dead ends that I had not anticipated. Knowing the overall layout of the project early on really helped with the overall design flow.

Once I had the low-fidelity drawings completed, we were then asked to prototype the paper images to check on user friendliness and the intuitive nature of the design. It was so much easier to discover any flaws at this point and fix them before spending time and money on high-fidelity drawings.

Week 3- Ideate and Prototype

Wireframes and Prototyping

This week I spent time on the wireframing of the product. I created digital wireframes using Sketch, focusing on the main screens initially, such as the login screen, home screens, and product listing/description pages.

I then brought the designs into InVision where I created the hotspots and links between the pages, creating a testable wireframe prototype.

Week 4- Ideation, Testing

Moodboards and Style Tiles

This week, I focused on the creation of a mood board and style tile for the app. Growing up on a farm, I had planned for a "crunchy", earthy organic look and created a moodboard reflecting traditional red barns and farmers' markets. For the sake of diversity, I also created a bright, colorful one. The "crunchy" organic one came out quite dated looking, while the bright summery mood board looked much more modern and caught the eye of the users, drawing them in. It became an easy look to translate to the style tiles, where I used imagery showing bright, colorful vegetables, a color palette of blues, yellow, and red, and sans-serif fonts. The initial style tile does show a serif font for titles, but that was dropped in the final version as well. The final version used Montserrat throughout for a clean, modern look.

Visual Competitive Analysis

With the Visual Competitive Analysis, I returned again to many of those initial companies I researched for the competitive analysis, Thrive Market, Walmart, and Realime specifically. What I learned was that some of these stores felt like they had so many products that placement within the app was difficult. Providing padding for the products and an appropriate amount of whitespace, directing the eyes throughout the product listing. The use of cards with some of the more appealing apps allowed for some structure and organization.

Week 5- Ideate and Prototype

High Fidelity Mockups and Prototyping

Still working with the farmer's market style tile, I ideated and designed high-fidelity mockups using that theme. While the initial design had potential, in the end, the designs lacked flair. They felt out of date and lacked engagement.

Going back to the drawing board, I tried again using the bright and colorful style tiles. These screens were definitely bright and bold. They "popped" off the screen and invited user engagement. These were the designs that were chosen, of course.

Again, the high-fidelity screens were imported into InVision and prototyped, prepped for user testing the following week.

Week 6- User Testing, Iteration

User Testing

The prototypes were presented to users fitting our target audience. Users were asked to complete tasks such as: onboarding, shopping for grapes, and checking out/setting a delivery date. Tasks were completed at a 100% completion rate between users, with about an 80% difficulty rate. Some of the difficulty came in onboarding and in finding a recipe. One user recommended the ability to add food allergies to the onboarding process, and not just selecting from a handful on a list. Since it is impossible to list every food allergy, the ability to add your specific one can trigger an algorithm designed to avoid those foods altogether. No users had difficulties with shopping for grapes and adding to the cart.

All users said that they could see themselves using Winkle and that they believed that Winkle would solve the problem of shopping for healthy food at a reasonable cost and free up their time for other things.

Iteration

I was able to come back to the app much later and do some further iteration. Instead of using Sketch for the designs, I created new pages in Figma. I used Montserrat for the font, cleaned up the lines and white space around the cards and really focused on the hierarchy of the page. The result is a clean, modern design that is easy to follow and easy to use. The color scheme is engaging because of its brightness and warmth. It feels like going to a farmer's market on a warm Summer morning, and is a direct reflection of the fun that our users seek out in their spare time.