MOBILE UI & EXPERIMENTAL DESIGN

Crafting app-first experiences with systematic design

Cashrewards

Figma

6 - 9 months

Data analysis, experimentation, app design, UI design

Summary

In FY24, CRW’s app-first strategy led to a revamp of key shopping experiences—enhancing usability through a new design system, continuous experimentation and industry-standard mobile patterns.

Primary goals

Increase engagement and stickiness with the app (MIUs)
Increase shop conversions
Support personalisation
Improve the user experience which was measured by SUPR-Q (Standardised User Experience Percentile Rank Questionnaire)

Jump to:

Merchant Page

For You experience

Refining and problem framing years of customer research and analytics

As part of discovery, I analysed knowns and unknowns in the app shopping journey—drawing from past research and an app strategy I proposed when I joined the squad.

[JA] App User Interviews Analysis - Executive summary (1).jpg

Above: Executive summary of a qualitative app study I lead to validate internal assumptions and hypotheses about the app.

App - Competitor analysis - July 2022.pptx.png

The problem – what was wrong with the app?

The app is a vital part of the Cashrewards journey but was heavily underinvested and behind.

As a result, Cashrewards members struggle to see the app's unique value as it mirrors the web experience. The app overall lacked mobile-first design principles, such as clear visual hierarchy and optimised text for quick visual scanning, and mobile optimised interactions.

Additionally, the app suffers from outdated branding and a lack of personalisation ultimately, leading to a less engaging and user-friendly experience.

[JA] App User Interviews Analysis - User journey.jpg

Design goals

Focus on user and mobile-centric design

Reduce friction points for users navigating the app and think 'content-first'.
Creating intuitive, easy-to-navigate interfaces that align with user behaviors and expectations while aligning to HIG and Material Design conventions.
Enable personalisation to increase relevance and engagement

Create a consistent design language

Create consistency by implementing a scalable design system to streamline collaboration between designers and developers and ensure consistency across the app.
Simplify dev-handoffs by creating modular, well-documented designs and components.

Driving data-driven design and experimentation

Enable data-driven design decisions and ensuring designs are measurable through Amplitude.
Foster a culture of iterative design and experimentation, testing and refining features to continuously improve the user experience.

Merchant page experience

Merchant page

Known problem areas

The app's merchant page historically lacked clear visual hierarchy, particularly in presenting terms and conditions, causing users to miss key information. Additionally, the absence of design system components led to an inconsistent interface and made updates challenging.

Old merchant page designs

From 6 user interviews of the merchant page and member insights from the customer experience team, we know:

It's hard to to scan and digest the page – lots of back-and-forth scrolling
Overly long and inconsistent sections (web-based) – limiting trackability of user interactions.
Terms and conditions information is easily missed
Lack of grouping relevant cashback information
Members want to share an offer when referring friends to Cashrewards

Iterative exploration

Design exploration focused on maximising header space to visually convey the merchant brand, content grouping, special terms display.

The process highlighted the need to systemise elements and raised questions:

"Why do we have to show all this information up-front?"
"Can we hide the text heavy information with progressive disclosure?"
"How do we reduce vertical scrolling and make an information heavy screen digestible?"
"How can we make the page order support personalisation?"

Working with stakeholders to understand grouping of information

The previous web-based design made the page overly long and inconsistent, limiting trackability of user interactions. There was an assumption that we had to display all this information up-front (immediate disclosure).

By prioritising content hierarchy and readability, we grouped critical information, streamlined cashback details with Legal, and made T&Cs more accessible.

✨ Final designs

Follows a modular system enabling more flexibility for us to customise pages based on different content and user journeys, prioritising critical information.

Visually consistent grouping of content makes it easier to scan
- Most critical bits of information above the fold.
Implemented app transitions and native mobile gestures to improve navigation and usability
Minimising the number of components shared across variants to allow for a faster build
Ability to now track interactions on different sections of the page with Amplitude event tracking

Old designs

✨ NEW and final designs

Results – Increased Shop clicks and faster session times to Shop click

