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
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.
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.
Current screens
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 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.
Design opportunity
How might we increase referral engagement while building a cohesive, scalable design system that improves usability throughout the app?
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.
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
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
Uncovering what works - and what doesn’t
Competitor Benchmarking
(3 dating app and 2 non-dating app)
Used clear CTAs and instant feedback to boost referral engagement
Collected User surveys through Googleforms
(10 user responses, aged 20-35)
Low visibility and unclear rewards stopped users from sharing referrals.
UI Audit of current Krush screens
(3 different flows through out the app)
Color, spacing and typography varied across screens
Usability testing
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.
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.
Pain point 2
Received feedback that the referral flow lacked confirmation or feedback after sharing and unable to track process.
Pain point 3
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!
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.
Final usability testing
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:
Let’s explore Krush Design Systems!
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.
Color
Primary 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.
White
HEX - FFFFFF
Black
HEX - 000000
Accent Color
Plum
HEX - 6D2E46
Typorgaphy
Typeface
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.
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
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
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.
Grid
This 6-column grid system was established to ensure consistent layout structure across Krush’s mobile interface. The grid provides visual rhythm and alignment, helping maintain hierarchy and spacing across different screen sizes.
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.
Impact
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.
Lessons learnt
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.