THE AFRICA IN ME
Stable Foundation for Enduring Success
In this case study, I’m going to share my experience of developing a design system for The Africa in Me. At The Africa In Me we were 3 product designer and I was a lead designer of the team.
Problem
Why did we need a design system?
-
Reusable Assets:
Utilize system components for quicker and consistent design and development.
-
Ensure Consistency:
Maintain a unified look and feel throughout the website.
-
Efficiency Boost:
Save time in creating and troubleshooting new design elements.
-
Long-Term Value:
Establish a scalable and sustainable foundation for future projects and team members.
Heuristic Evaluation
Evaluation the current website
After identifying the need for a design system to maintain consistency, we conducted a thorough evaluation of our current website. Aligning all the pages side by side revealed surprising findings: numerous inconsistencies in button styles, font sizes, weights, and other design elements across the platform.
This evaluation underscored the urgency of implementing a comprehensive design system to rectify these issues and ensure a cohesive and standardized user experience.
Uncovering design inconsistencies
In our evaluation, we discovered a multitude of diverse button styles—nine variations, to be exact. Displayed beneath this text are snapshots of these varied buttons, illustrating the inconsistencies that contributed to the lack of uniformity across our platform.
Solution
In response to this issue, we present our solution: a set of designed buttons structured as components, strategically condensed into two variations. This strategic adjustment aims to simplify and standardize the button styles, ensuring a more cohesive and harmonized user experience throughout our website.
Inconsistencies in text
Upon evaluation, our platform initially presented a complex array of text styles, 6 heading variations and 5 body text styles. These numerous styles contributed to inconsistencies and cluttered aesthetics throughout our content.
Solution
To address this challenge and promote a more standardized and visually cohesive experience, we successfully streamlined the text formatting, reducing the heading styles to 3 clear variations, and consolidating the body text into a single, unified style.
Design system
Crafting a consistent design framework
We consciously selected the IBM (Carbon Design System) guidelines for their adherence to industry standards, cleanliness, and ease of use. Our decision to utilize this framework within our design process reflects a strategic choice aimed at ensuring consistency, user-centricity, and a high-quality experience for our platform's users.
Color Styles
Here are the color styles outlined in our design system guidelines.
