Topify – Redesigning Client Referral Programs

Year
2023
Role
Lead Product Designer
Key Contributions
Research, UX/UI, User Testing, Information Architecture

Overview

Topify is a platform connecting top talent with clients seeking specialised skills. For this project, we aimed to enhance the referrals feature and expand its scope to include additional programs. Two approaches were introduced for client referrals: direct referral via a form that connects the client to the sales team and referral link sharing, enabling users to seamlessly invite clients. Additionally, the landing page was reimagined to include other programs, such as Client Team Expansion and Becoming a Topify Client, alongside talent and client referral programs.

Challenge

The existing referral feature lacked clarity and engagement, especially for client referrals, which often occurred informally. Our goals were to:

1.Introduce three distinct programs: Referrals, Client Team Expansion, and Becoming a Topify Client.

2.Design for two approaches for client referral: direct referral (form submission to connect with sales) and referral link sharing.

3.Provide transparency around rewards, progress tracking, and eligibility.

4.Encourage increased engagement through an intuitive design and seamless functionality.

Solution

The solution focused on usability, clarity, and transparency while accommodating multiple programs and pathways. Key highlights included:

  • A revamped Referrals & More landing page, introducing all programs with clear titles, short descriptions, and shortcut buttons to generate and share referral links.
  • Detailed program-specific pages featuring step-by-step instructions, straightforward descriptions, and reward structures.
  • A comprehensive tracking table enabling users to monitor referral statuses and invitee progress.
  • Collaboration with developers to support implementation and pre-release testing to ensure functionality.

Design Process

Research and Discovery

Understanding how users interacted with the referral system was critical to the redesign. I collaborated with a researcher to conduct interviews with:

  • Users who had previously referred others to Topify.
  • Users who engaged in informal client referrals.

Key findings revealed that while talent referrals were more common, client referrals occurred informally, often through direct communication with the sales team. Users expressed a need for clearer instructions, better tracking, and easier link-sharing capabilities.

Flowchart Creation

To structure the design, I created a flowchart mapping out user pathways for each program and referral type. This allowed me to identify potential pain points and streamline the user experience.

Usability Testing

I designed and conducted usability tests to validate the new designs, assess clarity, and measure ease of use for referral tracking and sharing. Testing included talent users who had referred others previously.

Key Test Findings

  • Landing Page Preference: 67% preferred the new design for its clarity and visual appeal.
  • Tracking Table: Users appreciated the consolidated view, with 64% favoring tabbed navigation.
  • Sharing Links: 71% found link generation and customization very useful.
  • Rewards Clarity: Nearly all users correctly identified the action triggering rewards.

Key Features

1.Referrals & More Landing Page

  • A unified landing page introduces all available programs (Referrals, Client Team Expansion, Becoming a Topify Client).
  • Each program has a title, a concise description, and an option for users to quickly share referral links.
  • Shortcut buttons for sharing referral links were also added to the Topify Talent Portal homepage for increased accessibility.

2.Program Subpages

  • Each program has its own detailed subpage explaining how it works in four simple steps.
  • Clear visuals and text outline rewards, steps for eligibility, and the user’s next actions.

3.Customizable Referral Links

  • Users can generate, shorten, and customize referral links for easier sharing.
  • Link-sharing options include email, social media, and messaging platforms.
  • To further promote the referrals feature and boost its usage, I added a shortcut for referral links on the Topify homepage/dashboard and implemented an informational popup on the homepage to introduce and highlight the new feature.

4.Tracking and Transparency

  • A tracking table provides a consolidated view of all referral activity, including invitee statuses, progress milestones, and reward details.
  • Tabbed navigation allows users to switch between all invites and program-specific tracking.

Solution Refinement

Testing insights informed iterative refinements to the design:

  • Improved Tracking Visibility: Tabs were emphasised for easier navigation.
  • Reordered Content: "Ways to Invite" was prioritised above program descriptions to align with user feedback.
  • Enhanced Copy: Collaborating with the UX writer, I refined instructions and descriptions for simplicity and clarity.
  • Additional Client Options: Direct referral forms and materials for client onboarding were optimised to support smoother communication with the sales team.

Results and Impact

The redesigned Referrals & More feature achieved its goals of increasing engagement and providing clarity across all programs:

  • Increased Referrals: The structured client referral pathway encouraged more formal client referrals, both through forms and link sharing.
  • Improved Transparency: The tracking table and clear program descriptions reduced user confusion.
  • Enhanced Usability: Shortcut buttons and simplified navigation made sharing and tracking more intuitive.

Collaboration with the UX writer, product manager, and developers ensured that the feature was both user-friendly and aligned with Topify’s business goals.

Conclusion

The Referrals & More redesign transformed a fragmented experience into a cohesive, user-friendly feature that drove higher engagement. By incorporating user research, iterative design, and cross-functional collaboration, the new design empowered users to navigate multiple programs with ease while supporting Topify’s mission to foster meaningful connections.

Arrow
Get this template Unlock 160+ templates
Similar templates
More templates
Vertora
Kreascape
Bloomava