Project Type
6 Week Design Sprint
Conceptual Project / Design Challenge
My Role
Project:
UI Design Solo Project.
Focus:
Research Synthesis, Ideation, Information Architecture, Sketches, Wireframes, Prototyping, Visual Design, and Testing.
Tools I Used
- Sketch
- Invision
- Pen and Paper
- Lots of Peer & Lead Design Feedback
Overview
Winkel had an opportunity to create a tool for everyday people who were increasingly looking to their mobile devices to assist them with the most basic adulting task - Grocery Shopping.
The Grocery Shopping process revolves around budgets, cooking experiences in the kitchen, diets, making eco-friendly decisions, existing food resources at home to reduce waste, and takes into accounts varying lifestyles.
Taking all those variables into account, I had to research, create, and test how everything could be combined/bundled to produce the best experience for a mobile shopping experience.
The Challenge
Join me on the delicious journey of how I enhance my user, Samantha, on her Grocery Shopping experience.
Samantha has these user problems:
- Struggles to find recipes to cook with the ingredients she has in her pantry.
- Wants to know how to eat more local healthy foods on a budget.
- Too much time/effort to find convenient food ideas, recipes, grocery lists to try.
Point of View Statement
"Adventurous home cooks need custom-tailored recipes to make creative and healthy meals so that they can purchase new grocery items and utilize their staple ingredients, helping them reduce waste and save money."
The User Base
The user base presented to me consisted of "Home Cooks" with varying degrees of experience and motivations.
Some were adventurous and enjoyed experimenting in the kitchen while others were frugal and focused on decreasing waste.
Nonetheless, there was a theme of “cooks”. Despite the cooking experiences, both types of individuals wanted resources to find what they needed.
This ranged from:
- Routine weekly shopping.
- Recipes to use up all the food in their fridge.
- Way to find locally sourced goods.
Ergo, Samantha
I live in Denver with my boyfriend Than and Australian Shepperd, Pinocchio.
Some say I have an adventurous and creative spirit.
I love experimenting in the kitchen with spices and leftovers. I try to buy local and make more eco-friendly decisions. Maybe I'm a health enthusiast. I just want to live a clean healthy life to live long and support friends and family.
Goals
Support Local Farms
Savings
Reduce Waste
Motivations
A Healthy Diet; helps reduce medical bills/surprises
Inventive in the kitchen
For the Environment
Frustrations
Over Priced / Poor Quality Food
Complicated Apps
Influences
Reviews & Referrals
Attentive Customer Service
Devices & Environment
35% iPhone Usage - Work
43% iPhone Usage - Home
10% Apple Computer - Home
12% Lenovo Thinkpad - Work
My Approach
Process
A Nontraditional Design Process
Rapid Prototyping
Instead of following a traditional design process, I followed more of an abridged version like Lean UX / Rapid Prototyping.
This prototyping process uses rapid iteration to get to a product that will add the maximum value to a user. It is a cyclical concept where you move from each stage to the next and when you reach the end, you return to the beginning (over and over again) until you have the result needed.
First, I did some user research to have some grasp of the requirements (Who, What, What, When, How).
This shaped:
- Persona - Samantha.
- Point of View Statement.
- Strategic decisions found in research.
4 Iterations Later:
- Visual - Hand Sketches of vital concepts
- Visual - Lo-FI Wireframes
- Functional - Mid-Fi Prototype
- Content Forward - Hi-Fi Prototype
Perspective
Domain Research & Competive Analysis
Saturated Grocery Shopping Market
- In a saturated market, online grocery shopping revenue has consistently been increasing year over year with $2.93 trillion in sales in 2018 growing to $3.46 trillion in 2019.
Millennials & Gen Z are interested in healthier options:
- Organic
- Private labels products
- Over the top customer service
- Sustainability
- Smart orderingSelf-access
Retailers
- More Premium products
- Updating Mobile and Online tools.
- Focus on accessibility & ease of use of technology
- See increased demand for rich diverse food options.
Mobile-first approach - Winkle can differentiate its service and product offerings from the comp set. The focal point should be on an easy to use interface, great customer service, and value-added offerings.
Iterating
Visual Sketches & Functional Wireframes
Sketches - After a few rounds of 6-8-5 Sketches, I was able to create mobile or paper wireframes. They were messy but authentic to the goal. I inked concepts that explored:
- Recipe search & saves.
- Adding lists/items to shopping carts.
- Quick like & dislike of recipes.
- Custom food categories or restrictions.
- Dedicated shop local page.
Wireframes - I created clean and minimal wireframes. Peer Feedback revealed that the layouts produced were too similar to well-known apps (Like Instacart & Walmart Grocery) and did not show any differentiation or uniqueness.
I saw the screens lacked innovation or the "X-Factor", consistency, and strayed away from the focus of Samantha and her user needs.
The transition from static to interactive elements confirmed I was missing key areas of basic functions I was trying to produce.
Sketch
Wireframe
Sketch
Wireframe
Visual Styling
Mood Boards & Style Tiles
Creating an MVP
Iterating and Styling the Prototype
What features can help solve the problem?
Personalization Starting with Onboarding
- Diet or Allergy Needs
- Budget
- Cooking Skill Level
- Hobby or Entertainment Alternatives
Search for Recipes / Take a Picture to Search
- Mobile Pantry Concept
Explore with Videos, How To's, Cuisine, Top Chefs
Familiar & Intuitive Ordering and Tracking
Continuous Curation based on Likes & Previous Orders
Usability Testing & Results
Testing
What am I trying to investigate?
- Effective – Can a user complete my goal?
- Efficient – Can they do it quickly?
- Error Tolerant – Can they do it correctly or easily get the help they need?
- Engaging – Do they like it?
- Easy to Learn – Can they do it correctly the first time?
Results
All participants were able to complete all tasks when prompted by the scenarios within the expected time frame.
- Mia really liked the intuitiveness of the application and how inviting the pictures looked.
- Shefali also commented that the images inspired her to want to try new recipes. But she found the budget feature, recipe search, and add address page to be confusing or vague.
- 100% of the participants thought that the app maneuvered adequately and had an obvious focus.
- Issues with the User Interface - the contrast between the font, graphics, and needs smoother micro-interactions.
- 66% rated the app and usability with high remarks but the app needs refinement and polish to be competitive.
Prioritized Recommendations
Finding the UX Debt
UX Debt is inclusive of ongoing problems in the experience due to quick launches, fast, easy, or careless solutions that negatively impact users.
The collection of Qualitative and Quantitative feedback was overwhelming. I only conducted one round of usability testing, so there was already an expectation of lots of iterations. The negative impacts provided me with opportunities to see what improvements should be made to push the app forward.
The negative impacts:
- User interface (buttons, links, and visual styling).
- Interaction design (movement from page to page, animations, and scrolling effects).
- Information architecture (navigation structures and content classification)
- Accessibility elements (contrast, visual focus indicators, text alternatives, etc.)
I Learned
Consistency is Key!
I needed to be more consistent with the features I'm designing to solve the problem at hand. Although I had a high fidelity prototype with great visuals and navigation, the screens needed more refinement to truly please users during testing. I prioritized the look and feel over consistency and it showed in key feature areas like the Chef Page that lacked the polish and detail of other areas like the Main Home screen.
The actual grocery shopping aspect also needs to be flushed out more to give users more control over shopping for ingredients, taking inventory of a pantry or fridge to better accentuate the solution.
Overall, the concept was received well and I got positive comments on the flow and feel of the application. The results from the usability test showed me the main areas to focus my energies on for future iterations (looking at you AI and ML Technology)
Design can be fun and not so fun.
Designing Winkel Mobile was entertaining and overwhelming. I may not have been the direct target audience, but I really empathized with my persona. I could see myself, friends, or family utilizing this app and its features to better their healths, experiment, learn, and eventually make cooking and shopping more seamless.
I'm proud to have started to create something that provides efficient planning, teaches you about your food, cooking skills, and encourages eco-friendly shopping. I also feel validated that my concept parallels what the current industry is working to refine.