Enhancing the referral flow & design systems
Link to live prototype
MY ROLE
Product designer
UX researcher
TOOLS
Figma
Figjam
TIMELINE
OCT 2024 -
DEC 2024
TEAM
2 Product Designers
2 Product Managers
1 CEO
1 Developer
Krush, a dating app targeting Asian millennial users, introduced a referral feature to drive user acquisition—but struggled with low engagement and conversion rates. I collaborated closely with the CEO and cross-functional team to work on a UX redesign. This included restructuring the referral flow, enhancing visual consistency across the UI, and building a scalable design system to support long-term growth and maintainability.
How might we increase referral engagement while building a cohesive, scalable design system that improves usability throughout the app?
How might we increase referral engagement while building a cohesive, scalable design system that improves usability throughout the app?
The Problem
The Problem
Despite its potential as a key growth channel, potential to be a key growth channel for user acquisition and business expansion, Krush’s referral flow suffered from a fragmented user experience that hindered conversion.
The product’s UI also lacked cohesion in color, typography, and component styles, weakening the overall brand experience.
Despite its potential as a key growth channel, potential to be a key growth channel for user acquisition and business expansion, Krush’s referral flow suffered from a fragmented user experience that hindered conversion.
The product’s UI also lacked cohesion in color, typography, and component styles, weakening the overall brand experience.
Current referral screens
Solution 1:
Solution 1:
New entry point
New entry point
To lower entry barriers, we repositioned the referral feature on the home screen using a top banner, making it easy to find and naturally inviting to interact with.
To lower entry barriers, we repositioned the referral feature on the home screen using a top banner, making it easy to find and naturally inviting to interact with.
Solution 2:
Solution 2:
Tiered reward programs
Tiered reward programs
To encourage ongoing engagement, the reward system was restructured into a tiered program, shifting the experience from a one-time action to a series of motivating steps.
To encourage ongoing engagement, the reward system was restructured into a tiered program, shifting the experience from a one-time action to a series of motivating steps.
Solution 3:
Solution 3:
Cohesive system
Cohesive system
We built a cohesive visual system across the UI to strengthen the brand experience. By componentizing the UI through a design system, we also improved development efficiency and long-term maintainability.
We built a cohesive visual system across the UI to strengthen the brand experience. By componentizing the UI through a design system, we also improved development efficiency and long-term maintainability.
Let’s start from the beginning!
Let’s start from the beginning!
background
background
Krush’s referral flow was hard to find and lacked compelling incentives, resulting in low engagement and conversion. Visual inconsistencies and the absence of a reusable design system also created challenges for brand consistency, developer handoff, and long-term scalability.
RESEARCH
RESEARCH
Our research method includes benchmarking, surveys, and analyzing user flows.
Our research method includes benchmarking, surveys, and analyzing user flows.
Competitor Benchmarking
(3 dating app and 2 non-dating app)
Collected User surveys through Googleforms
(10 user responses, aged 20-35)
65% users didn’t know Krush had a referral feature
58% of users said the rewards weren’t motivating enough to share
42% expected some confirmation or status update
Inconsistent UI & Design Systems
Color, spacing and typography varied across screens
Lacked reusable UI patterns
No centralized design system, making handoff inefficient
Key Findings
Key Findings
User feedback revealed three main pain points. hese insights underscored the need for a more visible, rewarding, and trustworthy referral experience—supported by a cohesive visual system to enhance usability and brand consistency.
User feedback revealed three main pain points. hese insights underscored the need for a more visible, rewarding, and trustworthy referral experience—supported by a cohesive visual system to enhance usability and brand consistency.
Insight #1
Insight #1
Discoverability
Discoverability
The referral option was buried under My Page → Referral, resulting in low user awareness and engagement.
The referral option was buried under My Page → Referral, resulting in low user awareness and engagement.
Insight #2
Insight #2
Weak Motivation
Weak Motivation
Users found the reward (3 hearts) unmotivating. Without confirmation or feedback after sharing, trust and re-engagement dropped.
Users found the reward (3 hearts) unmotivating. Without confirmation or feedback after sharing, trust and re-engagement dropped.
Insight #3
Insight #3
UI Inconsistency
UI Inconsistency
Inconsistencies in color, typography, spacing, and component styles weakened the overall brand and user experience.
Inconsistencies in color, typography, spacing, and component styles weakened the overall brand and user experience.
hypothesis
hypothesis
Making the referral feature more visible on the home screen, adding tiered rewards with real-time feedback, and building a scalable design system will boost engagement, increase user trust, and improve design consistency and efficiency.
Making the referral feature more visible on the home screen, adding tiered rewards with real-time feedback, and building a scalable design system will boost engagement, increase user trust, and improve design consistency and efficiency.
Project goal
Project goal
New entry point
New entry point
Reposition the referral feature on the home screen for easy discovery and engagement
Reposition the referral feature on the home screen for easy discovery and engagement
Solution 1
Tiered program
Tiered program
Restructure rewards into a tiered program to drive ongoing engagement.
Restructure rewards into a tiered program to drive ongoing engagement.
Solution 2
Cohesive system
Cohesive system
Build a cohesive UI and scalable design system to reinforce brand experience.
Build a cohesive UI and scalable design system to reinforce brand experience.
Solution 3
Goal
Redesign the referral flow with entry points, tiered rewards for repeat engagement, and a unified design system for brand consistency and scalability.
Iterations
Iterations
Moderated User Testing
Moderated User Testing
We made iterative improvements based on user feedback during the user testings.
We made iterative improvements based on user feedback during the user testings.
Finding 1
Finding 1
Refine banner copy on the home screen after users perceived it as overly promotional. Rewritten to sound more playful and action-oriented.
Refine banner copy on the home screen after users perceived it as overly promotional. Rewritten to sound more playful and action-oriented.
Solution 1
Solution 1
→ Changed from “🎁 Get rewards with friends” to “Earn Hearts + Boosts by inviting 1 friend!”
→ Changed from “🎁 Get rewards with friends” to “Earn Hearts + Boosts by inviting 1 friend!”
Finding 2
Finding 2
Received feedback that the referral flow lacked confirmation or feedback after sharing.
Received feedback that the referral flow lacked confirmation or feedback after sharing.
Solution 2
Solution 2
→ Added real-time reward animation and push notification at sign-up completion
→ Added real-time reward animation and push notification at sign-up completion
Finding 3
Received feedback regarding the button color contrast
Received feedback regarding the button color contrast
Solution 3
Solution 3
→ Aligning all buttons with WCAG 2.1 AA contrast standards using design tokens for consistency.
→ Aligning all buttons with WCAG 2.1 AA contrast standards using design tokens for consistency.
Design system & accessibility
Design system & accessibility
Defined a design token–based system including color palette, typography scale, and button structure across the UI
Standardized reusable components (e.g., home banner, CTA buttons, cards) with clear visual hierarchy
Aligned with WCAG 2.1 AA guidelines, ensuring proper text contrast, minimum touch targets (44px+), and accessible focus states
Defined a design token–based system including color palette, typography scale, and button structure across the UI
Standardized reusable components (e.g., home banner, CTA buttons, cards) with clear visual hierarchy
Aligned with WCAG 2.1 AA guidelines, ensuring proper text contrast, minimum touch targets (44px+), and accessible focus states
IMPAct
IMPAct
Positive Client & User Feedback!
Positive Client & User Feedback!
The CEO of Krush expressed satisfaction with the depth of the redesign work and showed strong interest in expanding the design system to elevate consistency and scalability across the product.
Conducted follow-up usability testing on the final design to validate flow clarity, engagement, and trust. Results confirmed improved usability and higher task success rates:
“I used to skip the old invite button, but this one actually makes me want to click.”
“Getting notified when a friend joins made the reward feel real.”
“I liked choosing my reward, and seeing how many people I’ve invited kept me going.”
The CEO of Krush expressed satisfaction with the depth of the redesign work and showed strong interest in expanding the design system to elevate consistency and scalability across the product.
Conducted follow-up usability testing on the final design to validate flow clarity, engagement, and trust. Results confirmed improved usability and higher task success rates:
“I used to skip the old invite button, but this one actually makes me want to click.”
“Getting notified when a friend joins made the reward feel real.”
“I liked choosing my reward, and seeing how many people I’ve invited kept me going.”
Lessons learnt
Lessons learnt
Reflection & Takeaways
Reflection & Takeaways
This project deepened my understanding of how critical structural design is in shaping user behavior. I realized that simply changing a button’s position or adjusting reward amounts isn’t enough—without a clear journey that leads users from awareness → anticipation → action → repetition, even the best features won’t drive real impact.
I also came to see referrals not just as a feature, but as a growth channel for brand expansion.
Building the design system further showed me the value of consistent UX in creating trust and usability. By unifying scattered styles and components, I was able to create a smoother, more reliable experience—one that keeps users oriented and engaged.
Ultimately, this project reminded me that great design isn’t just about visual polish—it’s about creating a clear, reusable structure that helps both users and teams navigate with ease. It brought me closer to the core of what design truly is: building systems that make action intuitive and collaboration efficient.
This project deepened my understanding of how critical structural design is in shaping user behavior. I realized that simply changing a button’s position or adjusting reward amounts isn’t enough—without a clear journey that leads users from awareness → anticipation → action → repetition, even the best features won’t drive real impact.
I also came to see referrals not just as a feature, but as a growth channel for brand expansion.
Building the design system further showed me the value of consistent UX in creating trust and usability. By unifying scattered styles and components, I was able to create a smoother, more reliable experience—one that keeps users oriented and engaged.
Ultimately, this project reminded me that great design isn’t just about visual polish—it’s about creating a clear, reusable structure that helps both users and teams navigate with ease. It brought me closer to the core of what design truly is: building systems that make action intuitive and collaboration efficient.