Cartify mobile web app
A digital recipe book to make it easier, faster and smarter to grocery shop for
your favourite recipes.
_________________________________________________________________
Contributors
Individual
_________________________________________________________________
Skills
Research, UI, UX, Visual design, Prototyping, HTML/CSS + JavaScript
_________________________________________________________________
Timeline
4 weeks
Overview
Cartify is a convenient and customizable digital recipe book to make it easier, faster and smarter to grocery shop for recipes. As a deliverable for my Interaction Design Methods course, I was prompted to design a practical daily-use mobile web app and build it using HTML/CSS and JavaScript (for the first time!).
Defining the problem
Due to the COVID-19 pandemic, the closure of many restaurants have forced us to make meals at home. With endless possibilities of recipes to try, it’s hard to keep tabs on all of them and use them when you want to. The lack of organization makes it especially difficult to shop for all the ingredients you need.
I’ve been excited and challenged by the “new way of life” due to the lockdowns. I designed Cartify to explore how to create a one-stop-shop that keeps all your favourite recipes and easily shop for them with organized shopping lists.
To get a better understanding of the home cook, I interviewed six individuals to determine their:
Motivations and needs
🍊 Home cooks value convenience.
🍊 Home cooks seek a solution to keep them organized and efficient when preparing meals.
Problems
🍊 Lack of time causes stress on what to prepare for meals everyday.
🍊 Difficult to organize ingredients needed for meals so grocery store runs are inefficient.
🍊 There are too many recipes they want to try and there isn’t a place for them all to refer to later.
Brainstorm
I then turned the three problems into two main user tasks and created a modified morphological chart to determine the most effective means of achieving those tasks. I went forward with the highlighted potential solutions after sketching possible combinations.
Competitive analysis
How does Cartify stand out from other recipe apps?
OurGroceries
OurGroceries provides a simple way to keep grocery lists synchronized on smartphones. It features multiple shopping lists, a web interface and Apple Watch integration.
Although OurGroceries is very effective for organization, users mentioned that navigation in some ways was redundant, decreasing efficiency. It also misses out on integrating shopping lists with the user’s recipes.
AnyList
AnyList allows users to create and share grocery shopping lists. It has several time-saving features to help organize shopping trips for recipes and household items. The app features a web interface, meal planning and importing recipes from other sites.
However, users have mentioned that being required to make an account to use it and subscription model to connect with smart technologies creates friction on the experience.
Competitive advantage
Cartify differentiates itself from other recipe mobile apps with tackling the most difficult task on hand: keeping organized and time efficient for cooking meals and grocery shopping for them. OurGroceries and AnyList provide extensive lists to organize general household groceries. On the other hand, Cartify focuses on doing one thing well by keeping it solely as a meal preparation assistant from grocery store to kitchen.
Measuring Success
I chose two success metrics to validate the design:
Usability Testing
By setting a task goal and observing how users navigate the app, we can get direct feedback on
1) how to make it easier for them to use and
2) prove that it is easy to use.
Net Promoter Score (NPS)
This will provide quantitative feedback on the opinions of the app. I set my benchmark NPS to 39 based on the benchmark for grocery apps.
User Flow
To help structure our solution before creating a wireframe, I mapped a flow to prioritize and determine the journey to help achieve the needs and goals of the users.
Paper Prototypes
Before constructing my wireframe flow digitally and sketched all my ideas first before converting them digitally. I started off with grouping features for each wireframe and then moved to making refinements and iterations of all the screens.
Wireframes
I converted our sketches into a digital wireframe. It is a combination of the identified problem, user research and user flow. The goal of the first iteration was to validate the user flow of the application so that the application feels intuitive to users.
Observation study
I took our lo-fi wireframe to the test with our potential users. I gave them the goal to "Create a shopping list to buy ingredients for your favourite recipe". I noted key actions they took using the app and took note of the refinements we needed to make in our next iterations.
Insights
I tested the iterations of the prototype with 4 potential users throughout the process. The key improvements we needed after mi-fi testing were:
1. There was confusion with the button functions for adding an ingredient and adding a new recipe.
2. Ingredients should come before the recipe – users want to ensure they have everything they need before cooking.
3. The Net Promoter Score of 73 surpassed our benchmark of 39. This helped us confirm our mobile web concept and continue with this design direction. However, the score of 73 could have been inflated since users may have felt uncomfortable letting me know their true thoughts in person. It would also be difficult to predict if the users would continue using this app from this metric alone. Next time, I would choose a more concrete metric by using the NPS in an anonymous setting or after the user has used a product for a longer time.
Visual design
The goal was to create a strong brand identity that stood from the rest of the current solutions available. Millennials (ages 25-35) were our target user group so we aimed to create something that provided a sense of effortlessness, comfort and ease when they tackle the daunting task of preparing meals.
Final design
For the final prototype, we addressed the friction points found in our summary of insights, took into account our limited timeline and ability to code it into a fully functioning app.
Business considerations
Throughout the design process, I thought about how this app would fund itself. One of the main pillars of Cartify is accessibility, so having a paid subscription to use it would not be appropriate. Implementing ads by recommending recipes from third party sources such as cooking blogs, could reinforce the aspect of convenience for users so it eliminates the need to go back and forth on applications. I would look into how to display the recommended recipes relevant to users through the use of APIs and paid ads.
Takeaways
From research to a high-fidelity prototype, this project challenged me to practice UI principles through the following:
1. Sketch early. When I hit roadblocks, drawing different design options on paper helped me quickly visualize which ones might work better than others.
2. Collect more numbers. I heavily depended on metrics to validate my designs during usability testing and still found myself unsure of the results. This uncertainty came from one of my constraints of having a small sample size in the preliminary research. Having more data to analyze the next time around will give me more confidence to head in the right direction with the design to meet users’ needs.
1. Sketch early. When I hit roadblocks, drawing different design options on paper helped me quickly visualize which ones might work better than others.
2. Collect more numbers. I heavily depended on metrics to validate my designs during usability testing and still found myself unsure of the results. This uncertainty came from one of my constraints of having a small sample size in the preliminary research. Having more data to analyze the next time around will give me more confidence to head in the right direction with the design to meet users’ needs.
