Wevise
Design system
Led Wevise Design Systems creation, including foundations, 290 components and documentation
Wevise
Design system
Led Wevise Design Systems creation, including foundations, 290 components and documentation
Wevise
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.
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.
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
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
Old onboarding
Old onboarding
Old dashboard
Old dashboard
Results
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
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.
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
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.
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.
Colour architecture
I created the naming convention and overall architecture. A screenshot of colour architecture and naming approach.
Colour architecture
I created the naming convention and overall architecture. A screenshot of colour architecture and naming approach.
Components designed
Components designed
Button component
Button component
Checkbox, switches, selection chip components
Checkbox, switches, selection chip components
Basic, multiline, single dropdown textfield component
Basic, multiline, single dropdown textfield component