App Redesign

Transforming User Experience Through Iterative Design & Testing.

(Team)
Compare the market
(Year)
2023
(Role)
UI/UX Design

Project overview

Transforming a struggling mobile app during COVID-19 - A STAR case study showing how user-centered design methodology solved critical usability failures, rebalanced feature hierarchy, and drove significant business growth through systematic research and iterative testing.

โœจ Design Impact Highlights

  • Significant increase in sales & reward redemptions
  • Reduced customer service calls through improved usability
  • Successfully balanced product comparison with rewards features
  • Delivered both light & dark mode experiences</aside>

โ€

๐ŸŽฏ The Design Challenge

Context & Problem Space

In 2021, during the COVID-19 pandemic, the mobile app faced critical challenges:

  • Active usage declined as cinema and restaurant visits dropped
  • Feature imbalance between product comparison and rewards
  • Usability issues accumulated over years without resolution
  • Mental model mismatch - users couldn't find discount features

Mission Statement

Make the app more balanced between sales and rewards, while fixing critical usability problems customers faced when using discounts.

Business Goals Alignment

  • ๐Ÿ“ˆ Increase monthly active users
  • ๐Ÿ’ฐ Boost product sales through the app
  • ๐Ÿ“Š Grow revenue share from mobile
  • ๐Ÿ“ฒ Improve app store downloads
  • ๐Ÿ“ž Reduce customer service enquiries

โ€

๐Ÿ” Research & Discovery

1. Existing UX Research Review

<aside>๐Ÿ”ฌ

Key Finding: Very few customers realized the golden button in the top right was how to generate discount codes - a critical discovery failure in the UI.

</aside>

Collaborated with dedicated UX research team to:

  • Review years of accumulated insights
  • Identify known usability problems
  • Understand user mental models
  • Map pain points in discount claiming journeys

2. Usage Metrics Analysis

Time PeriodKey InsightsDesign ImplicationsPre-COVIDHigh reward generation, balanced usageUnderstand baseline behavior patternsPost-COVIDDramatic drop in cinema/restaurant featuresNeed to rebalance feature prominence

3. App Store Reviews Analysis

Methodology:

  • Exported 1 year of review data using data.ai
  • Applied Excel logic functions for categorization
  • Filtered irrelevant reviews
  • Identified top complaint categories

โ€

Top User Complaints:

  1. Can't find discount codes
  2. Confusing navigation
  3. Features hidden or unclear
  4. Too many steps to complete tasks

4. Remote Stakeholder Workshop

Workshop Structure (2 days, ~15 stakeholders):

Day 1: Problem Discovery
โ”œโ”€โ”€ Affinity Mapping
โ”œโ”€โ”€ Pain Point Clustering
โ””โ”€โ”€ Impact vs Effort Matrix

Day 2: Solution Prioritization
โ”œโ”€โ”€ Feature Prioritization
โ”œโ”€โ”€ Success Metrics Definition
โ””โ”€โ”€ Release Phasing

Outcome: Agreed to focus on 3 problems with biggest impact on sales performance and customer satisfaction

๐Ÿ—บ๏ธ Information Architecture Redesign

App Flow Mapping

Created comprehensive flow diagram to understand:

  • How functions interconnected
  • User journey paths
  • Feature dependencies
  • Navigation bottlenecks

IA Strategy

Remove

  • Redundant features
  • Unused sections
  • Confusing pathways

Reorganize

  • Group related features
  • Logical navigation hierarchy
  • Intuitive categorization

Refine

  • Simplify existing flows
  • Reduce steps to completion
  • Clear labeling

โ€

โ€

Design Philosophy

"Only change what was necessary to achieve business goals" - Respecting the company's risk-averse culture while driving meaningful improvements

๐Ÿ’ก Design Solutions

Solution 1: Homepage Shortcuts Revolution

<aside>๐Ÿš€

Challenge: Users couldn't quickly access rewards and discount codes

Hypothesis: More shortcuts = faster access

Testing Result: UNEXPECTED - Users hit the first button that somewhat resembled their goal

Final Solution: One clear shortcut per reward type

  • Reduced cognitive load
  • Faster decision making
  • Higher success rates</aside>

Solution 2: Reward Discovery Enhancement

Design Changes:

  • Prominent reward buttons on relevant screens
  • Visual hierarchy improvements
  • Clear CTAs replacing ambiguous golden button
  • Progressive disclosure for complex features

Solution 3: Navigation Simplification

Before: 5+ taps to generate discount code

After: 2 taps maximum from any screen

Implementation:

  • Sticky "2 for 1 code" button on movie screens
  • Contextual shortcuts based on user location in app
  • Simplified information display (only showing available days)

๐Ÿงช Design Process & Testing

Iterative Design Approach

๐Ÿ”„ Design โ†’ Prototype โ†’ Test โ†’ Learn โ†’ Iterate

Advanced Prototyping

Tool: Axure RP

Fidelity: Near-production behavior

Why High Fidelity?

  • Realistic user behavior in tests
  • Accurate gesture interactions
  • True-to-life navigation flows
  • Minimal imagination required from testers

โ€

User Testing Methodology

RoundFocusKey FindingsDesign ChangesRound 1Navigation & IAUsers lost in deep hierarchiesFlattened navigation structureRound 2Shortcut effectivenessToo many options cause paralysisReduced to single shortcutsRound 3Final validationSignificant improvement in task completionMinor copy adjustments

Testing Tool: UserZoom for unmoderated remote testing

Sample Size: 8-12 users per round

Success Metrics: Task completion rate, time to complete, error rate

๐ŸŽจ Visual Design Evolution

Phase 1: Initial Redesign

