ENDY DESIGN SYSTEM

design system

OVERVIEW

I developed and managed a comprehensive design system for Endy and assisted in the successfully integration of it into a CMS platform.

ROLES & RESPONSIBILITY

UX/UI Lead
Design system manager, accessibility enforcer, aligning with dev team, transitioning design system for headless ecommerce,

THE PROBLEMS

01 INCONSISTENT DESIGN

Inconsistent design can harm user experience, hindering usability and causing confusion. Due to the inconsistent designs, no system was in place, and the design process was impeded.

02 SLOW PROCESS

The absence of templates and a consistent communication framework between developers and designers significantly extended the time required to create or update new web pages.

03 LOW ACCESSIBILITY

The codebase and designs did not adhere to established web accessibility standards, which could lead to hindering usability for certain users on our website.

THE SOLUTION

The solution was to develop a comprehensive design system, utilizing the atomic design methodology.

GRID SYSTEM

By analyzing user data on screen size preferences, I determined the specific screen sizes for which we would design responsively.

BREAKPOINTS

Breakpoints were defined to ensure that our elements and assets display optimally on both large and small devices.

SPACING

The set spacing is templated in our design files to eliminate time spent on pixel-perfect adjustments.

To maintain consistent spacing across the site, I implemented an 8px spacing system for use throughout the design.

TYPOGRAPHY

The website adheres to the fonts specified in our brand guidelines, ensuring consistency.

TYPOGRAPHY BREAKPOINTS

I designed the typography system with a harmonious scale to ensure consistency across both small and large breakpoints.

COLOURS

Endy is a bold and vibrant brand, and the website reflects this by adhering to the brand’s color guidelines for consistency.

PRIMARY PALETTE

We primarily use Gravy as the dominant color on the website, with accents of Rubine to reflect the brand's bold identity.

SECONDARY PALETTE

Endy’s core colours—used primarily on the website, assuring Accessibility Standards while being true to the brand colours.

MONOTONE COLOURS

The monotone palette is used for backgrounds and overlays. White is used when we need a light text colour.

STATUS COLOURS

We use universally recognized status colors for indicators, such as errors and confirmations.

OTHERS

We utilized a variety of gradients, so to streamline our CMS workflow, we created templates for the frequently used gradients in hero banners to expedite the coding process.

ICONGRAPHY

The creative team is responsible for all iconography on our website. I have established guidelines for designers to ensure consistency across all icons.

16x16

We begin by designing the icons at a size of 16x16 pixels. These icons are not intended to stand alone and are frequently paired with accompanying text.

32x32

By scaling the icon size to 32x32 pixels, these icons can function independently and are utilized throughout the site with universal application.

48x48

By adding a circle around the 32x32 icons, we create 48x48 icons, which are designated for use in scenarios where we want to encourage frequent user interaction.

DECORATIVE ICON ILLUSTRATIONS

These icons serve an illustrative purpose throughout the site, enhancing the information presented about our products.

GUIDE

EXAMPLES

PATTERNS, PHOTOGRAPHY & ASSETS

We adhere to the brand guidelines regarding patterns and assets. Maintaining consistency across all brand touchpoints ensures that consumers can easily recognize Endy, whether on the website or in billboard advertisements.

UI ELEMENTS

I developed templates for frequently used UI elements in a primary Design System File for designers to apply across their projects. This template is also mirrored on the development side, ensuring that everything is pre-configured and ready for deployment.

The web team's objectives were to enhance site performance and increase production speed. To achieve this, we decided to develop a headless e-commerce platform by building our own CMS from the ground up using Sanity.

CLEAN CODE BASE & DESIGN SYSTEM

BETTER COMMUNICATION & FASTER PRODUCTION

INCREASE SITE SPEED & PERFORMANCE

With the design system already established as an atomic framework, the transition to the new CMS was relatively seamless completing the build in six months. Building the CMS fostered collaboration between developers and designers, reinforcing the concept of the site as a cohesive, living organism supported by a structured system.

GRID SYSTEM

All of our modules were streamlined and templated for integration into the CMS.

With all modules templated, communication with stakeholders has become more efficient, particularly regarding new projects and pages. After receiving a project brief, the team can assess whether any existing templated modules can be reused, significantly streamlining the project timeline. If the requested project necessitates the creation of a new module, we can better estimate the additional time required for completion.

KEY LEARNINGS

Creating and maintaining a design system has been one of the most significant learning experiences in my career. I have learned that a design system is not static; it is continuously evolving, adapting, and changing alongside the brand. However, it is essential and highly effective in enhancing the workflows of different teams.

Thank you for taking the time to explore my work on Endy’s Design System! Click here to check out the Endy: E-commerce project to see the design system in action.

← Previous Work

Next Work →