Duration
1 weeks
Roles:
UI & design system designer
Tools:
Figma
Overview
I created a basic design system for HAUP to establish a clear structure for maintaining visual consistency across all touch points to better improve the website navigation and branding.
Through a design audit, I defined system principles, developed tokens, and built the foundation that played a key role in the HAUP homepage redesign.
Disclaimer: This is a self-initiated personal project inspired by the real company HAUP. It is not affiliated with or endorsed by the company in any way.
Measurable potential impacts
After the project is finished, the changes in before and after was compared to highlights key design improvements that can results in better website conversion rates.
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 touch points became challenging. The existing website lacked cohesion, clarity and consistency in the type, colors, layout and components, leading to varied user experiences.
A quick visual audit showed multiple inconsistency in design which includes…
Introducing FAST-UP
FAST-UP is HAUP's design system, built for speed, consistency, and efficiency in digital touch points. 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 touch points.
Simplicity: Minimal, distraction-free design that reduces friction.
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 touch points.
Token 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:
Spacing
The spacing system is divided into multiple sizes, ranging from 3XS to 3XL to ensure consistent spacing across designs.
Components
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
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
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.