Go back home
Q3 2023
Q3 2023
Design System v1.0 📂
Design System v1.0 📂
Design System v1.0 📂
⚠️ Hi there! This is a minimised version of this case study. Please, grab a bigger screen for full the experience.
Product vision: Vegeel aims to help businesses across Africa automate their compliance and cybersecurity solutions.
Contributions: As the design lead on this project, I took the responsibility of auditing the UI components to create a library that consists of reusable and customisable components which were used by the designers in my team to create cohesive interactions and interfaces. I worked alongside engineering, and other stakeholders to deploy this project.
Product vision: Vegeel aims to help businesses across Africa automate their compliance and cybersecurity solutions.
Contributions: As the design lead on this project, I took the responsibility of auditing the UI components to create a library that consists of reusable and customisable components which were used by the designers in my team to create cohesive interactions and interfaces. I worked alongside engineering, and other stakeholders to deploy this project.
Role
Role
Role
Lead Product Designer
Lead Product Designer
Lead Product Designer
Industry
Industry
Industry
Security and compliance services
Security and compliance services
Security and compliance services
Team
Team
Team
Dami/Product Designer
Dami/Product Designer
Dami/Product Designer
KB/Product Manager
KB/Product Manager
KB/Product Manager
Abdul/Eng. Lead
Abdul/Eng. Lead
Abdul/Eng. Lead
and other Stakeholders
and other Stakeholders
🙁 Challenge
🙁 Challenge
🙁 Challenge
The biggest challenge was due to inconsistencies in design elements, components, and resources across the team of designers I was building. This made it difficult to achieve consistency and efficiency in our design processes, ultimately hindering the progress and success of the project as a whole.
😊 Results
😊 Results
😊 Results
A system which led to industry standard development, reduced code duplications, improved team collaboration, and increased product scalability. These factors had a significant impact on project deliverables and team motivation, choosing appropriate solution that meets requirements.
Problem discovery
Problem discovery
Problem Category / Consistency, Efficiency, Collaboration
One of my first responsibilities as a founding designer was to create the initial designs and demos for the product based on the early project brief; during this time, I wasn't focusing on a design system or components, and by the time I moved to design lead and started hiring designers on my team, the need for a design system became clear.
Not only for aesthetic reasons, but also to standardise our product and provide designers with reusable components to increase the pace and efficiency of their workflow.
Problem Category / Consistency, Efficiency, Collaboration
One of my first responsibilities as a founding designer was to create the initial designs and demos for the product based on the early project brief; during this time, I wasn't focusing on a design system or components, and by the time I moved to design lead and started hiring designers on my team, the need for a design system became clear.
Not only for aesthetic reasons, but also to standardise our product and provide designers with reusable components to increase the pace and efficiency of their workflow.
The process
The process
I started the process by conducting research to analyse competitors, their target audiences and industry trends. I also reviewed the existing design elements to identify any pain points or inconsistencies that desperately needed improvement.
The initial research helped me especially during the early conceptualisation of the new brand and visual identity of Vegeel — a crucial step when conducting a full rebrand and redesign of the product and platform.
Before Design System
This is the earliest for the progress meter. Due to tech. feasibility, this version was scraped and refined
After Design System
We took out the % calculator and relied on colours to give users feedback on stages as they're complete. Users are also able to shuffle through using this as well
Purpose
Purpose
Why do we even need a design system?
Earlier components were fragmented and inconsistent. Also, the previous ones left a lot to individual interpretation. As a result, the design and engineering teams lacked a common understanding of process, terminology, rules, and UI patterns.
To simplify our design process by ensuring consistency for the product's MVP, I worked on an updated brand identity, colour palette, typography, intuitive icon library, and more. This really enhanced our product development process by scaling design throughout an organisation, resulting in better UX, UI, and product delivery
Documentation
Documentation
Documentation is important to an effective library allowing the team quickly and efficiently make consistent decisions. I created a detailed documentation that would support every single aspect of our design system, and also be organised, consistent, and easy to find and use.
I referred to industry standard design systems such as Material and UntitledUI, and some others for some good practices, guidelines and tools that we could apply in our design system. Once the Figma components were approved, I moved them to a Figma components file, a shared library of assets that my team could use to drag and drop while working on their designs.
“In her role as design lead, Dami showed a rare mix of creativity, technical skills, and meticulous attention to detail. Her ability to translate complex concepts into intuitive and visually appealing designs is truly remarkable. She has a keen understanding of user/business needs, and consistently delivers solutions that exceeds expectations.”
“In her role as design lead, Dami showed a rare mix of creativity, technical skills, and meticulous attention to detail. Her ability to translate complex concepts into intuitive and visually appealing designs is truly remarkable. She has a keen understanding of user/business needs, and consistently delivers solutions that exceeds expectations.”
Dabi Taiwo
People Operations Manager