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 (Design Guidelines)
Year:
2023
Overview
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.
​
Role
A senior UX designer, responsible to enhance user experience and accessibility on The Africa in Me website.
​
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 guidelines. Finding the right design becomes difficult for new team members, causing confusion and frustration. On the other hand it cause a negative impact on brand representation and user trust.
​Solution
Developed a design guidelines to keep the website consistency, enhance brand representation, and build trust and loyalty among users.
Benefits
-
Reusable assets
-
Enhanced consistency
-
Boost efficiency
-
Long-term value
-
Increase user trust
Discovery phase
Evaluation the Current Website
After identifying the need for design guidelines to ensure consistency, I conducted a thorough evaluation of our current website. Comparing all pages side by side revealed surprising findings: there were numerous inconsistencies in button styles, font sizes, weights, and other design elements across the platform. Additionally, I reviewed the recent team survey and identified another key issue.
One out of five users did not realize that some pages contained additional content beyond what was immediately visible.
​Solution
In response to research findings I recommended two solutions. The team ultimately chose the seconded proposed recommendation.
​
-
Visual Indicator for Scrolling:
Implement subtle visual indicators (such as arrows or animations) to encourage users to explore further content by scrolling down.
-
Narrower Banner Design:
Redesign banners on each page to be narrower, allowing users to preview the subsequent content and encourage them to scroll further.
Input to action
Uncovering Design Inconsistencies
Problem
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
Problem​
Inconsistencies​ in text​, 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.
Before
Solution
To address this challenge and promote a more standardized and visually cohesive experience, I streamlined the text formatting, reducing the heading styles to 3 clear variations, and consolidating the body text into a single, unified style.
After
Design guidelines
Crafting a Consistent Design Framework
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.
Takeaway
Establishing solid design guidelines not only streamlined the team's workflow but also significantly enhanced the brand’s value. These guidelines ensure a consistent and professional appearance, conveying to customers that The Africa in Me is a well-managed and trustworthy organization. This foundation of consistency and care builds trust and loyalty, reinforcing the brand's credibility and fostering a positive user experience.