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.

Company
Riliv
Role
Product Designer
Scope
UX, UI, Illustration, Design System
Period
2020
Rebuilding Riliv Website for Optimizing Consistency of Design and Efficiency of Development Process cover

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

The website had strong content but weak consistency and maintainability.

  1. 01

    How can we standardize visual design and layout across all web pages?

  2. 02

    How can we reduce development friction and enable faster onboarding?

  3. 03

    How can we improve performance while making the design easier to scale?

Design Process

  1. 01Identify Web Design Pain Points
  2. 02Evaluate Front-End Structure
  3. 03Align Team on Design Goals
  4. 04Define Grid, Color, Typography, Spacing
  5. 05Create & Document UI Components
  6. 06Apply System to All Web Pages
  7. 07QA & Collaborative Developer Handoff
  8. 08Launch & Continuous Cleanup

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.

Key Solutions

  1. 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.

  2. 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.

  3. 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.

  4. 04

    Faster Onboarding

    With clear documentation and standardized components, new team members could quickly learn the system and begin contributing with minimal ramp-up.

Outcome Highlights

  • Design & Dev Efficiency

    Faster design and development cycles, with fewer inconsistencies and easier collaboration.

  • Performance Optimization

    Although not numerically documented, smaller codebases and reduced library duplication improved load performance.

  • 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.

Collaborator

  • Website Developer (Satrio)
  • Product Manager (Novia)