Focused on:

  • Information architecture
  • Feature placement
  • User flow optimization
  • Functional improvements

โ€

Phase 2: Brand Guidelines Update

<aside>๐ŸŽจ

Plot Twist: "Those were not the final designs after all!"

New brand guidelines arrived mid-project, requiring complete visual reskin while maintaining all UX improvements.

</aside>

App Reskin Implementation

Design System Components:

  • Complete Figma component library
  • Light & dark mode support
  • Consistent design tokens
  • Accessibility-first approach

Visual Improvements:

๐ŸŒž Light Mode
โ”œโ”€โ”€ High contrast ratios
โ”œโ”€โ”€ Clear visual hierarchy
โ”œโ”€โ”€ Accessible color palette
โ””โ”€โ”€ Reduced eye strain

๐ŸŒ™ Dark Mode
โ”œโ”€โ”€ OLED optimization
โ”œโ”€โ”€ Reduced blue light
โ”œโ”€โ”€ Maintained readability
โ””โ”€โ”€ Consistent experience

Continuous Optimization

Each area re-evaluated during reskin:

  • Further simplification opportunities
  • Visual hierarchy refinements
  • Micro-interaction additions
  • Performance optimizations

๐Ÿ“Š Design Impact & Results

Quantitative Improvements

๐Ÿ“ˆ User Engagement

  • Significant increase in sales via app
  • Higher reward redemption rates
  • Improved monthly active users
  • Better app store ratings

๐ŸŽฏ Usability Metrics

  • Reduced customer service calls
  • Faster task completion times
  • Lower error rates
  • Higher feature discovery

Qualitative Improvements

โœจ User Confidence: Clear pathways reduced hesitation

โœจ Feature Discovery: Previously hidden features now accessible

โœจ Mental Model Alignment: Design matched user expectations

โœจ Brand Perception: Modern, helpful, user-friendly

๐Ÿš€ Key Design Decisions

1. One Button Philosophy

Learning: More options โ‰  Better UX

Application: Single, clear CTAs per reward type

Result: Reduced decision fatigue, increased conversions

2. Contextual Assistance

Learning: Users need help where they are, not in help sections

Application: Sticky contextual buttons on relevant screens

Result: Dramatic reduction in support queries

3. Progressive Disclosure

Learning: Show only what's needed when it's needed

Application: Simplified initial views with expandable details

Result: Cleaner interface, less overwhelming

4. Platform Flexibility

Learning: Business needs change, design must adapt

Application: Modular IA supporting feature addition/removal

Result: Seamlessly added Caffรจ Nero rewards later

๐Ÿ’ญ Design Learnings & Insights

<aside>๐Ÿง 

Major Takeaways

1. Test Assumptions Early

The "more shortcuts = better" hypothesis failed in testing. Real user behavior often surprises.

2. Iterative Design Works

Three rounds of testing caught issues that would have been expensive post-launch.

3. Balance Risk & Innovation

Working within risk-averse culture still allowed meaningful improvements.

4. Design Systems Save Time

Figma component library made rebrand manageable despite tight timelines.

5. Data + Intuition

Combining analytics with user research provided complete picture.

</aside>

๐Ÿ› ๏ธ Tools & Methodologies

Research Tools

  • Google Analytics: Usage metrics analysis
  • **data.ai:** App store reviews export
  • Excel: Review categorization & analysis
  • Miro: Remote workshop facilitation

Design Tools

  • Figma: UI design & component library
  • Axure RP: High-fidelity prototyping
  • UserZoom: Unmoderated user testing
  • Principle: Micro-interactions

Methodologies Applied

  • Design Thinking: Empathize โ†’ Define โ†’ Ideate โ†’ Prototype โ†’ Test
  • Atomic Design: Component-based system
  • Jobs-to-be-Done: Understanding user goals
  • Lean UX: Rapid iteration cycles

๐ŸŽฏ Success Metrics Achieved

๐Ÿ“Š BUSINESS METRICS
โ”œโ”€โ”€ โœ… Increased sales through app
โ”œโ”€โ”€ โœ… Higher app revenue share
โ”œโ”€โ”€ โœ… More monthly active users
โ”œโ”€โ”€ โœ… Improved app store downloads
โ””โ”€โ”€ โœ… Reduced customer service calls

๐Ÿ˜Š USER SATISFACTION
โ”œโ”€โ”€ โœ… Easier reward discovery
โ”œโ”€โ”€ โœ… Faster task completion
โ”œโ”€โ”€ โœ… Clearer navigation
โ”œโ”€โ”€ โœ… Better feature balance
โ””โ”€โ”€ โœ… Reduced frustration

๐Ÿ”ฎ Future Considerations

Scalability

  • Modular IA supports future feature additions
  • Design system enables consistent updates
  • Component library facilitates rapid iteration

Emerging Patterns

  • Voice UI integration potential
  • Personalization opportunities
  • AI-driven recommendations
  • Gesture-based navigation

๐Ÿ’ก Conclusion

This redesign demonstrates how iterative, user-centered design can transform a struggling app into a successful digital product. By combining thorough research, careful testing, and thoughtful implementation, we achieved significant improvements in both business metrics and user satisfaction.

The project's success came from:

  • Understanding users through multiple research methods
  • Testing assumptions before implementation
  • Iterating based on feedback rather than opinions
  • Balancing business needs with user experience
  • Adapting to change when brand guidelines updated

<aside>๐Ÿ†

Final Thought

Great UX design isn't about adding more features or buttons - it's about understanding what users truly need and delivering it in the simplest, most intuitive way possible. Sometimes, less really is more.

</aside>

This case study showcases the power of iterative design and user testing in creating successful digital products, even within constraints of risk-averse environments and changing requirements.

โ€