“That’s the way the cookie crumbles…”
– Simon Skinner (Hott Fuzz)
Passion project
Or scan the QR code to experience on your phone.
Note: Figma app is not required.
• UX designer and researcher
• Created key user flows and wireframes
• Created high-fidelity wireframes to show the full product experience.
Many people are unable to visit the famous Detroit Cookie Company bakery, they need a way to recreate their favorite cookies at home.
October '21 - Jan '22
UX designer
Creating a new cookie recipe app to help people make their delicious dreams come true at home.
Figma, Unsplash, Mockuuups (plugin)
Why did they need a recipe app that could offer that? Well it’s for several reasons not everyone wants to order something online to be shipped or dashed to your house, they work hours that clash with the bakery’s hours, they want the cookies hot and fresh, and it can get expensive going to buy specialty cookies all the time.
Once the competitive audit and initial surveys were complete, it was time to draft up some wireframes. My goal was to make the app minimal while still keeping the learning curve low. I already had a million ideas racing through my head while hearing the design brief. Due to the nature of this passion project on top of pandemic times, I chose to unmoderated usability study with five participants who enjoy eating cookies. From the information I gathered, I was able to gain a lot of insights, themes, opportunities, and HMWs. I then started to converge on design changes in the wireframes and move forward in the design process, to designing things right.
The design brief was set, and your favorite specialty cookie recipes are coming to your phone! But why and how? After defining the problem statement and goals, it was time to start diverging on what the user was needing for this app to be successful. The user needed a recipe app that had a low learning curve, easy to search, and had easy steps to follow to allow almost anyone to recreate a specialty cookie from Detroit Cookie Company.
Now it was time to start the cycle of ideating, getting all those ideas out, establishing a design system, prototyping, and testing. The design system was relatively straightforward since the colors and typefaces were established to match the actual bakery. A second usability test was done, to solidify that I was creating the best possible product. After that third test, more more design changes were made, and accessibility features were added. These features included dark mode as well as color blindness options for the entire app.
This was a fun passion project, my final product is one of my favorites that I have created. I hope you enjoyed it as well. There’s always room to grow. I will always see something I missed or something I could've designed differently. I believe nothing is ever perfect.
In this tab you will find my problem exploration, competitive audits, user journey, and wish lists for the app.
Accessibility to the bakery is difficult for many users due to work hours or personal reasons. Offering a recipe app will allow more reach in the community during this time of lockdowns and different memories being made.
Compare the recipe experience of each competitor's app.
Our key competitor is Cakes & Baking App, a small business with a simple app that covers all sorts of dessert recipes. This company is fully online via an app for a phone or a tablet, with no website to go to. My first impression is that the app is not branded well, is slow to load, and the visuals need a lot of work.Our other competitors are Desserts App and Cake Recipe App. Both are very similar to Cakes & Baking, however, both of these apps are even more simple and even more poorly done.Yummly and Epicurious are indirect competitors, both are medium-size businesses that are very well done and only available on a phone or tablet. For the indirect competitor, Yummly will be the focus.
Cake & Bake’s app is simple and very easy to use, however it is not of good quality. Many of the images are distorted and hard to tell what is what. The app does offer level of difficulty and the cook time icons on each thumbnail and it is viewable without clicking on the recipe. The baking directions are straightforward and to the point, however, there is not an overall synopsis of what kitchen tools you will need in order to bake that certain recipe.Yummly’s app is relatively simple and easy to use, however it does have decent depth. With the paid pro version of the app, you have access to a lot of quality items such as meal plans, higher-end cooking instructions, and a scan to search. The free version still offers a lot of quality features such as an excellent shopping list with many filters, great search filters, and an easy way to preview and save the recipe.
Cakes & Baking positions itself as offering “Easy baking recipes for you.” This app is cheap, relatively reliable, and is accessible anywhere as long as you have service to your device. This will keep users happy and potentially loyal. With how much is available in the free version, it would be easy to get over the slight inconveniences and lack of good visuals this simple app offers.Yummly positions itself as “Your favorite edible inspiration.” And the images are just that. This entire app is filled with beautiful pictures of food. Everything is pleasing to the eye and simple to use. All of the free features will keep users loyal and even become paying users just because of the accessibility and simplicity.
Cakes & Baking’s tone is friendly and informative. As they claim, “easy baking recipes for everyone.” The recipes and directions are very simple and to the point. The app does offer a quick reference for the level of difficulty before clicking on the recipe.Yummly’s tone is friendly, fun, and inspirational. As they claim, “your favorite edible inspiration,” I do believe that users at any and every level of experience could open that app and find something they would want to make.
Cakes & Baking positions itself as offering “Easy baking recipes for you.” This app is cheap, relatively reliable, and is accessible anywhere as long as you have service to your device. This will keep users happy and potentially loyal. With how much is available in the free version, it would be easy to get over the slight inconveniences and lack of good visuals this simple app offers.Yummly positions itself as “Your favorite edible inspiration.” And the images are just that. This entire app is filled with beautiful pictures of food. Everything is pleasing to the eye and simple to use. All of the free features will keep users loyal and even become paying users just because of the accessibility and simplicity.
Cake & Baking’s weakness includes the visuals, the load times, the shopping list, the advertisements, the directions ending too close to the side, and some of the filters being too in-depth and not simple enough.Yummly’s weaknesses include not having a good preview for the recipe such as cooking time and difficulty level, guided tours for the app restart every time no matter previously clicking “got it,” and that search and explore are two separate sections.
Competitor products don’t offer a usable timer for regular baking, a quick reference or search filter for kitchen tools needed and good substitute options, or a spot for notes to reference for a later time.
Some opportunities we identified include good substitutions options for a healthier, but still delicious cookie. Personalized note area for every recipe. Video/audio options for the recipe directions. A reference on what kitchen tools are needed prior to reading the recipe. A timer is available in the app in order to avoid leaving the app. The ability to share with others the delicious creations.
Some opportunities identified included good substitutions options for a healthier, but still delicious cookie. Personalized note area for every recipe. Video/audio options for the recipe directions. A reference on what kitchen tools are needed prior to reading the recipe. A timer is available in the app in order to avoid leaving the app. The ability to share with others the delicious creations.
🍪 Some opportunities we identified include good substitutions options for a healthier, but still delicious cookie.
🍪 Personalized note area for every recipe.
🍪 Video/audio options for the recipe directions.
🍪 A reference on what kitchen tools are needed prior to reading the recipe.
🍪 A timer is available in the app in order to avoid leaving the app.
🍪 The ability to share with others the delicious creations.
In this tab you will find my user's pain points, how might we brainstorming, personas, and their personalized user journey.
Some people don’t feel comfortable paying online for things such as ordering take-out and paying ahead of time in order to pickup.
Inconvenient work hours that do not coincide with a store’s hours are a major frustration that some people deal with.
Sometimes it’s the little things, like eating a cookie when it’s hot and fresh. Or also taste-testing the raw dough.
With a large family, it can get expensive quickly when going out for a tasty treat or meal. Making food at home is usually much cheaper.
“Happiness is homemade.”
Rone is a retired grandpa who needs fun and easy-to-follow recipes because he loves to bake with his grandkids while making memories.
His goals:
⭐️ Fun memories with grandkids
⭐️ Spoil the grandkids
⭐️ Eat all the cookies and sweets!
⭐️ Adjust sugar intake.
His frustrations:
🚫 Hates paying online for anything
🚫 Hard to take all the grandkids to the bakery at once.
🚫 Bakery visits get expensive very quickly.
• Full name: Tyrone Jones
• Age: 58
• Location: Hamtramck, MI, USA
• Family: Wife, two sons, and six grandkids all under 12.
• Job: Retired Marine, works at Home Depot part-time to stay busy.
Rone’s backstory:
Tyrone, goes by Rone, loves to soak up as much time as possible with his grandkids. Like Rone, and any growing child, they love to eat and sweets are at the top of the menu. He has zero complaints with the basic sugar cookie or a nice chocolate chip cookie, but the kids get bored quick while baking. He wants them to have fun and spark their creativity. Rone’s youngest son told him about this unique local bakery that the kids are absolutely enthralled with.Detroit Cookie Company is pricier, but extremely fun with all their unique cookies. It’s hard to take all the grandkids at once anywhere by himself and with that many kids, the bill would rack up quickly. Ordering online is not something Rone is comfortable with. His youngest son keeps him updated on technology, but he doesn’t trust putting his card on the Internet. He would love a simple to follow menu and options to adjust any recipe for dietary purposes. Watching that sugar intake is something his wife, Candice is very concerned with.
1. Get his phone from a grandchild.
2. Open the DCC Recipe App.
3. Look at the homepage.
😓
Overwhelmed
😐
Anxious
🍪 Allow the app to save users’ data on their phone and forgo creating a login if they prefer not to worry about an email and password.
🍪 Expanding on the thought above – Allow user’s to save favorites, notes, and save substitution options.
1. Look for the magnifying glass in the app to indicate the search section
2. Press the search bar to type/press peanut butter suggestion
3. Type peanut butter/press peanut butter suggestion and hit search/enter
😓
Overwhelmed
🤤
Hungry
🍪 Make the search bar obvious.
🍪 Clear options/suggestions for things to search.
1. Scroll through the options
2. View images
3. Compare ingredients needed and cook times
😄
Excited
😬
Apprehensive
🍪 Make it easy to compare/contrast recipes without having to leave the search page.
1. Read the selected recipe completely.
2. Prepare kitchen tools.
3. Get ingredients out.
😁
Motivated
🤓
Focused
🍪 Option for a recorded voice to read out the recipes per section.
🍪 Clear and simple directions.
1. Decide if and what to substitute in the recipe.
2. Click “see more” to view a list of what is suggested for replacement.
3. Bookmark the substitution option.
4. In the notes option of the recipe, write anything needed for next time.
😟
Worried
😅
Quickly relieved
🍪 See substitutions without having to leave the page.
🍪 Replace the initial ingredient with a substitution on the main recipe page.
1. Mix the selected recipe and any substitutions together.
2. Cook
3. Eat the delicious creation!
4. If the cookie was enjoyed, bookmark the recipe to find it easier for next time.
🤓
Focused
🤤
Hungry
🍪 Timer option on the recipe page.
“Life is too short – eat the sweets!”
Liz is a busy 9-5 worker who needs to gain more cooking skills to bake sweets because she wants to impress her coworkers.
• Full name: Elizabeth Rhodes
• Age: 25
• Location: Grosse Pointe, MI, USA
• Family: Dog named Jim
• Job: 9-5, customer service with General Motors.
Her goals:
• Improve baking skills
• Eat all the cookies
• Try new things
• Bring cookies to work
Her frustrations:
• Inconvenient bakery hours with her work hours.
• Ordering a shipment in is nice, but never hot and as fresh.
Liz’s backstory:
Elizabeth, or Liz, works a pretty standard 9-5 job just north of Detroit. She loves a busy office, the coffee, the co-workers and the lovely treats brought into the break room. Liz has a huge sweet-tooth and loves when there are sweets brought into work. She loves the local cookie shop, Detroit Cookie Company, and all their unique gourmet cookies.Unfortunately due to the bakery’s location, hours of operation, and Liz’s work schedule, getting fresh cookies from her favorite bakery is just not do-able. Liz is not much of a cook, but for the sheer love of cookies and wanting to impress her coworkers, she wants to mimic her favorite bakery. And if she learns some cooking skills along the way she won’t be mad about it.
Her goals:
⭐️ Improve baking skills
⭐️ Eat all the cookies
⭐️ Try new things
⭐️ Bring cookies to work
Her frustrations:
🚫 Inconvenient bakery hours with her work hours.
🚫 Ordering a shipment in is nice, but never hot and as fresh.
• Full name: Elizabeth Rhodes
• Age: 25
• Location: Grosse Pointe, MI, USA
• Family: Dog named Jim
• Job: 9-5, customer service with General Motors.
Liz’s backstory:
Elizabeth, or Liz, works a pretty standard 9-5 job just north of Detroit. She loves a busy office, the coffee, the co-workers and the lovely treats brought into the break room. Liz has a huge sweet-tooth and loves when there are sweets brought into work. She loves the local cookie shop, Detroit Cookie Company, and all their unique gourmet cookies.Unfortunately due to the bakery’s location, hours of operation, and Liz’s work schedule, getting fresh cookies from her favorite bakery is just not do-able. Liz is not much of a cook, but for the sheer love of cookies and wanting to impress her coworkers, she wants to mimic her favorite bakery. And if she learns some cooking skills along the way she won’t be mad about it.
1. Find her phone.
2. Open the DCC Recipe App.
3. Look at the homepage.
😄
Excited
😐
Anxious
🍪 Allow the app to save users’ data on their phone and forgo creating a login if they prefer not to worry about an email and password.
🍪 Expanding on the thought above – Allow user’s to save favorites, notes, and save substitution options.
1. Look for the magnifying glass in the app to indicate the search section
2. Press the search bar to type/press peanut butter suggestion
3. Type peanut butter/press peanut butter suggestion and hit search/enter
😓
Overwhelmed
🧐
Inspired
🍪 Make the search bar obvious.
🍪 Clear options/suggestions for things to search.
1. Scroll through the options
2. View images
3. Compare ingredients needed and cook times
😄
Excited
😬
Nervous
🍪 Make it easy to compare/contrast recipes without having to leave the search page.
1. Read the selected recipe completely.
2. Prepare kitchen tools.
3. Get ingredients out.
😁
Excited
🤓
Focused
🍪 Option for a recorded voice to read out the recipes per section.
🍪 Clear and simple directions.
1. Mix ingredients for the selected recipe.
2. Cook
3. Enjoy!
4. Bookmark the recipe.
🤩
Inspired
🤤
Hungry
🍪 Having options for a forum for people to share what they did and even added flair. A good way to share more cookie love. And potentially a great way to keep the actual bakery involved with these users.
1. Put cookies in a cute travel container.
2. Take to work.
3. Take a picture to document and post onto a social platform.
😎
Productive
🤩
Excited
🍪 Establishing a hashtag or something that the users of this app can share what they did with the world – or at least friends and that bakery if they wanted to. Help promoting a community even further for the cookie lovers.
In this tab you will find information architecture, wireframes, user testing, affinity maps, themes, design changes, and insights.
Katherine Jensen, UX designer and researcher at Black Lightning Creative, kj@blklightningcreative.com
None, this is a passion project.
Creating a new cookie recipe app to help people make their delicious dreams come true at home with family. They are always welcome at the bakery, however, this allows more reach in the community during this time of lockdowns and different memories being made. We need to find out if the user experience of finding the recipe they want, the directions are straightforward, able to adjust the recipe as desired, is easy for users to complete. We’d also like to understand any user pain points while searching, favoriting a recipe, using an in app timer, and utilizing the shopping list.
Determine if users can complete main tasks within the prototype of the DCC recipe app. Determine if this cookie recipe app is difficult to use.
🤔 How long does it take a user to find and understand a recipe in the app?
🤔 Are there parts of the user flow where users get stuck?
🤔 Are there more features that users would like to see included in the app?
🤔 Do users think the app is easy or difficult to use?
⚡️ System Usability Scale (SUS)
Unmoderated usability study
Or scan the QR code to experience on your phone.
Note: Figma app is not required.
🗓 Sessions will take place on September 12 - 16. The participants have five days to turn in the assignment.
⏳ Each session will last 5 to 10 minutes, based on a list of prompts
📍 United States, remote (each participant will complete the study in their own home)
Participants are all dessert lovers with a range of jobs from full-time, part-time, and retired and who enjoy something sweet at least once or twice a week.
👥 Three males and two females, between the ages of 18 and 75.
⛔️ If a participant had a visual impairment, I would make it accessible for use with a screen-reader and a switch device.
🎁 Compensation: A crisp, virtual high five. If this was a real usability study, I would give them a $25 DCC gift certificate to go buy some delicious cookies.
During the unmoderated usability study, a list of prompts was given via Google Drive.
Pick a cookie that is ranked at an easy level and add it to your favorites.
Prompt 1 follow-up: How easy or difficult was this task to complete? Is there anything you would change about the process of finding a cookie that’s at an easy level?
Select a cookie and add three items from it to your shopping list.
In the cookie from the last prompt, based on the directions, set the in-app timer accordingly.
Prompt 3 follow-up: How easy or difficult was this task to complete? Is there anything you would change?
From the home page, figure out where you would go to edit your profile.
How did you feel about this cookie recipe app overall? What did you like and dislike about it?
65%
This means that the SUS rating was poor and there’s a lot of work that needs to be done to increase the usability of this app.
Or scan the QR code to experience on your phone.
Note: Figma app is not required.
🗓 Sessions will take place on November 1-5. The participants have five days to turn in the assignment.
⏳ Each session will last 5 to 10 minutes, based on a list of prompts
📍 United States, remote (each participant will complete the study in their own home)
Participants are all dessert lovers with a range of jobs from full-time, part-time, and retired and who enjoy something sweet at least once or twice a week.
👥 Three males and two females, between the ages of 18 and 75.
⛔️ If a participant had a visual impairment, I would make it accessible for use with a screen-reader and a switch device.
🎁 Compensation: A crisp, virtual high five. If this was a real usability study, I would give them a $25 DCC gift certificate to go buy some delicious cookies.
During the unmoderated usability study, a list of prompts was given via Google Drive.
Pick a cookie that is ranked at an easy level and add it to your favorites.
Prompt 1 follow-up: How easy or difficult was this task to complete? Is there anything you would change about the process of finding a cookie that’s at an easy level?
Select a cookie and add three items from it to your shopping list.
In the cookie from the last prompt, based on the directions, set the in-app timer accordingly.
Prompt 3 follow-up: How easy or difficult was this task to complete? Is there anything you would change?
From the home page, figure out where you would go to edit your profile.
How did you feel about this cookie recipe app overall? What did you like and dislike about it?
75%
This means that the SUS rating was average and the usability of this app has imporved since the first version of the low fidelity prototype.
Are they the best they can possibly be?
Can they be better?
Does the list make it easier to shop or an added step?
Do notifications work regardless of the page the user is on?
Are the settings simple enough, but enough for the users?
Are the directions set up well and easy to follow?
Are the personalized notes easy to access?
Or scan the QR code to experience on your phone.
Note: Figma app is not required.
🗓 Sessions will take place on December 15-20. The participants have five days to turn in the assignment.
⏳ Each session will last 5 to 10 minutes, based on a list of prompts
📍 United States, remote (each participant will complete the study in their own home)
Participants are all dessert lovers with a range of jobs from full-time, part-time, and retired and who enjoy something sweet at least once or twice a week.
👥 Three males and two females, between the ages of 18 and 75.
⛔️ If a participant had a visual impairment, I would make it accessible for use with a screen-reader and a switch device.
🎁 Compensation: A crisp, virtual high five. If this was a real usability study, I would give them a $25 DCC gift certificate to go buy some delicious cookies.
During the unmoderated usability study, a list of prompts was given via Google Drive.
Pick a cookie that is ranked at an easy level and add it to your favorites.
Prompt 1 follow-up: How easy or difficult was this task to complete? Is there anything you would change about the process of finding a cookie that’s at an easy level?
Select a cookie and add three items from it to your shopping list.
In the cookie from the last prompt, based on the directions, set the in-app timer accordingly.
Prompt 3 follow-up: How easy or difficult was this task to complete? Is there anything you would change?
Edit the item in your list from one to two eggs.
How did you feel about this cookie recipe app overall? What did you like and dislike about it?
90%
This means that the SUS rating was good and the usability of this app has greatly improved since the first version of the low fidelity prototype.
Are there any features we can add to the recipe directions and ingredients?
How can we make the last three tabs better?
Are there any key features we can expand on?
Does the list make it easier to shop or an added step?
Can the quantity for the list adjustment be simplified?
Do notifications work regardless of the page the user is on?
Are the settings simple enough, but enough for the users?
Are there better ways to adjust the filter?
In this tab you will find my final high fidelity design and information on handoff.
Or scan the QR code to experience on your phone.
Note: Figma app is not required.
If this was a real project and not a passion one, I would have been involved with the development team earlier in this process. Specifically during the start of the develop phase. I believe that early communication and collaboration can go a long way with helping make a process easier and potentially faster. Even after handoff I understand that the process is not over, more potential renditions, collaborations, and redesigns will be needed.