African Development Choices

Client:

Services:

UI/UX Design, Responsive Design, Web Design, Project Management

Website:

African Development Choices

African Development Choices (ADC) is a UK-based start-up and social enterprise, which focuses on reducing poverty in Africa by increasing access to essential services such as; clean water, sanitation, and hygiene (WASH). In my role as a Senior Digital Designer, I was responsible for revamping and modernizing the website of African Development Choices. The main aim was to create a user-friendly, informative, and visually appealing website that would cater to the needs of prospective volunteers, donors, and grant partners. A crucial aspect of the redesign was to ensure that the website reflects the values and principles of the non-profit, while also promoting transparency.

Project background and description

To establish a strong digital presence, African Development Choices (ADC) must ensure that its mission, goals, and impact are effectively communicated to its target audience, including supporters, grant funders, and other NGOs/NPOs. This can be achieved by developing a comprehensive website that provides detailed information on the organization’s mission, vision, and projects. In addition, it provides opportunities for involvement such as volunteering and donating. The website should also feature updates on upcoming events and news, and a blog to showcase stories about ADC’s work.

The problem

The previous ADC website was created during the organization’s inception and had an outdated design and layout. The website’s color scheme heavily featured orange, which differed from the brand’s established color scheme, potentially confusing users who were familiar with ADC’s social media branding. This lack of visual consistency raised concerns about the website’s authenticity as the official platform for the organization. The website’s brand identity did not align with the established branding, and the provided information was unclear and lacked transparency. As a Senior Digital Designer, my primary responsibility was to resolve the visual communication issue and ensure that the website’s design aligned with the organization’s brand identity.

Objectives

The New Website Project had straightforward goals and objectives, which included modernizing the website’s design, organizing existing content for improved user accessibility, and aligning the new website with African Development Choices’ values, including transparency and accountability, impact, sustainability and empowerment. Additionally, the project aimed to provide supporters, grant funders, future volunteers, and other NGOs/NPOs with comprehensive information about the organization’s current projects.

First Iterations

To start the New Website Project, I analyzed the existing ADC website to plan a clearer and more accessible design that aligned with ADC’s brand guidelines. The project team met regularly to discuss designs and received feedback during rigorous feedback sessions. The designs were created in Figma and then handed over to the web developer to build the website.

Our UX/UI team conducted two rounds of user research interviews through video calls, during which users provided real-time feedback on the prototype website’s design, usability, accessibility, and content. Through the user research process, we learned that we needed to prioritize content transparency, and some users found the color contrast too high and the page layouts too unclear.

Design Process

To create a modern, clear design, the pages were designed with ample white space and clean, visual layouts to highlight the key information. To focus on African Development Choices’ work, the use of community photographs was limited to those that directly showed the projects being worked on, such as the Nyansakia II Primary School #SupportWaterRights crowdfunding campaign. The yellow-black-white color palette was retained, with light grey added to section backgrounds to soften the contrast between yellow and black.

Creative Solution

To resolve the communication issue, I designed a new website with a modern and professional aesthetic that was consistent with the organization’s brand. I began by crafting a creative brief to ensure that all stakeholders were on the same page and working towards the same goals. I then created a wireframe of the website, which included a home page, about us page, contact page, and blog page. I kept the color scheme consistent with the established brand identity and used clear typography and visuals, such as icons and photographs, to communicate information in a concise and visually appealing manner.

Lastly, I implemented a user-friendly navigation system to ensure that users could easily access the information they needed from any device and resolution. Overall, the new website had a modern and professional design that was consistent with the organization’s brand and provided users with an intuitive and transparent platform to access information. The website received positive feedback from members and stakeholders, and ADC was able to further their mission and engage with their audience more effectively.

Brand Manual Guidelines

An updated Brand Manual was needed to help new & existing volunteers to create/edit brand assets that were consistent with the Brand Colours, Typographies, Image Guidelines & Social Media Style. Along with the actual design of the Brand Manual itself, new sections of Brand Guidelines needed to be developed, such as a cohesive Social Media Style, Web Guidelines & a Photo Style.