Our team was tasked with working with a live non-profit client to redesign their website. The objective of the project was to increase site useability to better support the organization’s mission and goals.
As Design System Architect, I lead the team in codifying design system standards for the organization that supported our project objectives.
The Organization
The non-profit we worked with for this project was Adopt a South African Preschool (ASAP). ASAP is a faith-based organization that provides developmental toys to preschool students in South Africa, trains mentors and caregivers to become educators, and helps to create new preschool locations to expand their reach to more children. Additionally, ASAP seeks to educate people living outside of South Africa on both South African cultural issues and the importance of early childhood education.
Client Objectives & Website Analysis
For their website redesign, the ASAP team was very keen to increase user traffic and broaden their reach to a younger and more varied audience. By broadening their reach to a wider audience, the organization hopes to also increase donor traffic. With increased funding, the organization can continue to grow and scale their programming efforts and have a greater impact in the South African communities in which they operate.
When we began the project, the version of the website that was in place had several design issues that served as an impediment to the organization’s goals stated above. In conducting a heuristic analysis of the website, we uncovered several key areas of focus when redesigning the site:
​
-
Color & Style: More limited use of bright colors, accessible color combinations, focus user attention on action via the use of color.
-
Limited Design Elements: Increased use of iconography, uniform font sizing and spacing, more unique use of shapes throughout the site.
-
Tone & Content: Amplify messaging and organizational transparency through redesigning site architecture and the tone of the content presented.
​​
These findings gave a fantastic starting point towards building a more visually accessible version of the ASAP website.
The original version of the site included a lot of text that was difficult to read. The red buttons against a green background we inaccessible to people who experience red-green color blindness.
Redlining the heuristics of the website enabled us to see where we could improve upon the design system elements in future versions.
Running color accessibility tests against the standards of the Web Content Accessibility Guidelines (WCAG) ensures we can use color in a way that is accessible to all users.
Design Inventory & Audit
Our initial style tile included an audit of all the design elements being used on the original version of the site, and informed what additional items would need to be created in future versions.
With our heuristic analysis and research in place, we needed to do a complete audit of the former design system elements being used throughout the site, so we could figure out what needed to be added or iterated upon in future versions. This process was fairly simple, as the site did not contain very many pages or many design elements, nor did the organization have strict brand guidelines that they were adhering to. By building a style tile, we were able to capture the design elements that were in use, and also begin creating an auxiliary list of items that were needed for site improvements.
The organization was also undergoing a brand redesign at the same time, and as part of this were already in the process of selecting new colors, logo styles, and fonts. This was actually serendipitous for our work, as we were able to provide input and guidance on some of the choices that were made while building out the updated design system.
Rebuilding the Design System
At the same time we were assessing the site design system, we also created new website wireframes, architecture, and a new homepage mockup, all based on our initial design research. These artifacts further helped us to identify an inventory of which design elements we would need to keep or change for both desktop and mobile design - everything from typography to iconography, grids to button components, input fields to mobile cards, and more.
An important step in the creation of these components was gathering feedback from the client. We met weekly with them to show them things like the homepage mockup and a new style tile with suggested broader changes, and get their thoughts on the usage of components that we were creating to ensure that their vision was in alignment with ours throughout the process. Keeping the client in mind during this phase was key, as we would also need to pass along usage notes with our design system for future site development.
The original site only included two button states: normal & hover.
The updated style guide included all button states, icon states, as well as versions for CTA and non-CTA buttons. These additions increase useability by providing the user with cues about where to direct their attention and confirmation of their chosen actions when interacting with button elements.
The original site had no iconography. By adding icon sets with statuses and states, user attention can be more easily drawn to important actions on the site.
User Testing
In addition to gathering feedback from the client throughout the design system rebuild process, we also completed user testing on both the homepage mockup which contained the bulk of our new design elements, as well as the new website architecture.
Feedback on the new mockup and design system was overwhelmingly positive. We ultimately implemented a more restrained use of color, and reimagined components to include elements like more rounded corners to create a softer and more playful tone across the site. The incorporation of line patterns carries the user’s eye down the page and redirects attention to key elements and actions.
Our initial mockup included a search bar, and put the Call to Action (CTA) message over the hero image.
Users expressed that they wanted to see more of the hero image, so we moved the Call to Action down the page and removed the search bar.
Final Design System Recommendations
Following the completion of user testing, we presented and handed off the final style guide to the client for implementation, concluding the site redesign project. This new style guide included over 17 different components and patterns that did not previously exist on the former site, with guidelines and specs on how to use each item.
When paired with the website architecture redesign that was also finalized during this project, the updated Adopt a South African Preschool website design system we hope to increase both the transparency and credibility of the work that ASAP is doing. Based on our research, this has strong potential to increase donor engagement and broaden general awareness of ASAP as an organization, thus broadening ASAP’s overall impact and reach.
Ultimately, by providing guidance for all design elements, such as brand color usage and text hierarchy, we hope to foster the consistent use of design elements during site development. This creates a more cohesive and professional visual design that engenders trust between the user and the organization.