I served as the lead researcher/designer for this project and was responsible through all phases from research to implementation. As I would be expanding on an already existing app, I had to make sure any proposed design features matched their current interface. My duties included:
- Conducting industry and user research
- Synthesizing research to define project goals
- User testing and evaluation
Sketch, Photoshop, Marvel
1 week sprint
As part of DesignLab's UX Academy course, I was tasked with implementing a new feature on an existing platform. I decided to go with an app I personally use quite often called Lifesum, advertised as a personalized health and lifestyle guide. Lifesum members have access to personalized diet plans that come with custom macronutrient goals and recipe suggestions that can be immediately logged into the user’s food diary. I thought this feature could be taken one step further by including the option to create a weekly meal plan and grocery checklist, thereby reducing time and frustration spent thinking ‘what should I eat today?’.
- Design a new meal planning and grocery checklist feature that embeds within the current Lifesum mobile app.
My first task involved conducting primary and secondary research to discover how to implement the proposed features that users would actually want to use. I conducted 1:1 interviews and examined market research in order to gain further insight on how to appeal to Lifesum's existing and potential members.
I interviewed users that matched Lifesum's target market - people actively trying to lead healthier lifestyles - which helped narrow down my findings into something I could implement through a user persona and empathy map.
I also performed a competitive analysis matrix in which I compared six other similar weight tracking/meal planning apps. This allowed me to glance at all the competing features at once and look into which areas Lifesum was currently leading and falling behind in.
My research findings (see right) reinforced my decision to go ahead with implementing the meal planning and grocery list features to Lifesum.
I was then able to create a list of important features required to launch a minimum viable product. With a clear list of necessary features and pages I needed, I drew up a sitemap that would allow me to take a look at the app's information architecture. The pages indicated with a green dot refer to the proposed screens and features I would be adding to the existing sitemap.
- Saving money from eating out
- Knowing exactly what you’re putting in your body
- Motivational messages and progress reports that encourage the user to keep going
- Frustrations/Pain Points
- Ingredients going bad or having too many leftovers
- Having to track and calculate each meal's nutrition info
- Don’t know where to start when cooking healthy and planning meals
Once the research phase was done, I studied the existing Lifesum app to make sure my designs matched their interface as closely as possible. I designed the "Meal Plan" and "Grocery List" pages, as well as updating their current "Explore Recipes" page to integrate the proposed features.
At the moment, my prototype allows users to add a meal from the "Explore Recipes" page to their meal plan, view their meal plan in either daily or weekly view, and browse their grocery shopping list. I wanted these pages to be the main focal point during the usability testing phase.
- 100% of the participants were able to successfully complete the task of adding a meal to their meal plan and exploring the grocery list
- All participants found the process very easy and straightforward o None of them found any difficulties, confusion, or errors
- All participants felt the design and layout matched the existing app’s interface, although there was room for improvement (see below)
- Suggestions for improvement:
- Meal Plan
- A calendar view might be easier to visualize and select which days to add your meals to, as opposed to a drop-down list
- Confusion on what happens if planned meals aren’t kept up to date (checking off the tick after you’ve eaten your planned meal)
- Add some more colour or illustrations to make it more visually appealing
- Change colour/shade of background for dates so it doesn’t blend in/get unnoticed with the main header
- Add alternative method to viewing dates/weeks so users don’t have to keep scrolling
- Grocery List
- A bit more colour or illustration might help the page look more visually attractive
- Adjust font to make each item/category more distinguishable
- Meal Plan
Overall, the prototype received positive feedback from the test users and most of the suggested areas for improvement seemed to be in regards to the interface design rather than the actual user flow or ease of use.
Having a tightly constrained time limit for this project led me to focus primarily on conducting research and designing solutions effectively. I had to learn how to prioritize certain tasks, such as focusing less on the visual design in favour of producing a more solid interaction design/flow.
Moving forward with this project, possible improvements would include:
- Reiterating on the high-fidelity prototype to reflect user feedback
- Adding more pages and functions so users can explore the Meal Plan and Grocery List pages in more depth
- Conducting more usability testing for further observation on any positive areas, pain points, and changes that need to be implemented