Enhancing the referral flow and design systems
Enhancing the referral flow and design systems
MY ROLE
Product designer
UX researcher
TOOLS
Figma
Figjam
TIMELINE
Oct 2024 - Dec 2024
TEAM
2 Product Designers
2 Product Managers
1 Developer
1 CEO
MY ROLE
Product designer
UX researcher
TOOLS
Figma
Figjam
TIMELINE
Oct 2024 - Dec 2024
TEAM
2 Product Designers
2 Product Managers
1 Developer
1 CEO
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 with the CEO and the team on redesign.
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 with the CEO and the team on redesign.
What was the problem of Krush?
What was the problem of Krush?
Krush’s referral flow had high growth potential but suffered from low conversions due to a fragmented user experience. Inconsistent UI further weakened brand trust and recognition.
Krush’s referral flow had high growth potential but suffered from low conversions due to a fragmented user experience. Inconsistent UI further weakened brand trust and recognition.
Current screens
Current screens
Issues with the current flow
Issues with the current flow
The UI lacks consistency with other screens, particularly with the heart icons, which appear in varying styles across the app.
The UI lacks consistency with other screens, particularly with the heart icons, which appear in varying styles across the app.
The current screen requires users to take an extra step by manually entering names and phone numbers.
The current screen requires users to take an extra step by manually entering names and phone numbers.
There’s a lack of feedback—users can’t see whether their invitee has joined or track referral progress.
There’s a lack of feedback—users can’t see whether their invitee has joined or track referral progress.
Design opportunity
Design opportunity
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?
Background on this project
Background on this project
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.
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.
The CEO of Krush asked us to boost referral engagement and elevate design consistency throughout the app for a more cohesive and effective user experience.
The CEO of Krush asked us to boost referral engagement and elevate design consistency throughout the app for a more cohesive and effective user experience.
Our project goal to achieve user needs
Solution 1
New entry point
Reposition the referral feature on the home screen for easy discovery and engagement
Solution 2
Tiered program
Restructure rewards into a tiered program to drive ongoing engagement.
Solution 3
Cohesive system
Build a cohesive UI and scalable design system to reinforce brand experience.
Hypothesis
Making referrals visible, adding reward feedback with tier rewards, and building a scalable design system will boost engagement and keep design consistent.
Background research
Background research
Uncovering what works - and what doesn’t
Uncovering what works - and what doesn’t
Competitor Benchmarking
Competitor Benchmarking
(3 dating app and 2 non-dating app)
Used clear CTAs and instant feedback to boost referral engagement
Used clear CTAs and instant feedback to boost referral engagement
Collected User surveys through Googleforms
Collected User surveys through Googleforms
(10 user responses, aged 20-35)
Low visibility and unclear rewards stopped users from sharing referrals.
Low visibility and unclear rewards stopped users from sharing referrals.
UI Audit of current Krush screens
UI Audit of current Krush screens
(3 different flows through out the app)
Color, spacing and typography varied across screens
Color, spacing and typography varied across screens
Usability testing
Usability testing
Diving into the real problem
Diving into the real problem
Users completed specific tasks during moderated sessions, helping us identify usability issues and pain points. These are the key pain points identified.
Users completed specific tasks during moderated sessions, helping us identify usability issues and pain points. These are the key pain points identified.
Pain point 1
Pain point 1
Received feedback that there is no clear entry point for the referral feature on the main screen, leading to poor discoverability and low engagement.
Received feedback that there is no clear entry point for the referral feature on the main screen, leading to poor discoverability and low engagement.
Pain point 2
Pain point 2
Received feedback that the referral flow lacked confirmation or feedback after sharing and unable to track process.
Received feedback that the referral flow lacked confirmation or feedback after sharing and unable to track process.
Pain point 3
Pain point 3
Received feedback regarding the button color contrast and inconsistency of design system through out the app
Received feedback regarding the button color contrast and inconsistency of design system through out the app
Insights from the research
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
Discoverability
The referral option was buried under My Page → Referral, resulting in low user awareness and engagement.
Insight #2
Weak Motivation
Users found the reward (3 hearts) unmotivating. Without confirmation or feedback after sharing, trust and re-engagement dropped.
Insight #3
UI Inconsistency
Inconsistencies in color, typography, spacing, and component styles weakened the overall brand and user experience.
Final design based on the feedback!
Final design based on the feedback!
Solution for drop-off, delay, and accessibility
Solution for drop-off, delay, and accessibility
Solution 1
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.
Solution 2
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.
Solution 3
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.
Solution 1
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.
Solution 2
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.
Solution 3
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.
Final usability testing
Final usability testing
Words from the users on final design
Words from the users on final design
We 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:
We 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:
Let’s explore Krush Design Systems!
Let’s explore Krush Design Systems!
Design System
Design System
The Krush Design System brings consistency, clarity, and warmth to every touchpoint. It was built to reflect the app’s playful yet meaningful tone—balancing modern dating UI patterns with cultural sensitivity. From typography to components, each element supports a seamless and emotionally resonant user experience.
The Krush Design System brings consistency, clarity, and warmth to every touchpoint. It was built to reflect the app’s playful yet meaningful tone—balancing modern dating UI patterns with cultural sensitivity. From typography to components, each element supports a seamless and emotionally resonant user experience.
Color
Color
Krush’s color palette blends warmth and energy to evoke connection, trust, and playfulness. It reflects both modern dating dynamics and cultural vibrancy rooted in Asian identity.
Krush’s color palette blends warmth and energy to evoke connection, trust, and playfulness. It reflects both modern dating dynamics and cultural vibrancy rooted in Asian identity.
Primary
Secondary
HEX - FFFFFF
HEX - 000000
HEX - 6D2E46
HEX - FFF5F2
HEX - EE4A5F
HEX - 8F6932
HEX - 494949
HEX - 696969
Semantic
Danger
HEX - DC0722
Default
HEX - 494949
Warning
HEX - DBC30E
Success
HEX - 12842B
Primary
HEX - FFFFFF
HEX - 000000
HEX - 6D2E46
Secondary
HEX - FFF5F2
HEX - EE4A5F
HEX - 8F6932
HEX - 494949
HEX - 696969
Semantic
Danger
HEX - DC0722
Default
HEX - 494949
Warning
HEX - DBC30E
Success
HEX - 12842B
Typorgaphy
Typorgaphy
Our typography is set in Nunito, chosen for its soft, balanced forms and readability. It embodies Krush’s voice—welcoming, expressive, and rooted in meaningful connection.
Our typography is set in Nunito, chosen for its soft, balanced forms and readability. It embodies Krush’s voice—welcoming, expressive, and rooted in meaningful connection.
Aa
Nunito
Regular
Medium
Semi-bold
Bold
Aa
Nunito
Regular
Medium
Semi-bold
Bold
H1
Find your Krush. Your culture. Your connection.
H2
Find your Krush. Your culture. Your connection.
H3
Find your Krush. Your culture. Your connection.
H4
Find your Krush. Your culture. Your connection.
P1
Find your Krush. Your culture. Your connection.
P2
Find your Krush. Your culture. Your connection.
P3
Find your Krush. Your culture. Your connection.
Icons
Icons
Our icons are built on a simple, rounded system that aligns with Krush’s friendly tone. They enhance usability and visual cohesion without distracting from key content or interactions.
Our icons are built on a simple, rounded system that aligns with Krush’s friendly tone. They enhance usability and visual cohesion without distracting from key content or interactions.
Components
Components
Our component library brings together visual clarity and functional reliability. Each element—from buttons to cards—is crafted to reflect Krush’s brand voice while supporting intuitive user flows.
Our component library brings together visual clarity and functional reliability. Each element—from buttons to cards—is crafted to reflect Krush’s brand voice while supporting intuitive user flows.
Design system & accessibility
Design system & accessibility
Defined a design token–based system that included a consistent color palette, typography scale, and button structure across the UI. To ensure visual coherence and efficiency, I standardized reusable components such as home banners, CTA buttons, and content cards with a clear visual hierarchy. The system was built in alignment with WCAG 2.1 AA guidelines, ensuring proper text contrast, minimum touch target sizes (44px and above), and accessible focus states for an inclusive user experience.
Defined a design token–based system that included a consistent color palette, typography scale, and button structure across the UI. To ensure visual coherence and efficiency, I standardized reusable components such as home banners, CTA buttons, and content cards with a clear visual hierarchy. The system was built in alignment with WCAG 2.1 AA guidelines, ensuring proper text contrast, minimum touch target sizes (44px and above), and accessible focus states for an inclusive user experience.
Impact
Words from the client!
Words from the client!
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.
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.
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.
More Projects
