top of page
Design System
The goal of this UI case study is to illustrate the transformation of a golf website through the implementation of a design system. The golf website, catering to both enthusiasts and professionals, required a consistent and visually appealing user interface to enhance user experience.
Challenges
Create a Unified Design Language
The project was a long term project with multiple designers involved, hence creating a design system was important to avoid errors and maintain consistency.
Facilitate Scalability
Allow for easy expansion and updates to accommodate future features and content.
Accessibility
With accessibility compliance laws varying from market to market, we wanted to focus our system around the Web Content Accessibility Standards (WCAG 2.1)
Cross-Platform Consistency
Ensure a consistent user experience across various devices and screen sizes.
My Role
My role was to maintain a design document that consists of foundations, components that could be referred by other designers.
Guide and oversee the junior designers.
TIMELINE
February - December 2022
We sought opportunities to improve the experience by communicating through visuals.
Style Tiles Inspirations
After doing more exploration on the essence we want to keep in our designs. Applying little permutation and combination on best we can take from the above style guides while keeping the sports theme intact, we came up with the below style tile as our reference for the design library
The Design Library
-
Developed a comprehensive design system document outlining the guidelines for each component. This document served as a reference for designers and developers.
-
Identified and defined core design components such as color palette, typography, iconography, buttons, and form elements.
Accessibility
Designing with accessibility in mind is not just a legal or ethical requirement; it also enhances the user experience for a broader audience.
CONTRAST
Maintain sufficient color contrast between text and background elements to ensure readability for users with visual impairments. WCAG provides specific contrast ratios that should be met for different text and background color combinations.
Impact
Consistent Branding
The design system ensured consistent application of brand elements, reinforcing the website's identity.
Enhanced Collaboration
Designers and developers collaborated more effectively, leading to a smoother workflow and faster iterations.
User Satisfaction
The unified design language and improved user experience resulted in increased user satisfaction.
bottom of page