Designing Loyalty

UX/UI Design 
Several mobile phones laid out next to each other featuring key screens from the Merchant Business Portal
IMPACT
  • Led discovery research: Designed and facilitated the focus groups to validate the marketplace’s value proposition and informed product direction.
  • Reduced customer drop off in onboarding: Crafted a simplified multi-step onboarding flow that ensured business owners completed essential steps with confidence and efficiency.
  • Shifted the team’s focus to accessibility: Setting foundational standards that made the MVP inclusive improving usability for all users.
  • Streamlined user interaction: Redesigned the payment linking flow resulting in clearer instructions and improved task completion rates.
  • Delivered a highly engaging and accessible product: Received positive feedback and demonstrating how inclusive design can meet both business and user goals effectively.
MY ROLE
Lead UX Design Consultant for the react native mobile app and the reskin of a third party react platform to be more inline with accessibility and brand guidelines.
INDUSTRY
Telecommunications
PROJECT TYPE
UX/UI Design 
PROJECT YEAR
2020

Project Overview 

A telecommunications company aimed to enhance their loyalty rewards program, creating more earning opportunities for customers while providing a marketplace for business clients to reach a broad consumer base. As Lead UX Designer, I developed a proof of concept for a customer-facing mobile app to browse offers and led the UX design and reskinning of the Marketplace Business Portal, enabling small to medium businesses to enrol, manage offers, and update business details.

User Goals

Customers wanted more options to earn points, as the existing marketplace offered a limited selection. Meanwhile, small and medium businesses, recovering from the financial impact of COVID-19, were looking for ways to attract customers post-lockdown.

Business Goals 

The company, with a substantial consumer and business customer base across Australia, saw an opportunity to increase engagement and loyalty by connecting these groups in an expanded loyalty marketplace, serving as an extension of their existing program.

Research

Discovery research was crucial, as the marketplace was an innovative extension of the company’s loyalty program. As Lead UX Designer, I designed research activities to assess if the marketplace’s value proposition warranted continued investment.

Focus Group Workshops

Working closely with Service Design, I facilitated four remote focus groups with small to medium business owners, evaluating their perceptions of loyalty programs and testing the marketplace’s appeal. Business owners from diverse retail and service backgrounds engaged in online activities using Miro, contributing insights on the marketplace’s potential value.

Screenshot of Miro virtual whiteboard and Lucy facilitating a workshop with 5 other people online
Lucy facilitating a remote focus group with small to medium business owners

Collaborative Stakeholder Workshops 

I led online collaborative sessions with over 100 stakeholders across four states. Using Miro and Figma, we conducted design studios, user flow reviews, and design critiques. This collaborative approach brought early cross-functional input from Service Design, Visual Design, Accessibility, and Marketing, shaping the marketplace’s direction.

A user flow of the structure of the product, using Miro
User flow of the key flows for the Business portal

Minimal Viable Product (MVP)

After validating the proof of concept, we progressed to building a Minimal Viable Product (MVP), collaborating with internal design teams to integrate insights into the native mobile app. I then led the reskin of the Marketplace Business Portal, collaborating closely with a third-party loyalty platform. My focus was on leveraging the telecommunication company’s mature design system and branding to design a seamless and intuitive experience for business owners to manage their offers in the portal. 

Challenges

During this reskin, I faced several interesting challenges, with the two most poignant being the complexity of the points system and the extensive steps involved in successfully enrolling a business owner into the loyalty program. 

  1. Multi-Step Enrolment - The onboarding process required several steps to ensure business owners could effectively link customer payment methods and join the loyalty program, making simplification essential.
  2. Complex Points System - Streamlining the points system was critical to help business owners understand how to create meaningful offers using points, while also meeting program requirements.

Designing with insights

Onboarding Flow 

After stakeholder workshops, we identified essential requirements for effective business enrolment into the loyalty program. To minimise dropout risk, I designed an onboarding flow that captured only the essentials up front, allowing business owners to complete the rest of the steps in stages through a self-service model with a simple progress-tracking dashboard and flexible profile editing.

An onboarding flow diagram displaying 4 key steps for eligibility check and 1 step for payment linking.
Eligibility Check & Payment Linking were the two essential stages involved in enrolling a business onto the loyalty program

Registered Business Name & ABN Lookup 

A key hypothesis I tested in the proof of concept phase was: “If someone is an SMB owner, they’ll know their ABN and where to find it.” Usability testing revealed varied behaviours: half of participants entered their ABN directly, while others preferred searching by their business name. However, all knew exactly where to retrieve this detail, from letterheads to phone notes, everyone had a different system and method for documenting this. This insight led us to design a search feature that accommodates both ABN and business name entries.

Two mobile phones, one displaying a search for business registration name and the other displaying a search for ABN number

Payment Gateway

