top of page
Screen Shot 2023-11-15 at 12.20_edited.p


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.


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.

Desktop - 1-3.png

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.


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.


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.

Screen Shot 2023-11-15 at 12.20_edited.p
bottom of page