top of page
Logo-14.png

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.

​

Cover-31.png

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

screencapture-theafricainme-org-what-we-do-2023-08-21-16_20_22_edited.jpg
screencapture-theafricainme-org-2023-08-21-16_18_21_edited.jpg
screencapture-theafricainme-org-who-we-are-2023-11-10-12_03_32_edited.jpg
screencapture-theafricainme-org-sponsor-families-2023-08-21-16_22_40_edited.jpg
screencapture-theafricainme-org-get-involved-2023-08-21-16_23_07_edited.jpg

After

Screen Shot 2024-02-11 at 8.36_edited.jpg
Screen Shot 2024-02-11 at 8.36_edited.jpg
Screen Shot 2024-02-11 at 8.36_edited.jpg
Screen Shot 2024-02-11 at 8.36_edited.jpg
Screen Shot 2024-02-11 at 8.36_edited.jpg

CTAs and Components

In the evaluation, I discovered a multitude of diverse button styles.

Before

Bottons.png

After

Bottons-3.png

Typograph

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

Before

Bottons-4.png

After

Text.png

Design guidelines to design system

Cover-16.png

Color styles

Font styles

Cover-19.png
Screen Shot 2023-11-15 at 12.20_edited.p
Cover-17_edited.jpg
Screen Shot 2024-02-12 at 7.49_edited.jpg

Benefits

  1. ​​Reusable assets

  2. Enhanced consistency

  3. Boost efficiency

  4. Long-term value

  5. Increase user trust 

  6. Improved collaboration

  7. ​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.

bottom of page