Mobile App Case Study: DROOL
User Research, Design, Low-Fi Prototyping & Testing
An Overview of Drool
After observing challenges cooking enthusiasts face, we were inspired to design an application that addresses some of their concerns. Drool was designed to a lo-fi prototype level with two rounds of usability testing through a rigorous UX design process to connect cooking enthusiasts, increase the availability of detailed, personalized, authentic cultural recipes and decrease challenges faced in finding unique ingredients.
Although Drool is not a fully developed app project, it was created following a real UX Design Process.
Role: UX designer
Date: July 2022
Timeline: 2 weeks
Tools: Figma, Google Drive, Zoom
Our Process
Following the Double Diamond UX Design process - Discover, Define, Design, Deliver - user research and analysis were conducted followed by ideation, wireframing, and finally iterations of prototyping and testing.
User Research
5 semi-structured user interviews were conducted following qualitative research methods to gain a better understanding of the problem. Interviews were conducted on Zoom following a pre-structured discussion guide, recorded, and thereafter analyzed through affinity maps on Figma for themes on user behaviors, likes, dislikes and needs.
What did I find?
Behaviors:
Users use apps and online resources for cooking recipes
Users like to peruse recipe photos.
Users use social media for cooking inspiration, cooking recipes and interacting with cooking recipe authors
Users look at reviews and comments on a recipe before choosing a recipe
Users like to save and categorize online recipes
Users get cooking inspiration from interacting with cooking enthusiasts from other cultures
Likes & Dislikes
Users like to watch recipe videos
Users like to get tips and tricks from recipe authors
Users like to have detailed recipes
Users find looking for ingredients stressful.
Users get frustrated looking for authentic cultural recipes
Users would like more interaction with cooking enthusiasts
Needs:
Connect and interact with cooking enthusiasts making cultural dishes
Find unique ingredients for cultural dishes in an area
Find authentic recipes for cultural dishes that are detailed and personalized
Jobs To Be Done:
Main Job
When I feel nostalgic for an ethnic food dish, I need to interact with people making this dish to know how to pick the best recipe with tips and tricks to follow while cooking so that I can make the dish confidently and correctly, connect with someone who understands my unique cultural background and experience, and relive my memories with the dish.
Secondary Job
When I feel nostalgic for an ethnic food dish, I need to know where I can get the best ingredients so that I can make the dish confidently and correctly.
Design Phase
Ideate & Prototype
I started the design process with quick sketches and low-fidelity wireframes. This way I iterated through many design options quickly. With my wireframes I was able to clearly define the basic features and the main user journey of the app.The following table shows how user research findings informed the design structure and features of the app.
What can users do in the app?
Users can search recipes and filter their search according to recipe author location, diet identifiers, type of cuisine, cultural identifiers and other parameters.
Users can find visual authentic recipes created by other users that are detailed and personalized.
Users can interact with recipe authors in real time
Users save recipes with specific tags including cultural tags
Users can view, interact and share authentic recipes that are detailed and personalized
Users can add recipe ingredients to a grocery list, and find which stores in their area have their ingredients.
Iterations & Usability Testing
With the help of Figma, I created a low fidelity clickable prototype. I tested this prototype with 7 users in 2 rounds of testing. After 3 tests, I did iterations on the designs and tested my solutions with the remaining 4 users. The following visual illustrates the testing process
Following the tests, quantitative data was analyzed on Microsoft Excel, while qualitative data was analyzed through affinity mapping on Figma.
Analysis revealed that users:
1. felt confident navigating the app and navigate easily
2. wanted to explore more of the app (outside their assigned tasks)
3. would get frustrated when parts of the prototype weren't fully developed
Data also showed that 100% of tasks were completed with a 1.5:1 error rate, with 86% of tasks being completed on time. Additionally, I discovered that some of the error clicks were caused by unclear task writing and undeveloped prototype links. Another interesting discovery was that the designed "happy paths" were not always the user's first options. Eg: instead of using icons identifying recipes as vegetarian, some users preferred to go directly to search filters and filter for vegetarian options
Following analysis, the prototype was iterated and adjusted as shown in the table below.
What's next for Drool?
The next steps to complete the design process for Drool are as to:
Complete the full prototype and run rounds of testing
Build the UI design around the look and feel of the app and test that as well.
What have I learned from this project?
I really enjoyed working on this project. I was particularly aware of my bias and made effort to stay focused on the user and their journey through research plans, discussion guides, usability test plans and test scripts. I definitely learned the hard way to plan and prioritize prototype flows and test scenarios. I ended up spending more time fixing the prototypes to work for multiple test scenarios than was probably needed.
Apart from this issue, I enjoyed this project. It also helped me learn more about the cooking space and the worlds of cooking enthusiasts.
