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
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
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.
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.
.png)
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.
.png)
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.
.png)
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.
.png)
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.
After my sketches, I quickly put together some mi-fi wireframes.
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.
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.
.png)
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
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.
.jpg)
.png)