ADEPS

Website redesign & development

ADEPS Kenya – Volunteer UX Designer & Developer

How to redesign and develop the ADEPS Kenya website to improve their online presence and pass from less than 1000 visitors a week to more than 27000.


Project Overview

The Alliance for Development and Population Services (ADEPS), a non-profit organization based in Kenya, is dedicated to enhancing communities through research and needs assessments. ADEPS’ overarching goal is to alleviate poverty and foster social and economic development within these communities. The goal of this case study was to redesign the ADEPS website and improve the online visibility and access of the organization.

My Contributions

I was part of a global team consisting of 4 UX Designers and 1 UX Researcher. My role was both UX Designer and Developer.

Tools Used

Introduction


Design Challenge

ADEPS website faced challenges in optimizing its online presence and inspiring engagement with the audience. Despite the organization’s compelling mission dedicated to community development and poverty alleviation, the website lacked visual appeal, cohesive messaging, and a user-friendly interface. This deficiency hindered the effective communication of ADEPS’ goals and the establishment of a meaningful connection with its target audience. The website’s shortcomings underscored the need for a redesign to address these issues and create a more impactful online platform that resonates with visitors, effectively communicates the organization’s mission, and fosters engagement.

Solution

ADEPS’ website will be revamped for a better user experience. This includes simplifying navigation, improving visuals, and telling compelling stories about ADEPS’ mission and impact. With a focus on engaging donors, interactive features, and accessibility, the redesigned site aims to reach a broader audience. SEO optimization will enhance online visibility, and user feedback will drive ongoing improvements. The objective is to create a clear, user-friendly platform that effectively communicates ADEPS’ dedication to community development and poverty alleviation.

Our team divided tasks equally, ensuring everyone could collaborate effectively. We divided each task to learn from every step, contributing our unique skills to achieve a balanced workload.

The process


Research

The first issue we had to overcome was that no one on the team worked before with ADEPS. We did not know about the website and how the organization worked. So, we started by meeting with stakeholders to understand the organization and the goals of the project:

  • Increase weekly website visitors.
  • Grow the number of donations.

Next, we focused on the website, performing a content audit, card sorting, and user journey.

Another obstacle we had to face was that none of us had previous experience in the NPO sector. So, I did some research to learn more about the area. I checked styles, and content of other similar websites.

At that moment we had more knowledge about the sector and some data to analyze. Let’s move to the next phase!

Solution

ADEPS’ website will be revamped for a better user experience. This includes simplifying navigation, improving visuals, and telling compelling stories about ADEPS’ mission and impact. With a focus on engaging donors, interactive features, and accessibility, the redesigned site aims to reach a broader audience. SEO optimization will enhance online visibility, and user feedback will drive ongoing improvements. The objective is to create a clear, user-friendly platform that effectively communicates ADEPS’ dedication to community development and poverty alleviation.

Our team divided tasks equally, ensuring everyone could collaborate effectively. We divided each task to learn from every step, contributing our unique skills to achieve a balanced workload.

User journey map and content audit of the legacy website.

Analysis

To tackle this problem, we performed a competitive analysis to examine competitors and their approaches in regards of design and content. After a meeting where we shared our findings, we concluded:

  • Non-profit websites similar to ADEPS offer a plethora of information: be attentive to how the information is organized,
  • ADEPS offers users to donate money as the main point of engagement,
  • ADEPS’s page lacks balance, especially with the text: visitor drop-off would increase
  • ADEPS, unlike its competitors, does not have a recognizable brand (this cultivates differentiation, emotional connection, professionalism, and differentiation)

Our team created an information architecture to improve navigation and usability.

Images from competitive analysis.

Design

Our design process began with wireframing, where we outlined the layout and structure of our interface. Once the wireframe design was approved, I developed a clickable prototype for user testing.

For our research study, we meticulously planned our approach, defining goals, steps, and questions. We carefully defined key areas for feedback and crafted post-interview questions to gain clarity. We conducted moderated online user interviews, analyzed the results, and synthesized insights to improve our wireframes. We then shared our findings with stakeholders.

