Evaluate Website & Developed Design Guidelines
​
Developed design guidelines, considering brand identity WCAG accessibility guideline for more accessible website and enhanced implementation speed, benefiting design teams involved in daily projects.
​

Role:
UX/UI Designer
Client:
The Africa in Me
Category:
Web Design
Year:
2023
Project overview
The creation of the new design system centered around elements such as the grid system, typography, colors, CTAs, and components. This initiative optimized workflows, resulting in quicker project timelines and establishing a unified design system as a robust foundation for the entire team.​​
Role
A UX/UI designer, responsible to enhance user experience and accessibility on The Africa in Me website.
​
Accomplishement
4x increase in implementation speed time
70 score on WCAG accessibility checker
​
Before
After
Problems
1. Inconsistency on the website
-
Cause a negative impact on brand representation and user trust.
​
2. Delays in implementation
-
The lack of a design guideline caused designers to spend extra time finding the correct styles, leading to increased implementation time and delays.
-
Reduced the effectiveness of designers, causing confusion and frustration.
Approach
1. Evaluate a current website
-
Identifying inconsistencies and areas for improvement.
​
2. Follow WCAG guidelines
-
The lack of a design guideline caused designers to spend extra time finding the correct styles, leading to increased implementation time and delays.
​
3. Design guidelines
-
Promoting a unified design language across the platform.
​
4. Documentation
-
​Created detailed documentation to serve as a reference guide for future projects.
Redesign hero sections
From the survey and user feedback: One out of five users did not realize that some pages contained additional content beyond what was immediately visible.
Before





After





CTAs and Components
In the evaluation, I discovered a multitude of diverse button styles.
Before

After

Typograph
6 heading variations and 5 body text styles -----> 3 heading styles and 1 body text
Before

After

Design guidelines to design system

Color styles
Font styles




Benefits
-
​​Reusable assets
-
Enhanced consistency
-
Boost efficiency
-
Long-term value
-
Increase user trust
-
Improved collaboration
-
​Accelerated implementation
Takeaway
This project taught me how a design system can benefit businesses, designers, developers, and users. It streamlined the team's workflow, saved time, and made collaboration smoother. It also significantly enhanced the brand's value through consistent design.