✺ Design System ✺
Developing Media Exchange Group's First Design System
My Role
Project Lead, Product Designer
Team
Sarah Dovey - Product Head, Will Squires - Tech Lead
Industry Partner
Media Exchange Group
Timeline
1 Month
OVERVIEW
Building a design system from the ground up
When I joined the company as the first UX/UI Designer, there was no design system in place although the platform has been up and running. My task was to build one and scale up the design system as we progressed.
The Challenge: How can I start with a Design System that is simple, scalable, and can easily be adapted by future designers and engineers?
THE PROBLEM
Inconsistencies and lack of visual hiearchy
For example, the buttons used across the platforms lacked an importance hierarchy (such as primary and secondary buttons.) and were inconsistent in design.
DEVELOPMENT OF THE DESIGN SYSTEM
Starting with what we already had
As a complete, extensive design system takes time to build, I worked with what we already had and added components that were needed for other design projects on the platform at the time. I came up with six sections of the design system in the first phase.
01 Grid and indention
This section was guided by the standard practice for spacing systems, which I believed needed to be included in the design system to ensure consistency in spacing.
02 Typography
Utilising the existing font, Mulish, I added a font section containing all the sizes needed for different sections and components of the platform.
03 Colour
Along with the existing colors, I created a section comprising primary and neutral colours that will be used in various components and scenarios
04 Effects
I added an effects section to ensure a consistent shadow across the platform. This section is not final and will include more effects in the future.
05 Buttons
One of the most crucial element of the design system - the buttons. Previously, the buttons on the platform lacked consistency and clearly defined states. I have now made them very detailed, including important specifications for each button state, such as colours, border radius, font size and thickness.
06 Breadcrumbs
While working on another project for the platform, I was tasked with including breadcrumbs on each page. As I developed the breadcrumbs, I created a dedicated section for them in the design system. This section includes detailed specifications of the breadcrumbs, covering aspects such as spacing, colours, and font sizes.
REFLECTION
Rooms for improvements
As this was the platform’s first ever design system, I realised that there are still a lot of improvements that can be done. As the design system grows, I hope to make it more detailed, covering more components in the platform such as fields, cards, and more and fully integrate them into the Tailwind CSS framework that the developers are using.