This idea was born after discovering I had no time to cook and was eating out way too much. I wanted to cook at home but just didn't have the time. Constantly eating out is convenient but can be detrimental to your waistline and your wallet. I wanted a way to eat healthy AND have it be affordable. This app was the perfect compromise between an inexpensive, home cooked meal and the desire to eat out (because someone else was making the food for me).
The Build-a-meal app allows people to custom build their own meals affordably. They select how they want their meals cooked by inputting what their dietary needs are along with a few other variables. The meals would then be freshly made, cooked to order, and then conveniently home delivered. This application is intended for athletes or those who are above average in fitness who are more disciplined and concerned about what they are putting into their bodies.
After talking to several people during the interview, I developed David, my main persona. David is married and he and his wife are very health conscious. He wants to eat better but doesn't like the idea of having to meal plan. He likes variety and flexibility. I also felt this was a good opportunity to map David's journey through the product and log how he might feeling at various points during his experience.
View the full journey map.
There is one main task flow and that is to successfully build meals and go through the check out process. View the task flow.
The user flow contains a few more decision points. This is where David can decide what plan he wants, or if he needs to edit a meal. He can also save his meals and mark them as favorites. View the full user flow.
Building from all of the research I did and the personal development and journey mapping, I created low-fi sketches within Balsamiq in order to bring the user flow to life and determine the application's information architecture. View the full sketch.
Since this was an idea of my own making, I had full control over the branding. I wanted the app to be seen as colorful, fun and energetic, just like my potential users. I designed the logo where the 'b' looks like it has a spoon inside of it. The color palette is meant to come from actual food items. I wanted red, orange and green to signify fresh food. According to scientific research, those are colors that affect hunger.
After getting the branding to where I wanted it, I used my new look and feel along with my low fi mockups to put together the high fidelity mockups you see here. These are just a few sample screens. Interact with the prototype.
The UI kit, a comprehensive inventory of all of the design elements used for consistency when building the app, successfully demonstrates the vibrant and clean look I was striving for.
The affinity map activity gave way to some patterns and suggestions from the usability testing. There was some confusion around a few of the terms I had used in the app. A couple of the testers were concerned that their allergy may not be listed and how would that impact their meal selection. Being up front about cost and shipping was a concern as well. And some of the remote testers had some issues with the overall flow of the meal building process. View the affinity map.
I decided to use a priority matrix to prioritize the revisions that I would make. In the real world this would be a great group exercise. The group could rank and then prioritize the changes. Since most of the suggestions or changes landed in the upper quadrant (low effort/high user value) I was able to make most of them. View the priority matrix.
If this were a real world project, my next steps would be to do another round of user testing with the changes I've implemented. After that, I'd do another round of affinity mapping and synthesizing of that data. I'd iterate until the flow was as smooth as it could be. Then I would package it all up and ship it off to the developers.