Mobile App Design
Ramping up research for this project was very important since this food app concept is not very established! Getting input from local users and understanding their needs regarding meals was essential. The only comparable apps to this idea were a few apps based only out of Los Angeles.
In my Competitive Analysis research is where I discovered those apps. It was key for me to see how these apps incorporated the meals and also the cooks. I wanted the user to be able to search and filter only by cook if they found a particular one that they really like. I also wanted them to be able to casually browse and see what meal offerings are available.
Based in Houston, TX, I asked several participants to contribute their opinions on needs and wants for food and meals during the week. In the Survey, I asked questions such as having meals already made and ready to eat in the fridge. I also asked questions about having multiple portions available such as for 3-5 days worth of food.
What was particularly interesting was that it seemed that the idea of this service appeals increasingly to men. 3 out of 4 males agreed on the survey that they don’t mind eating the same thing for lunch every day.
Studying the user and their pathway through this app was about learning balance. I didn’t want the user to be overwhelmed with buttons, filters, or icons and I wanted the meals and the cooks to be the focus. I also wanted to have large high quality photos so that details can be seen. For the Homepage, I wanted the user to be able to see multiple modules at a time.
The users coming to this app would also be looking to be efficient, so I wanted the flow to be easy, minimal, and straightforward. There would be multiple options on one page before tapping to the next. Initially upon making the Sitemap, I thought that I would have a few main menu touch points. As I developed the homepage, I wanted even less options and distractions. I decided to keep most of the ancillary options, such as messaging, inside the hamburger menu. This made for a really simple and seamless browsing and ordering experience. It also keeps the user less likely to get confused by controlling their pathway.
In the Task Flow, the journey is very basic similar to an online shopping experience. The user arrives to the homepage and can view all available local meals. They also have the option to filter to a cook view only, in the case they like a particular cook. After selecting the meal, the user chooses the portion, adds to cart and proceeds to checkout. There is a pickup or delivery option. The checkout process can be very simple when they are doing pickup with a payment method and date/time selection.
In the User Flow, the overall question is focused towards purchasing a meal. The user can click around shopping for a meal and view all the details. They can add to cart and choose portions, and when they are ready to checkout they can submit the order. For the User Persona for Cookery, I created a young working professional who mainly focuses his time on productivity and efficiency. It makes sense for him to use this app because it fills a need that he has regularly.
.png)
I created a few different versions of the app design. Starting with Sketches, I knew I wanted the general layout to be simple and image focused so the user can see the food. I also didn’t want them to have to click a lot to get to what they want. Seeing it visually really helped me to decide just how minimal I wanted it to be.
When it came to the Wireframes, I could also visually see where I wanted different options and buttons to be. I could also see the size and ratio of the features. I wanted the Dishes/Cook filter to be very simple, just choosing between one or the other. I wanted a search bar and a left-to-right visual carousel to choose between cuisines. This view is utilized on other food apps such as Doordash and users are familiar with it.
My favorite part of the design process was creating the brand. I explored colors and themes that seemed fresh and organic. Thinking about food, I hoped the user would imagine tasty and homemade comfort food. Originally I went with an orange and green color palette and I ended up with a mainly green and bit of vintage yellow. I learned a lot about contrast and color accessibility in creating this app. My goal was a warm environment that was inclusive of all food and cuisines.
For the Logo, I envisioned a simple, easy to understand icon. I also wanted a short name that was also straightforward but also a little quirky and different. I brainstormed many ideas relating to home cooks, utensils, kitchens, and ingredients. A cookery to me meant a place that creates and makes homemade food. Cookery is actually a word, meaning “the art or practice of cooking.” I loved this because in encased the warm and welcoming vibe of brand - a source to get your own homemade food. In the icon, placing a chef hat inside of a house established the idea of cooking at home. It also reinforces that it’s a chef/cook doing the cooking.
After refining the high fidelity frames, it was time to test. I recruited the help of 3 participants to test out the app in its best form. The pathway through the app contained about 6 screens. The user begins at the Homepage and scrolls the dish options and finds a dish they’d like to select. After selecting shrimp ramen, the next screen is showcases it on the Product Page. The user can choose a portion amount and then add to cart. After tapping add to cart, the next screen is My Cart. The user can review and edit the cart or go back. When ready to proceed, they select either pickup or delivery for route of obtaining their order. In this case of pickup, the bottom of the screen allows for pickup options. After date and time are selected for pickup, the user taps Checkout to continue. From there, the user has the option to create an Account. It was important for me not to force an account creation from the beginning of the flow. Because this is a fairly new concept, I wanted users to be able to browse and look around without being forced to commit right away. If users end up liking and re-using the app, then I wanted them to be able to make an account and be able to save their favorites, orders, and information. There is also an option for Guest Checkout, for those that want to try it out and not commit. For this example, after selecting Guest Checkout, the next screen is Checkout. On this screen, the user confirms their order and pickup selections and enters in their name and payment information. When completed the user selects Submit Order and the order is complete. On the last screen which is the Confirmation screen, a big checkmark lets the user know that the order is successfully submitted. They also receive an email confirmation.
Click here to view the Prototype for Cookery.
After the 3 participants tested the prototype, I created an Affinity Map of the results. After that, I made revisions to the design and incorporated the feedback.
Designing this app was one of my favorite creations in my UX/UI journey. I learned a lot about research and design. It’s always insightful when you do research and learn more about your users and your own assumptions. I learned that this concept of an app is tailored towards certain people, not just an entire general people group. Regarding design I worked a lot with modules and compacting essential info into each module on the homepage. I also learned a lot about colors and color accessibility—firstly with white and an off-white color and then with yellow and white. I learned about the contrast and separation of similar colors. I played around a lot with shadows in this project practicing with depth and natural light. I also learned about creating separation with a light stroke.
To further improve the project, I think I would elaborate more on details and usability. I would make more screens and interactive options. I might also come up with a few more drafts for the homepage. Overall, for creating a minimum viable product, I am excited about the Cookery and would greatly enjoy building it out even more. It’s been a blast getting to create this app.