As a team, we defined the design style guidelines, and I developed a design system based on them. Applying the design system to our wireframes, we created a Mid-Fi prototype. A second user testing, following the same guidelines as the previous one, validated our hypotheses, leading to the development of a Hi-Fi prototype. Incorporating feedback, we finalized a clickable Hi-Fi prototype.

Once we completed the web design, we started designing the mobile version.

Presenting our prototype to the customer resulted in 100% satisfaction, affirming the effectiveness of our design process. This comprehensive approach ensured that our final product met user needs and exceeded expectations.

Images from the design phase: first wireframe; research study and conclusions; design system; Hi-Fi prototype; final responsive design.

Implementation


To avoid increasing the organization’s expenses, I decided to keep the current host and its hosting plan.

The first version of the website, the one we wanted to improve, was created in WordPress and Elementor. To minimize the risk of not finding any developer in the future, I chose to develop the new website with the same tools. This decision allows non-technical designers to make changes to the website in a quick way. Especially if they only want to update content.

I used a predefined template, and I was able to keep customized CSS under 100 lines of code.

Using a subdomain, I created a pre-prod environment to get feedback from the team and the stakeholders. It will be valuable for reviewing future updates before deploying to prod.

Even though the website is not pixel-perfect regarding the design, it is close. The team was flexible enough to accept some changes that improved the site’s performance.

Before After

Before & After: A Visual Transformation – Slide to see the improvements made during the redesign of the website. Notice the enhanced layout, updated color scheme, and improved user experience that reflect the brand’s evolution.

Results


  • Performance score improved from 71 to 99,
  • Every page in the original website had SEO issues. With our new design, we reduced them to 0.
  • I reduced the number of pages from 48 to 12. It removed redundancy and unused and unnecessary items that could create confusion and decrease performance.
  • I edited the page to have the best SEO score.
  • During the first week after the deployment, the new website attracted 27.000 visitors. Numbers before were close to a few hundred, always under a thousand.
  • With all these numbers joining the user and customer satisfaction growth to 100% we can claim that we met our goal of improving the online presence of the organization. Even though the stakeholders couldn’t share the numbers of the donations, they seemed happy about the results. Moreover, there is a high correlation between visitors and donations, especially when they are increased 27 times.

Hostinger.com screenshots SEO After and Before.

Challenges & Room For Growth


  • Working with insufficient low-quality images: we had to find stock pictures since we didn’t have high-quality images. Initially, we attempted to use the photos provided by ADEPS for the website, but they were not of sufficient quality. Even though I tried to enhance them with Photoshop, once we used them, they appeared pixelated. Thus, we opted to use stock high-resolution pictures while keeping the ADEPS pictures for other explanatory purposes, such as in carousels to showcase their contributions to society.
  • Absence of domain ownership: The site is currently down due to a dispute with the previous developer, who owns the domain. ADEPS lost the domain over payment issues and now needs a new one to rebuild the website. Fortunately, I have site backups and will restore it once payment is made. This setback highlights the need to improve domain management, payment procedures, and contingency plans, fostering organizational resilience. Looking back, I should have validated the domain ownership at the project’s outset to avoid this issue.

Learnings & Takeaways


  • One of the things we learned was that we had limited time and resources. We never had a UX writer or a Project Manager and had limited access to user research that could have improved the results. We were volunteering and didn’t have as much time as we wanted. However, we got well organized, and during the journey, we discovered each member’s best skills and utilized them to achieve the best results.
  • I had to quickly adapt to the technical environment I was given for the good of the solution. I had to learn how WordPress, Elementor and Hostinger worked. My effort led to valuable learning, enhancing my skills and knowledge, ultimately contributing to personal and professional growth.
  • A great team: we had a strong synergy that fostered collaboration, innovation, and productivity. We used everyone’s strengths with effective communication and mutual respect. We efficiently achieved the project goals by creating a cohesive environment where ideas flourished. Thank you guys, it was great working with you!

Screenshots from a wireframe design meeting and the closing project session.

Check other projects

Let’s connect!

If you’d need some help, like to discuss a project or require more information, don’t hesitate to contact me.