Design Challenge: Create an end to end mobile application.

About: Skillette is a mobile application that I created for my project at DesignLab.

Role: UX Designer, Researcher, UI Designer

Timeline: 2 week sprint

Methods: Surveys, Interviews, Competitive Analysis, Wireframe, Prototype Test

Tools: Figma, Whimsical, Notion, Mockup


Goals and Objectives

Understand the user's challenges, wants, and needs when using recipe apps. Gain insights that will help design an application that is visually easy to read while still appealing, lessening the amount of stress and time spent browsing and preparing.


Based on the goals and objectives, I started my research with surveying participants who cook at home. I was curious how each participant utilizes recipes found online assuming that they start their search with Google. I also assumed that each participant didn't use a specific app or company, which is why I chose to do a competitive analysis afterwards.

Participants: 7 | Ages: 28-36 | Household size: 2-4 people

Summary Insights

Something I wanted to get out of my research from interviewing was how users prefer the format style of recipes. I created a short list of common answers to help guide me when designing the details of each recipe.

Competitive Analysis

  • Too much detail, I have to convert the ingredients myself, there is no way to adjust the serving amounts
  • Pictures, easy to ready instructions, serving size, simple ingredients
  • Hard to understand and follow
  • Too many steps, when its confusing to read

By surveying participants, I was able to understand their wants and needs from a recipe application. However, after going through the qualitative data, I realized that I didn't have much to compare the data to. I decided to expand my research by conducting a competitive analysis of direct and indirect competitors based on their strengths and weaknesses.



After my interviews, I gathered that this persona needed to be someone who has others to take care of. This persona needed challenges like food sensitivities. Matthew is going to help me design an application that is not only easy to navigate and understand, but well rounded.

Feature Roadmap

Below, I created a feature road map. The features listed are from competitors and based on the interviews. They were each categorized by must have, nice to have, surprising and delightful, and lastly can come later.


During this phase, I wanted to show the foundation of the application and how the user will navigate through the site.


Here is the overall mapping of each screen on the app. When designing what the main navigation would look like, I decided to use the competitors from my analysis for inspiration. I wanted to make sure to keep it simplified, avoiding any frustrations from my persona.

Task Flow

I created task flows to understand the overall mapping of the app. Each of these tasks incorporate a screen that I intend to be a part of the bottom navigation. These flows will be use during my testing phase. Because, this is a design from scratch, I am curious to see how the users navigate through them.


In this next step, I used the MockUp app on my ipad. I sketched out each screen that is a part of the bottom navigation. I focused on making sure that visually each page is not busy looking but that there is enough information for the user. To accomplish that, each card will have an image, title, description, cook time, level.


My next step in the process was design. Here you will see my mid-fi wireframes, my UI Kit, and my hi-fi wireframes. During this process, I was able to meet with the acting stakeholder not only as a touchpoint but to being working on the brand identity.

Mid-Fi Wireframes

After my sketches, I quickly put together some mi-fi wireframes.

UI Kit

I scheduled a meeting with the acting stakeholder in order to get a better idea on the color palette, typography, icons, buttons, and components. Another goal was to finite the name of the app and what the logo would look like. We met for an hour over zoom and started writing ideas and even looking at some of the competitors I previously looked at.

Hi-Fi Wireframes

Using the UI Kit that I created with the acting stakeholder, I incorporated the components and colors to create these high fidelities. I made some changes from the mid- fi after the stakeholder mentioned that they wanted a friendly modern look. With all the components round edges and the color palette light, I was able to accomplish what was asked.


Usability Test

In order to complete these tasks, I prefaced the participants on the user persona I created. I wanted the participant to go through the tasks as if they were Matthew.

Participants: 3 | Ages: 23 - 29

Tasks to test

  1. After you check out your recommended news feed, go ahead and explore for a "Stuffed Bell Pepper" recipe to make for dinner. Don't forget to categorize for a gluten free option. Remember to save the recipe so that you can get to it later
  2. Check out your profile. Looks a bit empty. Lets start by adding your famous Cast Iron Skillet Cookie recipe.


I used a severity rating scale to synthesize my findings based on the usability tests. For the sake of my project timeline, I decided to make the changes as part of a application upgrade in the future.


After conducting the usability test, I quickly connected with the stakeholder and provided the insights over. The stakeholder understood the concerns of each of the participants and would go forward with darkening the color palette more. Overall, the stakeholder was happy with the feedback.



This 2 -week sprint was a success and I was excited to hear the feedback given from the participants and the acting stakeholder. The reason I decided to incorporate the stakeholder was because I wanted there to be constraints.

Future Considerations

  • Because this was a 2 week sprint I would have loved to have met more with the stakeholder and practiced presenting and communicating.
  • Spent more time sketching. I definitely took a safer look by going simple, but next time I would definitely spend more time brainstorming and throwing out sketch ideas.

View other case studies:

Nana's Apothecary

UX/ UI Design | Product Redesign

Case Study

All You Clothing

UX/ UI Design | Product Redesign

Case Study

Hulu - Add a feature

UX/ UI Design | Product Design

Case Study