Shelby's App Redesign: Reducing Friction in Mobile Ordering

Rather than treating this as a one-off frustration, this exploration looks at how small UX decisions compound over time, and how restructuring hierarchy, sequencing, and context can meaningfully improve decision making without a full redesign.

This case study documents that exploration and the design decisions that followed.

Ordering Experience and Flow Analysis

Home screen. First point of contact

Starting with the first screen, the primary intention of the product is immediately clear. The app wants the user to place an order. While this clarity is positive, the way the intention is communicated creates friction.

The bottom navigation includes a strong call to action to start an order. At the same time, the main content of the screen also encourages the user to order. Both elements carry the same intention and similar visual weight, which results in duplication rather than guidance. Instead of reinforcing the action, this weakens the visual hierarchy and creates unnecessary noise.

This lack of prioritization makes it harder for the user to instinctively understand where to begin. A single, clearly dominant entry point would feel more confident and easier to follow.

Current experience

Overweight bottom navigationThe bottom bar draws too much attention and adds visual noise to the screen.

Passive content over utilityThe video communicates brand but does not support task completion.

Duplicated call to actionTwo order CTAs with the same intent weaken guidance instead of reinforcing it.

No decision support contentThe home screen does not help users decide what to order or explore options.

Opportunity to rethink the home screen content

Rather than showing a video on the first screen, this space could be used much more effectively to support quick decision making. The home screen has the potential to function as a launchpad, not just a branding surface.

Surfacing menu options early would allow users to move faster into the ordering mindset. Highlighting promotions, special events, seasonal items, or featured products would give immediate context and direction. This reduces one full step in the flow and increases the likelihood of interaction.

A call to action to order can still exist in the main content area, but the bottom navigation CTA should be visually quieter. Reducing its prominence would help avoid competition between elements and improve overall balance.

Reduces early frictionThe home screen focuses on inspiration first, deferring pickup or delivery decisions to the right moment.

Accelerates decision makingBy showing variety and promotions upfront, users decide what to order faster before entering the flow.

Creates multiple entry pointsCategories, new offers, and featured items support different user intents without forcing a single path.

Supports conversion without pressureThe home screen focuses on inspiration first, deferring pickup or delivery decisions to the right moment.

Bottom navigation and visual weight

The bottom navigation contributes significantly to the perception that the screen feels heavy. There is limited visual harmony between the navigation and the main content, which results in a dense and somewhat uninviting interface.

Current experience

When a screen feels overloaded, users tend to hesitate rather than explore. Simplifying the bottom navigation or reducing its visual dominance would allow the content to breathe and create a more inviting first impression.

A call to action to order can still exist in the main content area, but the bottom navigation CTA should be visually quieter. Reducing its prominence would help avoid competition between elements and improve overall balance.

Proposed experience

Shifted navigation to a supportive roleRepositioned the bottom navigation as a secondary guide rather than the main driver of action.

Reduced visual dominance of the primary CTALowered the visual weight of the "Start Order" action to restore hierarchy and allow content to lead exploration.

Simplified bottom navigation structureStreamlined navigation elements to reduce noise and improve visual harmony with the main content.

Loyalty as a revenue driver, not a feature

In the Canadian market, brands like Tim Hortons, McDonald's, and Starbucks consistently rank at the top in wallet share and transaction volume. This is not only the result of brand recognition, but of deeply integrated loyalty ecosystems that influence repeat behavior.

Their apps are not just ordering tools. They function as habit-forming products where rewards, points, and promotions are continuously visible and easy to understand. The result is higher visit frequency and stronger user retention.

How users behave in loyalty-driven ecosystems

Users visiting these brands rarely start with a neutral decision. They often open the app with specific questions in mind:

• How close am I to my next reward?
• How many points do I have?
• Is there a promotion today?
• Can I redeem something now?

Why this needs to be visible on the Home Screen

If users open the app with these questions in mind, hiding reward progress behind a secondary tab creates friction. The system already knows what the user is looking for, but the interface delays access to that information.

By surfacing points, progress to the next reward, and available incentives directly on the home screen, the app aligns with real user behavior. This reduces effort, reinforces motivation, and increases the likelihood of repeat orders without interrupting the primary flow.

Showing reward progress early turns loyalty from a passive feature into an active driver of return visits and conversion.

Proposed experience

Progress made visible at a glanceUsers can immediately see their current points and how close they are to the next reward.

Encourages repeat behavior, not pressureThe section motivates return visits and additional orders without interrupting or blocking the ordering experience.

Goal framed as attainable"Highlighting "X points away" reduces perceived effort and increases motivation to complete the goal.

Clear value reinforcementThe next reward is explicitly stated, making the benefit concrete and desirable.

Start order. Address input and location selection

Current experience

Lacks spatial contextThe experience does not help users understand how close they are to a Shelby's location.

No sense of direction or pathUnlike map-based or game-like experiences, users cannot see where they are in relation to stores.

