Reducing development turnaround time by 84% with a new design system
Background
Omni Strategies is a B2B/B2C start-up in Ghana, developing and maintaining a diverse portfolio of digital products - from fintech to insurance, across web, iOS & android.
I joined the company as the first in-house designer. I worked with engineering, business operations and the PM to deliver designs for in-house and client projects.
Within the first year, I noticed our development process for features and products had significant flaws, causing friction between leadership & product teams.
Lead Designer
Engineering Manager
Product Manager
Product Designer
Content Designer
Frontend Engineers
The Problem
As a small (and expanding) team working on multiple end-to-end products simultaneously, there was a chasm between stakeholder expectations and deliverables. Some of the issues in delivery were as a result of:
Top-down product development approach.
Hardcoded and decentralised components.
My Objective
My Solution
A foundational Design System (named Omnibus) with assets that could easily be reused across our product suite. Based on our time and resource constraints, I prioritised the following:
An adaptable component library
Documentation on our research methodology
Content guidelines
Accessibility checklist (to adhere to in design & development)
Dev handoff guide
Adaptable component library
Working with engineering early to understand the stack and its limitations, I led the design of a (somewhat flexible) component library, studying some of the patterns used in Tailwind.
Why not get Tailwind CSS/Tailwind UI?
Simple, cost. While both the design and engineering teams liked the idea of using Tailwind, our goal remained to develop a system as efficiently (and affordably) as possible to secure leadership buy-in.
I focused on responsive component design and variable controls we could scale in the future with more resources.
Image — Representation of component controls based on input component created in Omnibus
Research Documentation
As a small company with limited resources allocated to research, I had successfully advocated for User Interviews, Surveys, and Focus Groups in previous projects.
The documentation serves to provide context on how and when to use each method, empowering other teams beyond Design to prioritise research.
Screenshot — Research page in design system file
Content Guidelines
This was built in collaboration with the Content Designer, using the Style Guides we had already built for our subsidiary brands as building blocks.
Accessibility Checklist
In collaboration with the other Product Designer and the Content Designer, I came up with a list of standard accessibility practices we needed to employ when building components and features.
I accounted for a minimum adherence to the WCAG 2.1 visual standards. Many of which would improve product usability for most people and reduce friction when submitting products to app stores.
Screenshot — Accessibility matrix for colors in design system file
Dev Handoff Guide
Working closely with engineering was key to understanding what was relevant in a handoff per project. We cut down communication turnaround by improving what we documented and annotated in files, who we included in Design Syncs and when we included them.
We identified the most relevant things for iterative annotation in files, ironically just before Figma introduced Dev mode in public beta. It improved the handoff significantly.
Screenshot — A dev handoff for a single component using the practices from the guide
Next steps: Onboarding & Adoption
I conducted workshops with different groups of stakeholders to create mutual understanding for the future. I focused on creating workshops for groups based on relevance.
For instance, Dev Handoff Workshop for the PM and Engineering team to understand the system of collaboration between the design and implementation.
Applying this system to the various products in the company’s stack was the next priority and proved valuable to our processes.
Impact
From 13 days to ~2 days
Reduced frontend feature implementation time by over 80%
Efficiency through collaboration
Increased collaboration between Design and Engineering
Engineering leadership buy-in
