Rebuilding Riliv Website for Optimizing Consistency of Design and Efficiency of Development Process
Rebuilding Riliv Website for Optimizing Consistency of Design and Efficiency of Development Process
Riliv is a mental health startup. Over time, inconsistent design and fragmented development workflows made updates inefficient and error-prone. As the team scaled and product offerings grew, it became increasingly difficult to maintain quality and consistency across pages.
We rebuilt website with a unified design system—elevating consistency, speeding up collaboration, and setting a new foundation for scale.
Riliv is a mental health startup. Over time, inconsistent design and fragmented development workflows made updates inefficient and error-prone. As the team scaled and product offerings grew, it became increasingly difficult to maintain quality and consistency across pages.
We rebuilt website with a unified design system—elevating consistency, speeding up collaboration, and setting a new foundation for scale.
COMPANY
Riliv
ROLE
Product Designer
SCOPE
UX, UI, Illustration, Design System
PERIOD
2020
COMPANY
Riliv
ROLE
Product Designer
SCOPE
UX, UI, Illustration, Design System
PERIOD
2020
Disclaimer: This is a high-level project overview. For the full case study or more details, feel free to reach out at olehabib98@gmail.com.
Disclaimer: This is a high-level project overview. For the full case study or more details, feel free to reach out at olehabib98@gmail.com.
Key Challenges
Key Challenges
The website had strong content but weak consistency and maintainability.
The website had strong content but weak consistency and maintainability.
01
01
How can we standardize visual design and layout across all web pages?
How can we standardize visual design and layout across all web pages?
02
02
How can we reduce development friction and enable faster onboarding?
How can we reduce development friction and enable faster onboarding?
03
03
How can we improve performance while making the design easier to scale?
How can we improve performance while making the design easier to scale?
Design Process
Design Process
01
Identify Web Design Pain Points
01
Identify Web
Design Pain Points
02
Evaluate
Front-End Structure
03
Align Team on Design Goals
04
Define Grid, Color, Typography, Spacing
05
Create & Document UI Components
06
Apply System to All Web Pages
07
QA & Collaborative Developer Handoff
08
Launch & Continuous Cleanup
02
Evaluate
Front-End Structure
03
Align Team on Design Goals
04
Define Grid,
Color, Typography, Spacing
05
Create & Document UI Components
06
Apply System to All Web Pages
07
QA & Collaborative Developer Handoff
08
Launch & Continuous Cleanup
Key strategy
Key strategy
We built the design system not just to align visuals, but to bridge gaps between design and code—turning every component into a shared asset that sped up decision-making, reduced rework, and made building pages as seamless as designing them.
We built the design system not just to align visuals, but to bridge gaps between design and code—turning every component into a shared asset that sped up decision-making, reduced rework, and made building pages as seamless as designing them.
Key Solutions
Key Solutions
01
01
Unified Design System
Built a comprehensive design system that included layout grids, typography, spacing, color tokens, and reusable components like buttons, inputs, and navigation. This system aligned designers and developers under one visual and structural standard, reduced design inconsistencies, and prevented redundant code across pages.
Built a comprehensive design system that included layout grids, typography, spacing, color tokens, and reusable components like buttons, inputs, and navigation. This system aligned designers and developers under one visual and structural standard, reduced design inconsistencies, and prevented redundant code across pages.
02
02
Developer Collaboration
Partnered closely with developers to align tokens and structure, ensuring the system translated cleanly to code. This minimized technical debt and made handoffs smoother.
Partnered closely with developers to align tokens and structure, ensuring the system translated cleanly to code. This minimized technical debt and made handoffs smoother.
03
03
Full Page Redesigns
Applied the new system to core pages—Home, Counseling, B2B, Covid, and Pricing—improving clarity, trust, and usability across the website.
Applied the new system to core pages—Home, Counseling, B2B, Covid, and Pricing—improving clarity, trust, and usability across the website.
04
04
Faster Onboarding
With clear documentation and standardized components, new team members could quickly learn the system and begin contributing with minimal ramp-up.
With clear documentation and standardized components, new team members could quickly learn the system and begin contributing with minimal ramp-up.
Outcome Highlights
Outcome Highlights
Design & Dev Efficiency
Design & Dev Efficiency
Faster design and development cycles, with fewer inconsistencies and easier collaboration.
Faster design and development cycles, with fewer inconsistencies and easier collaboration.
Performance Optimization
Performance Optimization
Although not numerically documented, smaller codebases and reduced library duplication improved load performance.
Although not numerically documented, smaller codebases and reduced library duplication improved load performance.
Team Scalability
Team Scalability
New designers and developers were onboarded in just a few hours using the documented system—cutting down orientation time and boosting project readiness.
New designers and developers were onboarded in just a few hours using the documented system—cutting down orientation time and boosting project readiness.
Collaborator
Collaborator
Website Developer (Satrio)
Product Manager (Novia)