International Aid Web Redesign — UX Case Study

This case study documents the design process and key learning I experienced as I completed my second Client Project in The UX Design Professional Program at RED Academy. Our team undertook a full redesign of the International Community Empowerment Foundation website, a non-profit that supports community driven development in Tekera, Uganda.
Project Timeline | 3 weeks

The Brief

0.1 — The Team

The International Community Empowerment Foundation (ICEF) redesign team consisted of myself, Luciano D’Ippolito, Tiffany and Neeko Collada.

0.2 — The Challenge

The International Community Empowerment Foundation (ICEF) is a wonderful and truly unique development organization currently working in the village of Tekera Uganda. We were approached by our client to redesign their website to better showcase their work and highlight ICEF’s unique approach.

0.3— Client Goals

  • Create a professional and current front facing online home for the organization that reflects the amazing work it does and reinforces its legitimacy.
  • Highlight ICEF’s unique development philosophy and model. Show users HOW their approach works and differentiates them from other traditional development organizations
  • Creatively highlight the foundations programs and make the site more interesting and enjoyable to interact with
  • Increase awareness and learning of the different programs that ICEF offers at Tekera and the impact they are having
  • Added By Us — Inspire users to easily support ICEF by taking part in one of their various giving programs

Additional Specific Asks

  • Section for updates from the field, and a way to update the site that requires minimal amounts of data.
  • Allow applicants to apply online for internships

1.1 — Organisation Research

After reading through the brief and exploring the current website it was still a bit tricky for us to understand exactly what ICEF was. We prepared a number of clarifying questions for our client kickoff meeting and this is what we learned.

ICEF has a Canadian team working out of Vancouver Canada and a fully Ugandan team working on location at the Tekera Resource Centre. What sets ICEF apart is their strict dedication to creating real long term change that can one day be completely self sustained by the community it serves. ICEF’s work is currently centered in the village of Tekera, Uganda where they manage the Tekera Resource Centre (TRC). At the TRC they provide primary school education, medical care, women’s empowerment programs, vocational school training, a community farm and a number of other programs that work together to support the village of Tekrera and currently fund 1/3 of the program itself. Traditional foreign aid programs have a tendency to come in, work for 3–5 years on a project and leave, only to have the project fall to ruins after the money and foreign workers leave. ICEF’s community empowerment approach and vow not to leave until the project is fully self sustainable is what sets them far apart from other organisations and makes their work so effective. To simplify, the client offered the phrase “a hand up, not a hand out” to exemplify their approach.

1.2 — Domain Research

We started by getting familiar with websites of 15 or so prominent non profits like Unicef, WWF, Oxfam, and Amnesty International as well as a list of websites our client liked that she had prepared. We were looking for common and effective navigation and Information Architecture patterns, marketing funnel strategies, strategies for donation and support Calls to Action (CTAs), home page messaging, and overall visual branding themes.

Nav & CTA Patterns

There was a very common and effective nav pattern that we thought would likely be an effective way for us to achieve the client’s goals of highlighting their philosophy and work. We found an amazing website that utilized a map to add exploration and interactivity to the experience. Nearly every website had loud and proud “donate” CTA highlighted prominently in the nav.

Use of Here Images

Almost all of the development sites we looked at had large hero images which we liked. Our client had also given us a goldmine of beautiful photographs of their work and the people of Tekera which we couldn’t wait to showcase.

Objectifying Imagery

Next we explored messaging voice. Most of the development websites we looked at had images of people struggling, the standard world vision strategy. When we discussed this with out client she was glad we asked because she very specifically didn’t want to objectify the people of Tekera on the website. Instead would utilize the “hand up” mentality and show images of people thriving and working hard to improve their community.

1.3— Interviewees Requirements

