UX & UI Design

Detroit Cookie Co Recipe App

“That’s the way the cookie crumbles…”
Simon Skinner (Hott Fuzz)

Passion project

A conceptual interactive prototype to help families recreate a famous bakery's cookies in their own home.

Check out the prototype for yourself!
Final Prototype

Or scan the QR code to experience on your phone.
Note: Figma app is not required.

Responsibilities

• UX designer and researcher
• Created key user flows and wireframes
• Created high-fidelity wireframes to show the full product experience.

Problem statement

Many people are unable to visit the famous Detroit Cookie Company bakery, they need a way to recreate their favorite cookies at home.

Product duration

October '21 - Jan '22

My role

UX designer

Goal

Creating a new cookie recipe app to help people make their delicious dreams come true at home.

Tools used

Figma, Unsplash, Mockuuups (plugin)

Design process:

Designing the right things

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.

Designing things right

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.

Typography
Colors
Components

Results:

Detroit Cookie Co Recipe 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.

Discover
Define
Develop
Deliver
Research Phase:

Discover

In this tab you will find my problem exploration, competitive audits, user journey, and wish lists for the app.

Problem exploration

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.

Competative audit

Goal of the competitive audit

Compare the recipe experience of each competitor's app.

Key competitors

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.

Type & quality of competitors products

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 o er 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.

Competitor's position in the market

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.

Competition's tone

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.

Competitor's strengths

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.

Competitor's weakness

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.

Gaps

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.

Opportunities

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.

User journey

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.

App wish list

🍪  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.

Synthesis Phase:

Define

In this tab you will find my user's pain points, how might we brainstorming, personas, and their personalized user journey.

User pain points

🔥 Paying online

Some people don’t feel comfortable paying online for things such as ordering take-out and paying ahead of time in order to pickup.

🔥 Work hours

Inconvenient work hours that do not coincide with a store’s hours are a major frustration that some people deal with.

🔥 Hot and fresh

Sometimes it’s the little things, like eating a cookie when it’s hot and fresh. Or also taste-testing the raw dough.

🔥 Expensive

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.

How might we...

... let the user find cookies they are interested in quickly and easily?

... keep the recipe simple as possible?

... help the user keep track of time while cooking?

... let the user keep track of their favorite cookie(s)?

... create a list for shopping?

... allow the user to view the nutrition and substitution options?

... showcase cookie reviews from other users?

... let the user share their creation to social media platforms?

... filter out the cookies they want or don't want to see?

... adjust the screen to view in light or dark mode?

Meet the personas & follow their journey

Rone

“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.

Step 1: Open the app

Task list

1. Get his phone from a grandchild.
2. Open the DCC Recipe App.
3. Look at the homepage.

Feeling

😓
Overwhelmed

😐
Anxious

Improvement opportunities

🍪  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.

Step 2: Search for options

Task list

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

Feeling

😓
Overwhelmed

🤤
Hungry

Improvement opportunities

🍪  Make the search bar obvious.
🍪  Clear options/suggestions for things to search.

Step 3: Pick a recipe

Task list

1. Scroll through the options
2. View images
3. Compare ingredients needed and cook times

Feeling

😄
Excited

😬
Apprehensive

Improvement opportunities

🍪  Make it easy to compare/contrast recipes without having to leave the search page.

Step 4: Familiarize with the recipe

Task list

1. Read the selected recipe completely.
2. Prepare kitchen tools.
3. Get ingredients out.

Feeling

😁
Motivated

🤓
Focused

Improvement opportunities

🍪  Option for a recorded voice to read out the recipes per section.
🍪  Clear and simple directions.

Step 5: View substitution options

Task list

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.

Feeling

😟
Worried

😅
Quickly relieved

Improvement opportunities

🍪  See substitutions without having to leave the page.
🍪  Replace the initial ingredient with a substitution on the main recipe page.

Step 6: Cook with the grandkids!

Task list

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.

Feeling

🤓
Focused

🤤
Hungry

Improvement opportunities

🍪  Timer option on the recipe page.

Liz

“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.

Step 1: Open the app

Task list

1. Find her phone.
2. Open the DCC Recipe App.
3. Look at the homepage.

Feeling

😄
Excited

😐
Anxious

Improvement opportunities

🍪  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.