The current flow starts with an address input screen shown immediately after tapping “Start order.” The experience relies on text input and a dropdown list to determine nearby locations.

Using the user's current location helps reduce typing and works well as an accelerator. Distances are also shown, which supports basic decision making.

However, the experience is entirely list-based. There is no spatial or visual context to help users understand where they are in relation to nearby Shelby's locations, making the process more abstract and cognitively demanding.

Identified friction

List-based selection feels abstractAddresses and distances require mental effort instead of visual recognition.

Distance is numeric, not visualKm values alone do not communicate proximity intuitively.

Start order. Address input and location selection

Ordering starts from the Home screen

Reduced cognitive loadUsers make one decision at a time instead of choosing product, location, and delivery method all at once.

Decision split at the right momentPickup or delivery is introduced after intent is established, not before. Users already want the food.

Clear time expectationsEstimated prep and delivery times set expectations early and reduce uncertainty.

Instead of sending users directly to an address input screen, the flow now begins from the Home experience. Users first engage with products and promotions, building intent naturally.

A lightweight modal allows users to choose between pickup or delivery, including clear time estimates. This introduces logistics step by step, at the right moment.

Map-based location selection

Spatial awareness is restoredPin markers show where stores are relative to the user's current location.

Proximity is understood visually, not numericallyDistance becomes intuitive through map positioning instead of km comparison.

Closest location is visually highlightedUsers immediately recognize the best option without reading a long list.

The list-only location screen is replaced with a map view showing nearby Shelby's locations using pin markers.

Each location includes distance, city, open or closed status, and a small visual reference.

The closest location is visually highlighted, helping users recognize the best option instantly.

Why this flow works better

By preserving useful elements from the original experience, such as distance visibility and location detection, while adding spatial context and better sequencing, the flow becomes easier to understand and faster to complete.

Users no longer need to compare addresses mentally. They can see where they are, what is closest, and what is available, reducing cognitive load and increasing confidence. The result is a smoother, more intuitive ordering experience that supports quicker decisions and higher completion rates.

Order screen. Improving menu structure and decision flow

Before. Current experience

Screen feels visually denseProduct customization options, imagery, and actions are tightly grouped, making the experience feel heavy and harder to scan.

Primary action lacks breathing roomThe "Add to cart" CTA is visually compressed by surrounding elements, reducing confidence at a critical decision moment.

Bottom navigation competes with the taskThe persistent "Start Order" button remains visible even when the user is already deep in the ordering flow, increasing distraction.

The current product detail screen presents too much information at once. Customization options are tightly grouped, required and optional selections are not clearly separated, and the primary action is visually compressed. This makes the moment of commitment feel heavy and uncertain.

Menu content is pushed down by non-essential informationStore imagery and branding occupy prime space, reducing visibility of actual menu items and slowing decision making.

Visual hierarchy is unclearMenu items, navigation, and actions carry similar visual weight, making it hard for users to quickly understand what to focus on.

When browsing the menu, a large portion of the screen is occupied by store information and branding. All menu items carry similar visual weight, with no prioritization based on popularity or recommendations. As a result, users must scan and evaluate everything manually.

Category behavior is inconsistent, breaking the user's mental model and making navigation feel unpredictable.

After. Proposed experience

Menu items are immediately visibleThe menu now leads the screen, allowing users to scan food options without scrolling past secondary content.

Visual hierarchy guides decision makingFood imagery, pricing, and item names are clearly structured, reducing cognitive load.

Category navigation feels controlled and predictableHorizontal categories provide context and let users switch sections without losing their place.

Primary action is contextual and clearThe "Review order" CTA reflects the user's current state and reinforces progress instead of restarting the flow.

The redesigned product screen reduces visual density and introduces clear hierarchy. Required choices are easy to identify, optional add-ons are grouped separately, and spacing improves readability. The primary action stands out, giving users confidence before adding an item to the cart.

Customization feels controlled, not overwhelmingThe layout supports clarity and trust, making the ordering experience smoother and faster.

Clear separation between required and optional choicesMandatory selections are clearly labeled, reducing uncertainty and preventing errors.

Reduced cognitive load during customizationUsers can focus on one decision at a time instead of processing everything at once.

Primary action is visually isolatedThe "Add to cart" button stands out, reinforcing confidence at the moment of commitment.

The impact of better decision flows

This redesigned flow shifts the ordering experience from a reactive interface to a decision-support system. Instead of forcing users to interpret information, compare options, and correct mistakes, the flow guides them through clear, sequential choices.

By introducing progressive steps, spatial context, and better visual hierarchy, users can understand their options faster and with less effort. Decisions feel informed rather than rushed, which increases confidence at every stage of the journey.

As a result, users move through the experience with fewer interruptions, fewer errors, and greater intent. This not only improves usability, but also supports higher completion rates and stronger conversion, turning the ordering flow into a smoother and more reliable path to purchase.