Design System

Create a Design System for ODK Media

A Design System is a systematic approach to product development complete with guidelines, processes, components, and code. This makes the work easy for developers, and the product maintains its consistency overall.

Although ODK Media has a design system, each product has a different design system due to inconsistent product design. We have a mission to create a new design system that is consistent and scaleable and can accommodate all products during the redesign project to connect global teams on a common design language foundation.

CONTRIBUTION

Research
Accessibility Testing
Design
Usability Testing

ROLE

UI/UX Designer

Improve existing design systems for the ODK redesign project

To achieve the goals of the ODK redesign project, we need a design system that can help refine the quality of your product by making the experience more consistent, predictable and accessible.

The current design systems are unorganized

We have been using different design systems for each product, which caused high maintenance for designers and engineers and increased the user's learning curve. We audited the current design systems and got critical about the structures, styles, patterns, and components.

We benchmarked the most popular design systems and analyzed the structure of the design systems. Based on the competitive analysis, these design systems share common principles.
‍
Research Key Takeaway‍

Create an inclusive experience for different types of users who has visual, auditory, motor impairments, etc
Their components are designed to work seamlessly with each other
Strengthen the brand's identity across the product
Convey complex ideas in a simple way
Most of these design systems organized them into an initial structure of atoms, molecules, and organisms

Atomic design system

After the research, the design team pursued the atomic design system methodology and implemented the structure into our design system. The 'Core' design systems will contain foundations and share with all products under ODK Media. Also, each device will have separated molecules and organisms for productivity.

Improve accessibility for the TV apps

The TV experience occurs across varying amounts of space and needs to be legible from at least ten feet away. For that reason, we strived to comply with WCAG AA accessibility standards for users to navigate intuitively and easily from the distance.

Using design tokens closes the gap between designers and developers

Design tokens are all the values needed to construct and maintain a design system and applied consistently across designs, code, and platforms. It enhances communication and collaboration between designers and developers that can speak the same language and stay in sync across tools and languages.

Tested on various devices

Especially TV has many brands and sizes with different contrast and colors. I have tested different TV brands and sizes to ensure legibility and interaction are intuitive.

Reduces the time needed for quality assurance

We can easily update and maintain the design systems using an atomic design system. The atomic design library ensures that if an organization’s brand guidelines change, we don’t need to change the entire style guide. We have to update one primary component and remove the redundant ones.