Role

Product Designer

Timeline

Jul - Aug 2022 (8 weeks)

CASE STUDY

CASE STUDY

CASE STUDY

Spudnuts Donut Mobile App

A mobile ordering app with loyalty rewards, enabling faster ordering and improved customer satisfaction.

A mobile ordering app with loyalty rewards, enabling faster ordering and improved customer satisfaction.

A mobile ordering app with loyalty rewards, enabling faster ordering and improved customer satisfaction.

Spudnuts Donut is a beloved family-owned shop in Santa Barbara County, part of a long tradition of Cambodian refugee families who now own nearly 80% of Southern California’s independent donut shops.

Problem

Spudnuts Donut has a strong community presence but lacks the scalability and modern technology. The challenge was to improve the customer experience with a faster, more efficient ordering solution to compete with larger franchises.

Outcome

I designed a complete mobile ordering app with an integrated rewards system to streamline the ordering process and incentivize customer loyalty. This solution helps Spudnuts Donut boost efficiency, increase sales, and strengthen retention.

Solution - 1 of 8

Create Account

A progress bar guides users through each step, paired with clear titles, short descriptions, and a recurring donut mascot. The mascot reinforces a friendly brand identity and adds an emotional connection throughout the app.

A progress bar guides users through each step, paired with clear titles, short descriptions, and a recurring donut mascot. The mascot reinforces a friendly brand identity and adds an emotional connection throughout the app.

Solution - 2 of 8

Homepage

The home page defaults to the in-store pickup screen, with a carousel highlighting current promotions. A fixed pink CTA button anchors the page, guiding users to start an order.

The home page defaults to the in-store pickup screen, with a carousel highlighting current promotions. A fixed pink CTA button anchors the page, guiding users to start an order.

Solution - 3 of 8

Spudnuts Rewards System

Based on user research, I designed a rewards flow to incentivize regular customers. A vibrant splash screen explains free benefits, while the donut mascot changes emotions as points are earned, reinforcing Spudnuts’ friendly brand identity.

Solution - 4 of 8

Store Locations

The Store Locations screen consolidates all four shops with addresses, distance, and hours for quick reference. An interactive map displays nearby pins, making it easy for users to find and navigate to the closest Spudnuts Donut location.

Solution - 5 of 8

Donut Order

To mirror the in-store experience, all donut options are displayed on a single screen with pricing and CTA buttons. This eliminates extra navigation and makes ordering faster and more intuitive.

Solution - 6 of 8

Sandwich Order

According to usability testing, users found the long list of options to be confusing. To address this issue, I devised a step-by-step ordering procedure complete with a progress bar. Rather than a long list of options, I made the ordering experience more responsive with the progress bar, which alleviates user doubt.‍

Solution - 7 of 8

Checkout

The checkout flow provides an estimated pickup time and supports Apple Pay and Google Pay for seamless payments. Guests can continue without an account but are later prompted to sign up for a more personalized experience.

Solution - 8 of 8

Order Progress

The Order Progress screen tracks current and past orders, showing live status updates from preparation to pickup. This feature improves transparency and helps users plan ahead with confidence.

User Research

Findings & Insights

To understand customer pain points, I analyzed 40+ surveys across Spudnuts Donut locations, combining quantitative and qualitative data. The results revealed three clear opportunities.

92%

92%

92%

prefer mobile ordering for in-store pickup.

Long wait times during peak hours make speed a priority.

74%

74%

74%

want a reward system with free items.

Frequent customers value incentives that encourage loyalty.

56%

56%

56%

prefer not to use email to create an account.

Many favor phone-number-based ordering for simplicity and speed.

Low-Fidelity Wireframes

After identifying user groups, needs, and motivations, I created low-fidelity wireframes to map interactions and test core flows with users. These wireframes served as the foundation for iteration and guided the transition into high-fidelity designs.

Final Designs and Solutions

Over two months, I created a mobile ordering app that streamlines ordering and creates a more engaging, rewarding customer experience.

Usability Testing

Findings and iterations

After building the high-fidelity prototype, I ran a usability test with 6 participants to evaluate clarity, comprehension, and task completion. Based on their feedback, I made three key changes to improve the user flow and overall design.

Test 1

Before

The caret button was unclear. 3 out of 6 testers found it confusing, mistaking it for either a dropdown or a continue button.

Test 1

After

I redesigned the caret to face downward on the store locations screen. 5 out of 6 testers reported that this change improved clarity.

Test 2

Before

5 of 6 testers struggled to complete sandwich orders, finding the process confusing and lengthy.

Test 2

After

Added a step-by-step flow with a progress bar and CTA. 6 of 6 testers said it improved their experience.

Test 3

Before

4 of 6 testers thought the store locator felt static and unhelpful, preferring location context over phone numbers.

Test 3

After

Replaced with a full-screen Apple Map showing live locations and distances. 6 of 6 testers found it a significant improvement.

Brand Guideline & Design System

Brand Guideline &
Design System

I developed a modern brand identity and a comprehensive design system to ensure consistency across the app. The guidelines streamlined screen design, improved efficiency, and provided scalable patterns for future growth.

Key Takeaways

What I Would Do Differently

This project strengthened my skills in visual design, interaction design, and prototyping while helping my family’s business. Although there were no formal metrics, the experience gave me valuable lessons in how to approach future projects with more clarity and efficiency.

Lesson 1

Constantly Iterate

Iteration leads to better solutions.

User feedback was critical in refining designs. I would continue conducting multiple rounds of usability testing to validate decisions and ensure every element has purpose.

Lesson 2

Insight-Driven

Focus on value, not volume.

My early drafts were too process-heavy. By cutting unnecessary detail and highlighting insights and design decisions, I created a clearer and more impactful case study.

Lesson 3

Design Systems

Structure improves efficiency.

I learned how to organize and scale a design system by using reusable components. With mentorship and practice, I became more efficient at managing system properties.

Lesson 4

One Problem at a Time

Prioritize focus.

Initially, I tried solving too many problems at once. I learned the importance of prioritizing the main user issue instead of spreading effort across both major and minor concerns.

© 2025 Brian Lao. All Rights Reserved.

Made with lots of cold brew oolong tea.

Email

Resume

LinkedIn

© 2025 Brian Lao.

Made with lots of oolong tea.

Email

Resume

LinkedIn

© 2025 Brian Lao. All Rights Reserved.

Made with lots of cold brew oolong tea.

Email

Resume

LinkedIn