Creating Design System
ENHANSING USIBILITY
In this case study, I will share why I found it necessary for the organization to have a design system and clear guidelines, along with my journey through this process and what I learned from the project.
Role:
UX/UI Designer
Client:
The Africa in Me
Category:
Web Design (Design System)
Duration:
8 Weeks
Year:
2023
About The Africa In Me
The Africa In Me (AF. IM) is a non-profit organization dedicated to serve and bring relief to the less fortunate families.
Website:
Challenge
The Africa in Me is a non-profit organization, therefore, so many designers and web developers come and go, leading to inconsistency on the website due to the lack of a design system and clear guidelines. Also, finding the right design becomes difficult for new team members, causing confusion and frustration.
Solutions
Built a design system and design guidelines to keep the consistency.
Benefits
-
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.
Evaluation the current website
After identifying the need for a design system to maintain consistency, I 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.
Uncovering design inconsistencies
In the evaluation, I discovered a multitude of diverse button styles.
Before
Solution
In response to this issue, I present my solution: a set of designed buttons structured as components, strategically condensed into two variations.
After
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, I successfully streamlined the text formatting, reducing the heading styles to 3 clear variations, and consolidating the body text into a single, unified style.
Before
After
Crafting a consistent design framework
I selected the IBM (Carbon Design System) guidelines for the, cleanliness, and ease of use.
Color styles
Here are the color styles outlined in our design system guidelines.
Font styles
Here are the color styles outlined in our design system guidelines.
Before
After
Before
After
Takeaway
Creating a design system from scratch is not easy, but I've learned that it's necessary, much like laying a strong foundation for any building. It give me the opportunity to work with Carbon Design System in this project.