FAST-UP
Creating a design system for HAUP, a car rental start up, optimized for consistency, simplicity, and scalability.
Duration
1 weeks
Responsibilities
Design system audits
Token creations
Design system creation
UI design
Content organization
Overview
I created a design system for HAUP to establish a clear structure for maintaining visual consistency across all touchpoints.
Through a design audit, I defined system principles, developed tokens, and built the foundation that played a key role in the HAUP homepage redesign.
The Challenge
HAUP is a car-sharing service in Thailand that provides short-term car rentals and other extra services via online.
As HAUP grew, maintaining a consistent design touchpoints became challenging. The existing website lacked cohesion, clarity and consistency in the type, colors, layout and components, leading to varied user experiences.
Design audit result summary
35+ inconsistent styles and designs found in the home page of the official website of Haup
27+ colors inconsistency
having way too many different shades of the same colors
9+ differnt types of fonts
using way too many fonts and no proper hierarchy systems
Inconsistent components
The majority of components are mismatched and comes from different styles
Introducing FAST-UP
FAST-UP is HAUP's design system, built for speed, consistency, and efficiency in digital touchpoints. It reflects both the foundation and optimization of HAUP’s design process while embodying the brand’s seamless and effortless rental experience.
Core Principles
Straightforward: A seamless experience from booking to driving across all brand touchpoints.
Simplicity: Minimal, distraction-free design that reduces friction.
Familiarity: An intuitive system that feels natural and easy to navigate.
FAST-UP TOKENS
Design tokens are the core elements that ensure our design language is consistent across platforms. The brand tokens are structured into Brand Tokens (base colors), Semantic Tokens (functional names), and Role-Based Tokens (UI applications). This system ensures consistency, scalability, and flexibility across HAUP's digital touchpoints.
Tokens Usage
The role based tokens (Mappings) clearly defines the role and purpose of the token within the design system, making it intuitive for designers and developers to understand and apply. It also ensures scalability and consistency.
Color System
Color Scale
The colors are taken from the website of HAUP, and was grouped, standardized, and arranged into proper color scale using the numerical method (100 - lightest to 900 darkest).
The brand’s main color is blue as seen most from the website, followed by a little mixes of green, yellow, and teal to represent freshness, light and fast.
Color Tokens
Using the token structure of FAST-UP, the colors are tokenized into sematic tokens which are later further categorized into role based color tokens for different UI elements and components across many designs.
Typography System
Font Family
After the design audit, there were 5 different fonts used across different pages of the website. We picked the most frequently used fonts in the existing design to use in our system to ensure familiarity yet consistency.
Font Scales and Weight
Setting up proper font size as variables (which was later used in combination with line height, weights to create text styles) based on the hierarchy of the information found in the existing website.
Line Height and Paragraph Spacing
Standardizing the spacing of the paragraph and line height using the 1.6x method.
Applying Tokens to Text Styles
Using all of the typography tokens to create text styles to be used in Figma according to the framework below:
Spacings
Setting up proper spacings
The spacing system is divided into multiple sizes, ranging from 3XS to 3XL to ensure consistent spacing across designs.
Component
Creating a library of reusable elements and components using design tokens to streamline the design processes, and improve consistency.
Nested Components
Using the stand-alone components, and nested them together to create compound components.
Implement
Redesigning the Landing Page
Applying the design system into the process of redesigning the landing page of HAUP website. The contents and sections of the website has been optimized for users to quickly skim through.
Key Learnings
Thinking Systematically
Going through this project deeply helps me to understand the role of a designer who, not only design beautiful interfaces, but must understand and communicate their designs across multiple touchpoints to developers and other designers.
