How might I improve Insomnia Cookies’
current app features to offer a more seamless
experience for all users?
...so users can soley focus on their late-night cravings?
Project:
Insomnia Cookies Mobile App Redesign
My Roles:
User Research, UI·UX Design, Prototyping
Duration:
December 2023 - February 2024
Team:
Self-Directed
Project Overview
Insomnia Cookies is a renowned bakery specializing in late-night delivery
of freshly baked treats. Offering a unique dessert experience beyond
conventional hours, Insomnia Cookies certainly fulfills a niche in the market.
However, despite such specialty, they are criticized for their current app design
for its poor user experience and design flaws to the point that it impacts the
overall business revenue. This case study aims to improve the Insomnia Cookies
mobile app by identifying current UI issues, redesigning the interface by adding
more functionality based on user feedback and market research.
Problem Areas
  • Poor navigation structure and user flow
    • Unclear interface leads to confusion and frustration, resulting in high rates
    of cart abandonment
  • Lacking uniformity in design language
    • Using too many colors and different direction styles result in losing emphasis
    on what users really should be focusing on
AS-IS Experience Map
This journey map brings attention to persistent problems related to user flow
and unclear design language in their experience from onboarding to check-out.
Users are not clearly guided therefore are constantly confused and
frustrated.
AS-IS App Structure
Competitor Analaysis
Now that I better understand user’s struggles in using Insomnia Cookies’ mobile app, to learn a little bit more about the market, I observed and analyzed several competitors and noted some of the features their mobile apps were offering their users. In particular, I studied Crumbl and Panera Bread, two successful brands in the bakery market.
Competitor 1 : Crumbl
Crumbl’s mobile app offered a purpose-oriented user flow. They did not have any unnecessary touch points other than the order button and icons in the navigation bar at the bottom of the pages. Yet their UI design was cohesive and enjoyable: having one distinctive color effectively reflecting their brand identity and using fun, customized icons.
Competitor 2 : Panera Bread
Panera Bread’s mobile app also presented a distinct color scheme, which unified the entire interface. Despite the extensive and varied menu options, the uniformity and simplicity of card usage ensured that users did not feel overwhelmed.
Solution
#1. User Flow Restructure
My solution was to create a seamless user flow that users can concentrate solely on what to order, not how to order. As a result, I built a clear hierarchy system that is more guiding and purpose-driven at each phase of the process.
Solution
#2. Consistent Design Language
My biggest focus was to unify the entire interface by using fewer colors and smarter contrast. Proper use of colors in icons, fonts, and buttons not only helped the user flow to be more coherent, but also made the app more visually appealing. Most importantly, this solution helps gather user’s attention to the images of cookies, which means users can now focus solely on what to order, not how to order.
High-Fidelity Wireframe
Usability Testing & Solution
I conducted usability testing with potential users to gather various insights about whether my solutions meet user’s requirements and expectations. Both existing and new users were satisfied with the new user flow and the interface design. However, one of the users, who often orders cookies from Crumbl, gave an important feedback that made me focus on improving.
Challenge
“Overall interface got much cleaner and definitely looks like an updated version from the previous, but I personally think icon design could be more customized to make the app more enjoyable and special.”
- Ryan Bae, age 27, existing user of Insomnia Cookies
SOLUTION
To make user’s experience more entertaining, icons are redesigned to have more characteristics that represent the brand. For example, cart icon is updated to be a cookie jar instead of a typical box icon.
Prototype
Takeaways
How can I effectively balance the emphasis
on usability, preserve the integrity of a brand
identity, and ensure that the user experience
remains enjoyable simultaneously?