Teo Yu Siang

Teo Yu Siang

Hydrogen Design System

2020ux design, ui design

Founded in 2002, the Interaction Design Foundation (IxDF) is the oldest and largest online UX design learning platform, with over 60,000 alumni. However, the design style of the web-based platform has become outdated and inefficient, with poor readability for instance. To continue to grow, we need a principled, ground-up refresh of the platform.

This case study contains only a snippet to maintain confidentiality. Contact me for my full UX portfolio.

The problem

A lack of a principled approach towards designing led to inconsistencies in the platform. Many parts of the platform were also not designed with accessibility and readability in mind. To scale faster and better, we needed to build a system that defines how everything comes together to form a great experience at IxDF.

The solution

Hydrogen Design System: a cohesive, principled approach towards building optimal experiences for IxDF. This gargantuan task involved developing a design system, overhauling key user flows, and working closely with the development team to implement it. I was the project lead and product designer.

Process

Phase 1: Research

Before designing anything, I conducted research on:

Research notes on design principles and type scaling

Phase 2: Design

I developed HDS in 4 stages that build off one another.

First, design principles laid the foundation for the system. Next, building blocks such as principles, typography, and iconography, were created. These let me build components, such as buttons and cards. Finally, components came together to form pages and user flows.

Hydrogen’s custom icon library was created with a 32px square grid
Hydrogen’s cards contain different elements but look cohesive
Home page in different screen sizes
Lesson page in different screen sizes

Phase 3: Implementation

The project doesn’t end with the final design, of course—implementation is a core part of this gargantuan task. With the help of the development team, I created a roll-out plan. I identified key components and pages that are critical to the first iteration, while the remaining would be subsequently pushed out.

View Hydrogen Design System live on the IxDF site.


Teo Yu Siang

UX design
Visual, UI design

IxDF team

Design feedback
Implementation

Hey there!

Got a project in mind? Let's create something crazy awesome together. World domination via wicked design is just an email (and a coffee) away.

Drop me an email

Find me on Facebook