Increased conversions across iOS and Android from 64% to 68% ('Shop now' button clicks).
Increased clicks of Special terms. This can be attributed to now having two clear access points.
Improved average time to convert from 44 seconds on the merchant page to now 24 seconds.

For you experience

For you

Known problem areas

There is a lack of personalised and curated content for users to discover the breadth of merchants on CRW. This gap contributes to limited user engagement and retention, and missed opportunities for merchant visibility and retail media.

We leveraged the Favourites tab, revamping it to a curated hub of content to support business goals of personalisation.

From 6 user interviews, we know:

Members don’t know Favourites exist
Members don’t see the value in Favourites and expect to be notified when a favourited merchant has an offer (at the time push notifications for favourites was not available)

From data analysis, we know:

Favourites was averaging 23 unique clicks per day (any clicks on page)
Favourites interactions/engagement was averaging 9k uniques

Hypothesis

We hypothesised that user engagement would increase by offering a unique way to explore tailored content and track favorites, showing users' openness to alternative discovery paths.

Design and concept exploration

Collaborated with other designers on the ideation phase. Concepts explored were centred around:

Injecting more personalised content on Favourites in alternative design forms such as stories and collections.
Transforming Favourites into a more curated hub of merchant discovery.
Inspiring members to return to the app everyday through 1:1 offers and benefits.

Launching 'For you' as an experiment

I proposed leveraging the Favourites tab to deliver personalised content, adding value for members while experimenting with alternative browsing methods.

After discussions with key stakeholders, we replaced and redesigned the Favourites tab to be 'For you' – A unique way to explore tailored collections, promotions and keep track of favourites.

The first iteration of 'For you' introduced 'Collections', an experimental approach to help members discover new merchants and explore alternative ways to find offers.

Results – 'For you' uplifts app engagement

Weekly unique visits to 'For you' (13k per week) is higher than previous Favourites (9k per week). 'For you' is definitely set to surpass Favourites in views and engagement as time goes by.
For 2024, Favourites was averaging 23 unique clicks per day (any clicks on page). Since 'For You' launch, we now see an average of 191 unique clicks per day.

Collections proves users are interested in other forms of merchant discovery

3.4% of users viewed a collection
'Top 10 Stores' received the most clicks and views
13% conversion (viewing a merchant from a collection)

Shop page optimisation

As part of the app revamp, we rolled out design optimisations and experiments on the highly visited Shop page, including:

Automated hero banners
Condensed the Search header
Scalable Offer and Merchant card components
Personalised rail order experiments
Infinite scroll trials

Recommended category rail experiment results – Personalisation wins!

Daily CTR in shop page to any carousel went from average 15% to 17.5% (16% increase)
Daily conversion to purchase through carousel (with no search) went from 1.70% to 2.14% (25% increase)
Overall conversion to shop per session went from 12% to 14.4%
By heroing the personalised rails (merchant+category), the CTR went from 5.46% to 7.01%

Shop page Offer Cards – Compact, scalable component experiment

We believed that more compact cards showing more offers per view will increase the scroll rate and CTR, as members gain more value with each interaction.

We released the new offer card to 20% of all app users for two weeks and saw incredible results.

A/B test results – the more compact, the better!

Daily average conversion from open the app to click in a carousel went from 9.75% to 15.0% and weekly average from 14.8% to 22.0%
The daily average conversion from open the app to make a purchase through a carousel click (no search journey) went from 0.826% to 1.39% and weekly from 2% to 3.35%.

🎉 Successfully becoming app-first

SUPR-Q results – surpassed Web in user experience

At the beginning of FY24, the app had a score of 3.81/5 [Average to slightly above average user experience (76.2%)]
The hope was that in 12 months time we'd see an uplift to 4/5. Excellent user experience (80%)
This year, app has a score of 4.3/5 = Excellent user experience (86%). We also had 4,561 responses for app in comparison to 321 from last year due to offering an incentive.

Results – Increased engagement and #1 converting channel

30% increase in app MIUs – 23% above target
App became the #1 converting channel
App user retention over key retail periods is higher than Web retention.
Shop conversion transactions is more consistent on app