Step 2: Search for options

Task list

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

Feeling

😓
Overwhelmed

🧐
Inspired

Improvement opportunities

🍪  Make the search bar obvious.
🍪  Clear options/suggestions for things to search.

Step 3: Pick a recipe

Task list

1. Scroll through the options
2. View images
3. Compare ingredients needed and cook times

Feeling

😄
Excited

😬
Nervous

Improvement opportunities

🍪  Make it easy to compare/contrast recipes without having to leave the search page.

Step 4: Familiarize with the recipe

Task list

1. Read the selected recipe completely.
2. Prepare kitchen tools.
3. Get ingredients out.

Feeling

😁
Excited

🤓
Focused

Improvement opportunities

🍪  Option for a recorded voice to read out the recipes per section.
🍪  Clear and simple directions.

Step 5: Bake cookies & taste test

Task list

1. Mix ingredients for the selected recipe.
2. Cook
3. Enjoy!
4. Bookmark the recipe.

Feeling

🤩
Inspired

🤤
Hungry

Improvement opportunities

🍪  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.

Step 6: Take the cookies to work

Task list

1. Put cookies in a cute travel container.
2. Take to work.
3. Take a picture to document and post onto a social platform.

Feeling

😎
Productive

🤩
Excited

Improvement opportunities

🍪  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.

Ideation phase:

Develop

In this tab you will find information architecture, wireframes, user testing, affinity maps, themes, design changes, and insights.

Information architecture
Wireframes

Home

1. App title
2. Profile icon
3. Large image or slogan for the app.
4. "Find your cookie" CTA.
5. Large images of cookies to bake.
6. Nav bar for quick access.

Search

1. Search page
2. Search bar, including a filter, Siri, and search button.
3. Cookie category
4. Images of the cookie from that category

List

1. List title
2. Checkbox for list item
3. Information for the list item (name of item, how many, what measurements will be needed.)

Reviews

1. Review title
2. Information on the current average review
3. Back button
4. Add a review button
5. Review from a user (including their username, the rating, and any comments)

Timer

1. Timer title
2. Time currently using/about to use
3. Quick presets
4. Vertical scroll bars to set the time
5. Buttons to start or stop the timer

Favorites

1. Favorites title
2. Image of a cookie that's been added to favorites

Recipe (1 of 2)

1. Large image of the selected recipe's final product.
2. Large title of the cookie's name.
3. Details: Review rating, time to cook, level of difficulty
4. Ingredients and equipment needed.
5. Directions

Recipe (2 of 2)

1. Substitution section
2. Tips section
3. Personalized notes section

User testing

Author

Katherine Jensen, UX designer and researcher at Black Lightning Creative, kj@blklightningcreative.com

Stakeholders

None, this is a passion project.

Project background

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.

Research goals

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.

Research questions

🤔  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?

Key performance indicators (KPI)

⚡️  System Usability Scale (SUS)

Methodology

Unmoderated usability study


The prototype: Low-fidelity version 1
Check out the prototype for yourself!
LoFi V1 Prototype

Or scan the QR code to experience on your phone.
Note: Figma app is not required.

The test overview

Date

🗓  Sessions will take place on September 12 - 16. The participants have five days to turn in the assignment.

Length

⏳ Each session will last 5 to 10 minutes, based on a list of prompts

Location

📍 United States, remote (each participant will complete the study in their own home)

Participants

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.

Script

During the unmoderated usability study, a list of prompts was given via Google Drive.

📝 Prompt 1:

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?

📝 Prompt 2:

Select a cookie and add three items from it to your shopping list.

📝 Prompt 3:

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?

📝 Prompt 4:

From the home page, figure out where you would go to edit your profile.

📝 Prompt 5:

How did you feel about this cookie recipe app overall? What did you like and dislike about it?

System Usability Scale (SUS)

SUS Results

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.

1. I think that I would use this app frequently.
2. I find the app unnecessarily complex.
3. I think the app is easy to use.
4. I need the support of a technical person to be able to use this app.
5. I find the app easy to navigate.
6. There is inconsistency within the app.
7. I imagine that most people would learn to use this app quickly.
8. I feel confident using the app.
9. I need to learn a lot of things before I can start using this app.
10. The main user flow is clear.
Affinity Diagram & Themes