Another key insight from the proof of concept phase was SMB’s varied understanding of the term ‘Payment Gateway’, which is essential for processing payments via a physical payment terminal or online checkout. Since a business’s payment gateway type determined eligibility for the loyalty program and was a required field in the business details form, we developed a hypothesis to assess comprehension: “The term Online Payment Gateway will be confusing to SMB’s”. Testing showed that while most participants had heard the term and could define it, their confidence was low, suggesting the onboarding flow could benefit from added guidance on this terminology and requirement. 

The products help and support features are highlighted via a mobile online form with a help link saying 'Not sure which payment gateway you use?''

Payment Linking

Payment linking was a critical part of onboarding new businesses to the loyalty program, allowing customers to earn points when purchasing from participating businesses. The process, however, was complex and confusing, involving multiple steps and a verification period that could take up to 10 days.

To address this, I designed an initial flow that began with an overview screen to explain the process, helping business owners understand the necessary steps. In an effort to give our users the necessary information upfront before beginning this complex process, the screen was cluttered with too much information. Through collaboration and design critiques with the Design Systems and Accessibility teams, we iterated the copy and design to be more streamlined and user-friendly, making it clearer and easier to navigate.

Before 

Seven mobile screens for the payment linking flow are laid out with red sticky note annotations calling out some key areas in the design that needed refinement, such as 'overly complicated Headings' and 'Too much content'

After 

A second very of the same seven payment linking screens after design and content refinement. The designs are marked up with green annotations highlighting some of the key improvements to the design, such as 'simplified headings and content' and a 'clearer confirmation message'

Complete Profile

After completing initial onboarding and eligibility screens, users arrived at the Complete Profile state of the home screen. To avoid unnecessary effort for ineligible users, we prioritised eligibility checks first before arriving inside the Marketplace Business Portal. The Complete Profile dashboard then communicated remaining tasks and progress toward finalising their business profile setup.

In usability testing, we hypothesised, “SMBs will likely explore the portal before completing their profile.” Contrary to this, participants’ initial response was to continue setting up their profile, aligning with our design intent. To encourage this, I applied several psychological principles such as:

  1.  Endowed Progress Effect - People are more motivated to complete tasks when they feel they’ve already made some sort of progress. Displaying a 50% progress bar on the home screen gave users a sense of momentum. This tested really well in the usability testing sessions I facilitated. Users felt encouraged seeing that their eligibility check was complete, with payment linking pending, which generated optimism and motivation to continue the remaining tasks. 
  2. Zeigarnik Effect - Similar to the Endowed Progress Effect, the Zeigarnik effect highlights people’s tendency to finish tasks they have already started. This behaviour was also validated through our research testing, where users were more inclined to continue the remaining steps to complete their profile over exploring other screens in the Marketplace Business Portal. 

These design choices created an engaging onboarding experience, successfully prompting users to complete their profile.

The home screen displaying a complete your business profile heading with a 50% completed progress bar prominently situated at the top of the mobile screen.

Reframing Accessibility as Essential, Not Optional

In this project, I led discussions defining our ‘minimal viable accessibility’ standards, shifting the team’s perspective on accessibility from a ‘nice to have’ to a core component of quality design and development. 

These discussions highlighted how accessibility not only improves usability but also aligns with best practices and cost-effective development by preventing the need for retrofitting later. This philosophy resulted in a commitment to key accessibility criteria for the MVP, including accessible colour contrast ratios and supporting Dynamic Type, a widely used accessibility setting.

Early in my process, I focused on how typography would scale with Dynamic Type and ensured consistent text contrast across varied backgrounds. Addressing these challenges at the design stage allowed us to proactively identify and resolve potential issues, preventing costly fixes during development and delivering a more inclusive user experience from the outset.

Three versions of the home screen all displaying slightly different colour tones, representing Achromatopsia, Tritanopia and Deuteranopia colour blindness conditions.

Later in the project, I began adding accessibility annotations to my design files, which improved communication with the development team and strengthened the designs by clearly defining layout, hierarchy, navigation, and focus areas. For those interested in learning more, I highly recommend Intopia’s video on accessibility annotations (watch the video here), which became my go-to reference for using this approach effectively.

The invoice screen with accessibility annotations around it, including a description list and some details about a link requiring Aria tags.

Conclusion

The marketplace project presented a unique opportunity to design a loyalty experience that effectively connected the company’s consumer and business customers. By establishing a marketplace for small to medium businesses, we expanded customer engagement through additional points-earning opportunities, aligning with both user needs and business objectives. Through extensive research, iterative design, and close cross-functional collaboration, we delivered a mobile app and business portal that balanced ease of use with a comprehensive feature set. The final product received positive feedback from users and stakeholders alike, demonstrating that a user-centred design and accessibility-first approach can enhance engagement and loyalty in a competitive digital environment.

Other projects

Let's work together

Send me a message about how you think we could work together!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.