Design system

Led Wevise Design Systems creation, including foundations, 290 components and documentation

Overview

Context

I spearheaded the creation of a comprehensive design system from the ground up. This strategic project was aimed at harmonizing our product’s visual and functional elements, thereby ensuring uniformity, efficiency, and scalability across all platforms and teams.

Role

Led the end-to-end design of Wevise’s design system, partnering with designers, engineers, and PMs, and securing buy-in from the CTO, Director of Product, and CEO. Built a scalable style guide and reusable UI library grounded in Material Design and MUI. I conducted regular workshops and feedback sessions to ensure alignment and continuous improvement. V1 of the Wevise Design System included web components designed in Figma and developed in React and Storybook, focusing on responsiveness, scalability and accessibility standards.

The challenge

Before the implementation of the Wevise Design System, our product suite suffered from a lack of a unified design language. This led to inconsistencies in user interfaces and experiences across different platforms, resulting in increased development time, higher maintenance costs, and a fragmented user experience. The Wevise Design System was developed to address these challenges and provide a solution.

Old homepage

The challenge

Old homepage

Old onboarding

Old dashboard

Results

Developing a guide

A guide for atoms, components, naming guidelines, page name guidelines, component bucket list, a11y.

Developing a guide

A guide for atoms, components, naming guidelines, page name guidelines, component bucket list, a11y.

Collaboration with key stakeholders

Collaborated with the Director of Product and CTO to strategize the development and prioritization of components. Collaborated with the CEO to learn about platform concerns and brand image issues to incorporate feedback she gathered from stakeholders and users for the colour and typography of the design system.

Established design process

Establishing a process helped keep me on track and my collaborators in the loop by providing realistic ETAs on requests. This structured process ensured transparency and accountability in our workflow. I created a six-column workflow board to manage the design sprint and process.

Established design process

Streamlining documentation

Worked with the PM and CTO to write stories about component specifications. Created a backlog of work for developers to be productive and keep them informed of all component specifications.

Streamlining documentation

Worked with the PM and CTO to write stories about component specifications. Created a backlog of work for developers to be productive and keep them informed of all component specifications.