Timer icon

4 out of 5 subjects thought the timer icon did not look like a timer. This means that there could be confusion if the icon is not changed.

🗣 “Maybe a different icon would be better for this page, this makes sense, but looks like safari.”

Heart icon placement

3 out of 5 participants did not like the size of the heart icon per recipe, they thought it was too small. Adjusting the size up could mean happier users.

🗣 “Now, I think I can press this, it’s pretty small though – oh it worked, but I’m surprised.”

Review page buttons

2 out of 5 participants did not like the placement of the buttons on the review page. Adjusting the placement could mean happier users.

🗣 “These buttons are in a weird place on this page, I feel like they should be on the very bottom or something.”

Allergy considerations

1 out of 5 participants showed concern in regards to a severe food allergy and the ability to adjust what is shown in the search menu. The ability for the users to hide something that could kill them was a very important adjustment that is needed.

🗣 “Oh I can’t have this, would I have to see this every time I open the search page? I would get tired of seeing something that would potentially kill me if I ate it.”

Design changes & insights

Timer icon

Originally, the timer icon was  a separate page. After usability study 1, more ideation and evaluation was done, an opportunity to create a timer that’s available for every recipe page. That reduces the amount of clicks and simplifies the bottom navigation bar.

Heart icon

The original heart icon was an initial assumption of mine that I thought would be cute to add into the app. However, the details and size (or really lack of size) contributed to some mild confusion and also difficulty in pressing because it was too small. After going back to the drawing board, I decided to utilize the bookmark, an almost universal sign for saving something.

Review page buttons

In the first low fidelity prototype, the buttons were too big and disliked. Upon further ideation, a better solution was designed, allowing for more space to be utilized for the actual reviews.

Search filter

The search filter, something that I realized was important to add into the app. The lack of was first pointed out due to a severe allergy by a user. As you can see in the first low fidelity prototype it was nonexistent. The ability to personalize the search page to the user is a great feature. I still think there is room to grow with this feature.

Usability test 2:
Check out the prototype for yourself!
LoFi v2 Prototype

Or scan the QR code to experience on your phone.
Note: Figma app is not required.

The test overview

Date

🗓  Sessions will take place on November 1-5. The participants have five days to turn in the assignment.

Length

⏳ Each session will last 5 to 10 minutes, based on a list of prompts

Location

📍 United States, remote (each participant will complete the study in their own home)

Participants

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.

Script

During the unmoderated usability study, a list of prompts was given via Google Drive.

📝 Prompt 1:

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?

📝 Prompt 2:

Select a cookie and add three items from it to your shopping list.

📝 Prompt 3:

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?

📝 Prompt 4:

From the home page, figure out where you would go to edit your profile.

📝 Prompt 5:

How did you feel about this cookie recipe app overall? What did you like and dislike about it?

System Usability Scale (SUS)

SUS Results

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.

1. I think that I would use this app frequently.
2. I find the app unnecessarily complex.
3. I think the app is easy to use.
4. I need the support of a technical person to be able to use this app.
5. I find the app easy to navigate.
6. There is inconsistency within the app.
7. I imagine that most people would learn to use this app quickly.
8. I feel confident using the app.
9. I need to learn a lot of things before I can start using this app.
10. The main user flow is clear.
Affinity diagram & themes

Timer icon

4 out of 5 subjects thought the timer icon looked like a timer, and that the new location in the recipe was better.

🗣 “The availability of the timer on the recipe page is nice. I like that it stays in a certain spot and I can hide it if needed. I do wish there was a way to know my timer is being used when I’m outside of the recipe page and searching for other recipes.”

Bookmarks

4 out of 5 participants enjoyed the bookmark update instead of the small cookie hearts. Creating a straightforward feature that is simple yet almost universal decreases the learning curve.

🗣 “I like the switch to the bookmarks, it’s very straightforward.”

Review page buttons

3 out of 5 participants liked the change to smaller buttons on the review page.

🗣 “These buttons are in a less annoying spot, this entire page looks better to me personally.”

Search filter

3 out of 5 participants showed interest in the fact that they could use the filter to adjust the search page based on their allergies or preferences.

🗣 “The fact that I am able to tailor the search page to my allergies is amazing!”

Insights & design changes

Search filter

