What is Cakebook?
It is a mobile application where you can find and read recipes for cakes and other desserts. For a given recipe there is a possibility to order ingredients with delivery to you on a given day. The recipes are evaluated, commented, for some of them there is an option to get help from their authors. The application also allows you to publish your recipes. There is also a section of tutorials on cake making techniques.
My task list - the process
I created three personas, conducted user interviews, defined application scope and prioritizing using red routes and systemico.
Then I made also user flows and an application map, which was a base for my low fidelity prototype.
After performing usability tests on the lo-fi version I corrected the assumptions and made the high fidelity prototype.
The usability tests, which I conducted on a user group led me to improvements in the final version of the prototype.
Exploratory research
During the discovery phase, I conducted Individual In-depth Interviews to better understand the motivation and problems of the product audience. I tried to verify whether there was a need for ingredients purchasing service and whether the concept of sharing and supporting the community was attractive. Additionally, I wanted to check if the form of the mobile application is comfortable to use.
Some of the findings of the study:
- People with a small baking skills indicated the need for tutorials on specific cake making techniques (e.g. beating the foam)
- People with little experience stressed that they needed step-by-step instructions, even numbered, with a very simple description
- Respondents indicated that there may be an additional need for accessories and techniques for decorating the dough - because dough is not only about taste but also about appearance
Red routes prioritization
User flows
While creating user flows I wrote down the steps the user will go through while performing a specific task. User flows were thoroughly changed after creating a prototype of low fidelity and first tests - less important flows were removed and elements allowing an effective navigation were added.
Application map (simplified)
Low Fidelity prototype
Using user flows and application map I created a low fidelity prototype using Axure RP
During the prototyping process I quit the original concept of the main screen with a menu and replaced it with a list of recipes with photos. The menu itself was limited after excluding those types of filtering that had little potential to use.
All the most important screens and interactions were made in this prototype.
Link to the lo-fi prototype:
Usability tests of the lo-fi prototype
The study consisted of five tasks and was conducted using three testers. Between the individual tests the prototype was corrected on the basis of the comments received. In general, the transparency of the application and ease of use were assessed as good.
The most important conclusions from tests and resulting changes:
1. a phone number should be collected (needed for delivery) - a phone number field added on the order screen
2. basic use of the application should be possible without an user account/login - enabling use without login, adding login handling where needed
3. recipes and tutorials should allow user comments - adding comment function to recipe and tutorial sections
4. the recipe screen should contain links to supporting tutorials - context tutorial links and similar recipes links added on the recipe screen
5. the delivery address should be collected not earlier than during first order process - removing delivery address collection from the user account setup process, moving to the ordering process
High fidelity prototype
The high fidelity prototype was made on the basis of the lo-fi prototype and usability tests. Among other things, the bottom menu of the application has been replaced by tabs at the top of the page (changed later after A/B tests). The prototype contained real photographs and texts. The first version was based on the colors proposed by the users during the lo-fi tests.
The prototype was based on Google Material Design and made using Figma.
Interaction map of the prototype
Link to the hi-fi prototype:
Usability tests of the hi-fi prototype
The prototype was subjected to a five-second test and usability tests on two scenarios. The test group included people who have never seen the project before, as well as people involved in lo-fi and exploratory testing.
Conclusions from the tests were divided into critical errors, significant problems and minor problems. Most of corrections were introduced to the prototypes, some were transferred to business decisions on their introduction and placement in the subsequent phases of the project.
The most important conclusions from tests and resulting changes:
1. Poor color selection and contrast, poor readability of the text - WCAG contrast test, change of colors for 7.13 contrast
2. A need to order only selected ingredients of the recipe and additionally - accessories - introduction of checkbox list for ingredient selection in ordering process, link to the accessory shop
3. No print function for a recipe - adding the print function
4. Poor visibility of "add recipe" floating button - performing A/B test and introduction of the bottom menu
5. Entering the recipe page only after tapping of 'MORE' button - extension of the tap hotspot to the whole card surface
Future development possibilities, monetization
The application has a potential to build a community around sharing recipes and help - a function of direct communication between users can be introduced, an offer for good recipes authors or helping users - competition, bonuses in the store – can be developed.
The application is intended to be free of charge, and the income is to be earned from the supplied baking ingredients and commissions from affiliate links to the accessories store. There is a possibility of additional revenue e.g. from cooperation (or exclusivity) with brands supplying specific articles, or ads. It is possible to extend the tutorial sections with longer tutorials or online courses, which will be paid for by the user.
The project was a part of my graduation at CodersLab UI/UX design course.
