Summary
With meal kit delivery services being ever so popular right now, Blu Cakes is a new company building a mobile application for a new take on this: desserts.
Problem
Millennials need a dessert kit that lets them explore their adventurous taste buds but also stick to their changing diets to fit their needs.
Solution
To be completely transparent with the users by laying out the nutritional information and compatible diets of all recipes.
Design Thinking Process
Discovering The Problem
User Research
The first step was performing user research to ground every step in the process. I created a 26 question survey which allowed me to gather some wishes and frustrations along with people’s demographic information, to later help me build out personas.
“It would be great if I could search by specific diets since I have a lot of health restrictions.”
Competitive Analysis
I wanted to ensure my app stands out from the rest. So, I conducted a competitive analysis on 3 major competitors: Hello Fresh, Daily Harvest, and Purple Carrot. I identified things they do well that I could possibly remix and iterate, and also identified their weaknesses and areas my app could fill the gaps.
User Flows
Coming out of the user stories, the main user flows definitely rose to the top. The first thing I did was think through the home screen. What buttons and information needed to live there to get the users started? What would be the most visited screens in the app that users will look for? I sketched that out on paper until I had it right.
Blu Cakes User Stories
Wireframes
Like I do with any wireframes, I started by sketching out screens on paper. I drew out most of the main screens and once I felt like I had enough written out to understand the flows, I turned to Figma to create digital wireframes.
Wireframe Home Screen
Wireframe Feed Screen
Wireframe Schedule Kit Screen
Developing Prototypes
Branding
Next it was time to add some color into these mockups. I made an inspiration board and started pulling images and fonts that resembled the look and feel I was going for. Because of the name, I knew I should make my color palette blue so I researched color palettes and came up with the teal and electric blue combination. I then looked into font pairings. I wanted something in a handwriting font for the logo to evoke a sense of hand crafted, but for the app I wanted something clean and simple to ensure everything was legible from an accessibility standpoint.
Blu Cakes Logo Sketches
Blu Cakes Style Tile
Adding UI
I stylized the buttons, made font sizes the actual size necessary according to Material Design's font scale, and thought through how the cards would display. At this point, I started creating a content strategy and finding the tone of the brand. I created copy for each of the screens to determine how I would communicate my message.
Blu Cakes Button Style Guide
Mockups
For my high fidelity mockups, I built out my main components first, like buttons and content blocks to create a design system. This made it easier moving forward to pull elements from the system instead of remaking them every time. Once all the screens were designed I built out the connections and relationships from screen to screen through the prototyping tool. Next, it was time to bring everything into testing!
Mockups Home Screen
Mockups Plan Selection Screen
Mockups Recipe Detail Screen
Mockups Recipe Search Screen
Mockup User Testing
I performed user tests on four individuals in my target market. I created a script and built out missions in the Maze platform for users to complete. In the end, I had four flows I took the testers through:
-
Create account
-
Select first dessert kit
-
Track order
-
Search and filter recipes
The results were very insightful because I could see where people were struggling and where things just clicked. Here were the main points of feedback coming out of testing: ​
People were confused about how to select kits for the first time. In my iterations I changed the wording on that section so now it has a clearer CTA.
Mockup First Kit Selection Screen
Updated First Kit Selection Screen
Mockups Home Screen
Updated Home Screen
The calendar previously displayed all 5 days of the week. Since people only receive deliveries once a week, I condensed the calendar to only show the delivery day and simplified it.
Users wanted to see all possible plan options and how the price would be affected by their selections. So I redesigned the plan selection screen to showcase that.
Mockups Plan Selection Screen
Updated Plan Selection Screen
Mockups Recipe Search Screen
Updated Recipe Search Screen
A couple people recommended changing the teal color to be bolder to fit in with the bright and clean style of the brand.
Dark Mode
After the project I created a second version in dark mode. Dark mode is becoming a very popular trend in apps and since my target is tech savvy millennials, I wanted to address that. I did research by looking at other apps and pulling UI toolkits to create the moody, elegant version of Blu Cakes. Knowing it was part of the overall experience, I also created the instructional recipe cards that would be delivered with the kits.
Dark Mode Home Screen
Dark Mode Plan Selection Screen
Recipe Card Front
Dark Mode Recipe Detail Screen
Dark Mode Recipe Search
Recipe Card Back
Learnings and Next Steps
I learned to test early and often. This app was challenging during many parts and I found myself turning to my users a lot to help me solve things.
​
To further refine this project, my next steps would be to bring the prototype into another round of user testing (including the dark mode) and mockup what the packaging would look like. I eventually hope to bring a form of this app into the market some day!