The search filter was improved by allowing the user an opportunity to filter and adjust the homepage on a larger scale and in one location.

Bookmarks

Not a ton of change here, very minor changes, more with interactions. The bookmark icon was made slightly larger and slightly farther away from the edge of the screen. The stroke outlines of the icon were also increased by a little.

Timer

No major changes, more so on the interface and interactions with the timer.

Review buttons

In the low fidelity version number two, these buttons were left behind considering the rest of that prototype. A slight oversight. The new buttons are significantly smaller, however it fits in with the rest of the design changes a lot better.

Areas to expand

🔍 Navigation bar icons

Are they the best they can possibly be?
Can they be better?

🔍 Shopping list usability

Does the list make it easier to shop or an added step?

🔍 Timer usability

Do notifications work regardless of the page the user is on?

🔍 Search filter

Are the settings simple enough, but enough for the users?

🔍 Recipe page

Are the directions set up well and easy to follow?
Are the personalized notes easy to access?

Usability test 3:
Check out the prototype for yourself!
HiFi v1 Prototype

Or scan the QR code to experience on your phone.
Note: Figma app is not required.

The test overview

Date

🗓  Sessions will take place on December 15-20. The participants have five days to turn in the assignment.

Length

⏳  Each session will last 5 to 10 minutes, based on a list of prompts

Location

📍 United States, remote (each participant will complete the study in their own home)

Participants

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.

Script

During the unmoderated usability study, a list of prompts was given via Google Drive.

📝 Prompt 1:

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?

📝 Prompt 2:

Select a cookie and add three items from it to your shopping list.

📝 Prompt 3:

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?

📝 Prompt 4:

Edit the item in your list from one to two eggs.

📝 Prompt 5:

How did you feel about this cookie recipe app overall? What did you like and dislike about it?

System Usability Scale (SUS)

SUS Results

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.

1. I think that I would use this app frequently.
2. I find the app unnecessarily complex.
3. I think the app is easy to use.
4. I need the support of a technical person to be able to use this app.
5. I find the app easy to navigate.
6. There is inconsistency within the app.
7. I imagine that most people would learn to use this app quickly.
8. I feel confident using the app.
9. I need to learn a lot of things before I can start using this app.
10. The main user flow is clear.
Affinity diagram & themes

Review page buttons

3 out of 5 participants thought the change to the review button size was too small.

🗣 “These buttons are cute, but they are a little small and kind of hard to hit.”

Timer icon

4 out of 5 subjects thought the timer notification in the recipe was much better.

🗣 “The notification that appears once the timer is done is nice.

List adjustments

3 out of 5 participants thought adjusting the item number in the list was easy.

🗣 “Adjusting the amount of an item was decently easy, I think it could be a little better, but I don’t know how.”

Search page filter

3 out of 5 participants showed interest in the fact that they could use the filter to adjust the search page based on their allergies or preferences.

🗣 “I like that you can change the search page to even more things than before.”

Recipe page length

3 out of 5 participants thought the recipe page was too long, even with the quick scroll links.

🗣 “I don’t have time to scroll forever, and the scroll down feature isn’t fast enough for me.”

Design changes & insights

Timer icon

The timer icon has greatly improved, however, there needs to be a way to remind users they have a timer going no matter where they are in the app.

Recipe page length

The recipe page was way too long and was a pain point for the users. Now, tabs inside the recipe page have been created so the user is now able to pan back and forth a lot quicker and much less scrolling.

Review page buttons

The review buttons needed more review, the size changed a little, but not by much.

Search filter

Good improvements with the search filter. More options were added to really create a concise page for the user depending on what they are looking for or needing to find.

Areas to expand

🔍 Recipe page

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?

🔍 Shopping list usability

Does the list make it easier to shop or an added step?
Can the quantity for the list adjustment be simplified?

🔍 Timer usability

Do notifications work regardless of the page the user is on?

🔍 Search filter

Are the settings simple enough, but enough for the users?
Are there better ways to adjust the filter?

Implementation Phase:

Deliver

In this tab you will find my final high fidelity design and information on handoff.

Final high fidelity design
Check out the prototype for yourself!
HiFi v1 Prototype

Or scan the QR code to experience on your phone.
Note: Figma app is not required.

Handoff

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.