
MyCookBuddy
My Role
UX/UI designer
Duration
November – December 2020
MyCookBuddy is a prototype mobile application created in Figma. MyCookBuddy is an application where users can browse recipes, add their favorite recipes to their own cookbook, and add products to their shopping list, which they can share with other users if they wish. Users can also create meal plans with the app. This project was part of the Human-Computer Interaction course, and the goal was not only to design nice looking UI but also create best possible user experience. To make that happen, the prototype was tested and evaluated multiple times with potential users.
Objective of the project
The objective of MyCookBuddy application is to make recipe searching, shopping and meal planning as easy as possible. In addition, with price counting feature, application should also help users to save some money. Application should also support users’ own goals by suggesting suitable recipes and meal plans, whether the goal is weight loss, muscle gain or something else. Similarly, when suggesting recipes and meal plans, application should take into account allergies, diet type and dislikes.
Wireframing & paper prototyping
After I had clear objective, I started wireframing and paper prototyping. Wireframes was done with hands on paper to create some kind of visual about what kind of paper prototype I was going to do. After I created a wireframe I was happy with, I started with paper prototyping. Paper prototypes was done so that it was possible to be tested and evaluated by potential users and it was modified based on the feedback I received.



Mood board
One phase during this project was to create mood board. The mood board was source of inspiration for my application’s layout. The objective was to think colors, feelings, atmosphere as well as places of use.
I tried to get an energetic and happy but warm layout and I think that the colors of autumn and the kind of old/vintage pictures give some warm feeling. I also wanted to add something fun in there and that's why there are those little animals. I have this idea that when an application proposes something to the user (for example “would you like to add vegetables on your meal plan”) there would be the little animal saying that.
The application will have pictures about the foods to give better idea what the recipes are about, that’s why there is picture about plate of food. You can also see the future usage of the application from the moon board. You can see that the application will be on the phone, and you can see the recipes from it and you can use it while shopping.

Figma prototyping
After paper prototyping phase, it was time to start with digital prototyping. Here I have been using Figma as my prototyping tool. Figma prototypes were tested and evaluated as described on next chapter. Prototype was then modifies based on the feedback I received.




Testing & Evaluation
Think Aloud session
Participants: 3
During the think aloud session, potential users tested the figma prototype and told me what they are doing, why and what they think. During the first think-aloud session my figma prototype was kind of unfinished. It did have all necessary functionalities, but I didn’t have any confirmation messages added just yet. Overall, the prototype was completely unpolished at the moment. It didn’t include any pictures just yet and on the place of some icons I just had simple button.
​
During think-aloud session the first impression about the application seemed to be that it looks nice. Most people seemed to like the colorworld I chose. However, one of the people that played with my prototype said that they don’t like the dark background too much. They said it is not bad, but it just gives a little non-energetic feeling when I aimed on opposite. I tried white background first, but it just didn’t fit (in my opinion). So, I ended up on black one. I was aware that it probably does not please everyone, and I was right.
​
Users said that the prototype is quite easy to use ad that it is also quite easy to understand what is going on. Since there weren’t any pictures for example on the recipe, I got question about why I chose to leave the recipe’s background white (they wondered if it was intentional). I had to explain that I just hadn’t finished the prototype just yet. One of the users also said that they felt like prototype was kind of narrow, that it would be nice to see what is going on in My CookBook and on Meal Plans. Well, My CookBook was unfinished, but Meal Plans was almost like I was going to leave it. I just don’t feel like I have enough time to include every single functionality in the prototype that I planned to, since the time was limited during the course. I feel like it does have enough functionalities to give just fine picture about the idea. Overall, I got mostly positive feedback from think-aloud session. Colors were just fine, and application was easy to use and understand.
Evaluation session
Participants: 6
The evaluation was carried out with a survey made on a google form and with another think aloud session. At this point my prototype was finished all the way. I had all the pictures and functionalities the prototype was meant to have. My CookBook was finished, and the prototype was polished.
​
During these evaluation sessions I tried to get answers on following questions:
-
Do they find this application useful?
-
What was first impression?
-
How satisfied are they with the look and feel of the app?
-
How satisfied are they with the ease of use of the app?
-
Were there features that didn’t work as expected in this prototype?
-
Is there anything that confused/annoyed?
-
Are there any other things that should be improved?
-
What things are good in the application?
I also gave them an opportunity to ask or comment whatever they wanted about the prototype whenever they wanted during testing session.
​
All of the participants found the application useful, and the first impression seemed always be positive. Participants found the application easy to use and they liked how the app looked like. Quoting the words of one participant “It [the application] conveyed warm and fresh feeling.” All of the participants also said that the application was easy to understand, and everything worked as expected. Apparently, the application did contain all necessary thing that are expected from application like this. Couple participants also really liked the cat I added in application, so it was worth it.
​
Participants didn’t have any major problems when using the prototype. However, there was some functions that didn't work as expected. For example, when they pressed heart -button, it didn't stay there if user went another place and came back. This is simply because the way I built the prototype. It would have needed quite a lot more work to make the prototype actually keep the heart in “like position” when going back to home screen. I would have been doable with more time but unfortunately, I didn’t find time to make the prototype as perfect as I wanted. Users also found it a little annoying that they could not press all the liking buttons that were on the screen. Again, this would require quite a lot more work and more time. Also, one of the users found the Help-screen kind of boring. They asked if I could add the cat in there too. I think that is quite good and fun idea and I am going to keep it in mind.
​
Otherwise, it seemed like participants found the prototype well made. They liked colours and overall look of the application, there was not problems, and it was easy to use and easy to understand. Also, most of the functionalities worked as expected.
In summary, it seems like my prototype came together quite well. Even though it does not include every single functionality the real application would have, it seemed to give just fine picture about what the application is about. I wound out that even though most of the people liked the look of the prototype, it is not for all. However, everyone found the application useful and easy to use and understand.
​
I was afraid that not everyone is going to understand why there is a cat (what is its purpose) but apparently, I worried for no reason. Everyone understood it just fine. I also expected that participants are going to ask a lot about how the prototype works and what is going on but again, I worried for no reason. Everyone seemed to understand it just fine. I also had one participant who does not underhand English too well (there was some weird words in application for them) and even they knew what to do thanks to icons and pictures. Sure, this gave me one improvement idea, to add other language options like Finnish so that everyone could use the app even though they wouldn’t speak English.
Final design
Here is the final figma prototype of the application. You can test it out below.
Conclusion
Prototype seemed to work out quite well. There were no major problems and most of the participants seemed to like how it looks. Usage seemed to be easy, and functionality of prototype seemed to be easy to understand as well. Prototype also gave good first impression. Overall, feedback about the prototype was mostly positive. I am quite happy with the end result of the prototype and most of the things worked just fine during the process. I managed to include all the functionalities I found necessary so it would give good picture about the idea of this application and how it would work.