Next we also outlined our core website users and the resulting requirements we would be looking for in interviews to learn about our users.

  • People who donate to NGOs
  • People who have worked or volunteered for an NGO
  • Subject Matter Experts (People who have studied or are specifically knowledgeable about International Development

Our client was also kind enough to provide an additional list list of board members and donors to interview.

1.4 — What We Discovered

After our interviews we recorded our key data points on sticky notes and used an Affinity Diagram to analyze the data. By grouping similar data points together we were able to draw a number of conclusions

User Goals of Website Visit

  • Learn & Evaluate the organization based on a set of recurring key decision factors
  • Donate or Support the org in some way (Donation, Student Sponsorship, Community Project)
  • Look for evidence or news of impacts the program is having (checking to see a past donation is making an impact)

Key Evaluation Decision Factors

  • Admin Fees (Where Does The Money Go?)
  • Approach & Model (Do I agree with their approach?)
  • The Team & Story (Who is organizing this)
  • Evidence of Real Impact
  • Value Fit (Does this organization align with my values)

1.5— User Persona

From our interviews we created two core user personas to keep in mind while we began planning and making design decisions.

2.1 —Identifying Problems On The Current Site

Next we did a thorough design and user experience audit of the current website and noted what we were working with.

Navigation & AI

  • Confusing navigation and Information Architecture
  • Unclear and confusing visual hierarchy of information
  • Not accurately tailored to the organization and website goals
  • Hidden Blogs don’t have a home, hard to navigate to them

Brand & Visual

  • Generic & dated look, doesn’t offer the legitimacy they deserve
  • Limited low quality images that don’t celebrate their projects

Content

  • Giant walls of text
  • Hard to understand how the organization works
  • Hard to understand difference & connection between (ICEF, TRC, TEKRA)

2.2 — UX Design To Do List

We could now map out exactly what we needed to get done.

  • Content Strategy (Simplifying Copy, Copy Writing & Chunking)
  • Landing Page
  • Our Work (Project Discovery Page) Updates (Blog Page)
  • Approach Page Team Page
  • Forms (Donation, Intern Application)
  • Donations Page (Hierarchy and Flow) Donate CTAs

2.3 — User Flow

We created a user flow to walk through the steps of each user task. By better understanding and visualizing our users’ path we can better understand how each element will fit together.

2.4 — Site Map

Understanding and visualizing user flow then allowed us to begin to draft the Information Architecture and site map in a way that compliments and simplifies the user’s experience. The sitemap anchors the navigation of the site and becomes a blueprint for designing out each section.

3.1 — Paper Prototyping

Once we completed the list of pain points and priority design needs, user flows and site map we began the process of paper prototyping to ideate and test design solutions for each screen in the user flow. After testing and narrowing down a working set of wire frames we moved the project to digital using Sketch to map-out the entire low-fidelity website for both mobile and desktop.

3.2 — My work on Mid to High Fidelity

I was tasked with prototyping, testing and iterating through the following design challenges for the team.

Dealing with our Walls of Text

A major usability issues of the website was the giant walls of text. While the organization has a ton of amazing information that would likely inspire readers and potential donors, most people will never get to the good information because it means a 7–10 minute reading commitment. We wanted to make the entire body of information skim-able and digestible, and make sure we optimized the time our user spent on the page by bringing the most important highlights to the very top.

Strategy
By using this strategy we aimed to dramatically increase the average amount of information that each user absorbed. Using this strategy we allowed different users to interact with information to the level of interest and time they were willing to spend. We created 3 more ways to view the information.
Level 1 — photos and headings (2–20 secs)
Level 2 — three more profound facts and accomplishments (20–60sec)
Level 3 — two sentence version of each section (1–2 minutes)
Level 4 — full text version of each section (2–8 minutes)

Level 2
Understanding that most people are likely to read only a few sentences, we pulled out three of the most profound and monumental accomplishments and ideas to the very top of the page.

Level 3 + 4
Next we separated the wall of text into related sections and added headings (Why, Story, Impact) communicating to users the value of what they will discover by reading each section and making the entire body of information skim-able and navigable, allowing users to ‘zoom in and and out’ on what they find interesting or inspiring.

Lastly we used the strategy of chunking and progressive disclosure to reduce the overwhelm of the still significant sections of test. We pulled the 1–2 sentence gist of each section to the top and hid the rest with collapsing read more drawers. This allows readers to discover and explore opening and closing drawers they are drawn to. Curiously discovering more interesting information rather than being overwhelmed.

A Visual Way to Easily Understand What the Foundation Does

Even after skimming the original website several times, reading the client brief and speaking with the founder we didn’t fully grasp the magnitude of the foundation’s work until they began to show us photos and maps of all the work they had done in the village.

We wanted site users to as quickly as possible reach the same level of understanding and wow feeling as we did. To do this we created a map discovery experience for users to immediately understand how the various projects work together physically in the community. Giving users and potential donors an immediate correct mental model of how the foundation works.

We used paper prototypes to flesh out the discovery experience. As much as possible we wanted to allow users to walk though the village and explore each of the resources the foundation has built or supported. Users can understand the foundation’s work and the suite of resources in the village from a birds eye view (intentionally literally) by mousing over the different resources to view its photo, title and location on the map. Furthermore users can click into them to uncover an in-depth understanding and breakdown of the resource. When we were beginning to understand the project during our client interview, seeing a map of the resources and village all together prompted our final understanding of the project and a ‘wow this is really impressive and so smart’ feeling. We wanted to recreate this moment for users and capitalize on this ‘wow moment’ so we added a donation CTA to each resource page. We also wanted to capitalize on the personal draw or connection readers might feel towards different resources that resonate with them.

Making the map resources look clean and clickable and within the existing UI theme was challenging. We experimented with shadows and different roll over treatments to better communicate this to users.

Blog Page

The foundation had a ton of amazing stories about the work they have done and are doing. I wanted to create a traditional easy-to-use blog format to showcase the many stories and allow users to click into the ones they became interested in. I also added a donation CTA to each of the blog articles to give readers an opportunity to donate to stories they were impressed or inspired by.

3.1 — Donation Page

The existing donation page was a hard to understand wall of text outlining the different ways readers could donate. We started by separating out the key types of giving.

Traditional Donations: One Time + Re-occurring Monthly Donations
Scholarships: Primary School Scholarship + Vocational School Scholarship
Special Projects: Societies and large donors who want to donate specific resources

We added images, support information, and attractive super simple forms to make the payment capture process as painless and easy as possible.

Outcomes

User Goals Met

  • Create a professional and current front facing home for the organization that reflects the amazing work it does and reinforces its legitimacy.
  • Highlight ICEF’s unique development philosophy and model. Show users HOW their approach works and differentiates them from other traditional development organizations
  • Creatively highlight ICEF programs and make the ICEF site more interesting and enjoyable to interact with
  • Increase awareness and learning of the different programs that ICEF offers at Tekera Village and the impact they are having
  • Inspire users to easily support ICEF by taking part in one of their various giving programs

Chosen for Development

This project was one of 5 chosen to be actualized as the final project for the web development class at Red Academy and presented in a student showcase held on campus to the tech community on March 29th, 2017.

Client Satisfaction

Our client showed a huge amount of excitement and satisfaction over the work our team delivered. After the the client presentation our client treated our team to food and handmade cards by the Women’s Craft Club from the village.

Leave a Reply