‎Design system implementation for a SaaS startup

‎Design system implementation for a SaaS startup - WYNK

Aisosa Obasohan

Mobile Designer

Product Designer

UI Designer

Figma

Jira

Notion

Overview

Wynk is super app solution with Payment, ride-hailing and package delivery services in one mobile application.

Project Goals

This project was aimed to:

Improve mobile app visual inconsistency.

Improve team and engineering collaboration.

Create a single source of truth for future team onboarding.

Project timeline - 4 weeks

Outcomes

I led the design and implementation of the company’s first design system - Enhancing team collaboration and cohesiveness across multiple product features.

The first draft of the design system led to an 80% increase in team workflow and engineering collaboration.

Design highlights

Building Blocks

App UX audit and Inventory

To begin, I conducted a UX audit on the app to provide evaluative research into the app’s existing interface which helped me to:

Identify relevant design components to Facilitate the design systems documentation.

Uncover insights into key areas for improvement.

Map out hidden user flows that seemed unclear. Tap here to view

App UX audit

Defining clear objectives.

After concluding with the UX audit, I defined 3 main objectives to help guide my design decisions when building the design system.

Design objectives

Starting with the foundation.

I focused on getting the foundations right first because this would determine what the larger blocks and components were gonna look like.

1. Colour style

The palette for the colour style was built based on the company’s brand colours, with other colours being added as complements.

Fewer shades were used to minimise decision time and also to prevent the team from having any technical debt in the future due to redundant colour shades.

Designing for accessibility

In compliance with WCAG, I used a colour contrast checker to ensure the base colours and their respective shades were accessible. Tap here to view

Each colour shade with its specific use cases was then defined and documented in the team library enabling everyone to access it.

2. Spacing & Grid

An 8pt grid system was adopted for the design system, meaning all elements were sized and spaced at even multiples of 8.

For example 16, 24, 32, 48, 128, etc.

3. Typography

Wynk's main brand typeface was Uber Move as specified by the brand designer.

To mitigate redundancy, I ensured to adhere to using just a single typeface with fewer font sizes for the design system.

All font sizes with respect to their line height were scaled using our adopted 8pt grid system. Using the formula

Line height = Size * 1.3

Curating the component library.

I approached designing components using the Atomic design approach to ensure components were created hierarchically.

Atoms → Molecules → Organisms → Template

We kept components to a minimum initially. As we designed, we added more based on needs. Each component's state and use case was also documented on the go.

Nomenclature.

We used the Global Token naming convention for storing most of our design decisions since it was easier and took less time to implement given the deadline we had.

To store more information about the context of use for each style/component UI, I relied on Figma’s component description modal.

Nomenclature

Design Documentation

Measuring outcome.

The first draft of the design system led to an 80% increase in team workflow and collaboration because most components were built-in and accessible from one source document.

Easy and faster onboarding of new design and dev hires

Better impact on our team structure and communication during design handoffs to developers.

Like this project

Posted Jan 9, 2024

Building and scaling the company’s first design system to facilitate better team workflow and product outcome.

Likes

Views