UI Design | UX | Prototyping
Integrated Application Feature
MY Role
User research, prototyping, UI design
Timeline & tools
4 Weeks
Figma, Illustrator, Maze
the challenge
Create a shopping list feature that allows users to add ingredients from in-app recipes to a grocery list.
Project Description
Over the course of a four week sprint, I worked to develop and design a feature for the health and wellness app Lifesum. In this fictional project I worked with the app's preexisting design library in order to fully integrate the new feature. I specifically wanted to explore how users plan and execute their daily shopping while following an in-app meal plan, which I did through ethnographic research, understanding the existing app and a competitor analysis. The outcome was a shopping list feature.
This is a fictional project.
Outcomes
UI design for shopping list feature
UI for iOS application in accordance with Human Interface Design guidelines.
Increased functionality
Users can add ingredients to the shopping list from in-app recipes as well as adding custom items. The grocery list is sortable by food type for easy in-store and online shopping experience.
Research
For this project I wanted to find out what pain points users faced when following a in-app meal plan. Through developing an understanding of the current application features, conducting user studies and market research I defined one of the major pain points in meal tracking as building a list for grocery shopping.
Understanding the current app design & market
Lifesum helps users reach their health goals through better eating. The app offers meal plans, recipes and tracking for most food-related habits (macros, calories, water, fitness). With 35 million global users in early 2019 the apps myriad of features make it one of the most popular health & wellness apps available on the market.
Track meals and food intake
Follow daily meal plans
Make in-app recipes
People want to be held accountable to reach their health goals
45%
Of Americans have tried using a health & fitness tracking app, according to a 2019 survey.
1 in 5
Americans use a digital health tracking app regularly.
Researching the competition
Meal tracking apps vary widely in their features. Some companies specialize in integration with exercise tracking, while other have the ability to chat with a nutritionist. In my research, no other companies offer an integrated shopping list feature making indirect competitors list-making apps.
User Research: Key Findings
-
Meal planning and grocery shopping is time consuming and hard
“I feel so overwhelmed thinking about planning multiple meals and going to the grocery store. Eating well makes me feel good, but making a grocery list is hard.”
-
Grocery lists have two parts; new ingredients and pantry staples
“It’s easiest to make my list by starting with the items I buy every week, then I add the ingredients I need for meal prep.”
-
A grocery list organized by category makes shopping easier
“When my list isn’t organized I always forget something. Making an extra trip to the grocery store is something I hate.”
Define
Research outcomes showed that while Lifesum solves the problem of what to eat, users still have to make a list and go shopping, which is very difficult. Most people struggle to make a grocery list and go shopping. They find the process time consuming and stressful.
Problem Statement
"I want an easy way to make an in-app grocery list based on my meal plan"
Personas
User goals may look different but the path to success always involves an organized shopping list. Two use cases are shopping for one and focused on a strict diet, and shopping for many with limited time. User personas allowing me to empathize with who would use a shopping list feature, and why it would be beneficial to them.
Sitemap
Integrating a new feature to an existing structure involved understanding how users engage with the app, ie user flows. An ethnographic study provided insight on how users track food, follow meal plans and select recipes. Adding the shopping list feature into the exisiting flows was essential for ease of use.
Feature priorities
Lifesum gives users a delightful experience through clear UX and enjoyable UI, adding a feature needed to adhear to the same standards. Defining the feature priorities also helped to define the metrics for success.
Design
To create a prototype I did a set of crazy eights to capture many divergent ideas, followed by lo-fi sketching, wireframes in Figma and finally a hi-fi design.
Sketching
The creativity of the project was coming up with solutions to how users could add ingredients to a shopping list and integrating this function into the existing app. User flows needed to be seamless in order to be a value add to both the user and company.
Wireframes
My goal was to focus on visual hierarchy, determining the organization of type, buttons and visual information. Each grocery item needed to include specific information including the item name, quantity and notes, and I wanted to make sure the organization was clear before adding additional UI elements.
Following an existing design system
To maintain consistency and make sure the feature design was fully integrated with the current app, I defined the elements of the existing design system uncluding brand colors, type hierarchy, button states and color gradients. Many elements proved to have poor accessibility (for example, in color contrast) which I would change for a v2.
Prototype & Testing
I ran remote moderated usability tests with current Lifesum users to test my grocery list feature and design. The test was designed to evaluate users ease of use in adding items to a grocery list, using templates, and editing templates.
Objectives
- Test ease of use of the grocery list function
- Evaluate users ability to navigate core actions of the feature
- Observe areas of frustration, confusion and difficulty
Methods
Remote moderated testing (on Zoom)
Tasks
- Add the produce item, fresh peas 1 lb to your list.
- Add the dairy staples template to your grocery list.
- Edit your dairy staples template to remove the gallon of milk.
- Create a new template called ‘Kroger’s’ and add the meat item, ground beef 1lb- 4 patties, to the list dairy staples template to remove the gallon of milk.
Affinity map and priority changes
Adding multiple grocery items to the list in one click was a big win. Users found having one main shopping list and adding premade templates to the main list was intuitive and useful. What they struggled with was initially understanding what a template was, emphasizing the need for either renaming the function or including an onboarding flow for the new feature.
Iteration
Incorporating feedback from user testing and changing UI elements for clarity and ease of use.
Reflection & Next Steps
Eating well and sticking to a meal plan is challenging. Anything that helps make the process easier is a relief. From user research I learned how challenging it was for people to stick to a healthy lifestyle and eat well. Lifesum app users have the motivation to track their food intake but still want help with the process, especially with grocery shopping. A grocery list feature decreases the cognitive load on users in planning their weekly shopping trip and helps them stick to their health goals.
What I learned
Following an existing design system has it’s own challenges.
I appreciated being able to focus on user experience and not having to make specific visual design decisions. Seeing how poor design decisions (especially in regards to color) affected accessibility, and still following them, was challenging.
User testing provided a lot of valuable insights.
Moderated testing took more time but speaking with users brought up new issues I wasn’t specifically testing for.
Prioritization is key
Creating a project scope and goals helped me to stay on track and evaluate what was feasible in the project timeframe.
Next Steps
- More usability testing & iteration
- Business development, explore whether a shopping list can be uploaded to a grocery delivery service.
- Create a way for users to share shopping list with friends/family on the app.
