ICEF Website Redesign — Case Study
This case study documents the design process and key learnings 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
0.1 — The Team
The EFEC 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 there website to better showcase there work and highlight EIFS unique approach.
0.3— Client Goals
- Create a professional and current front facing home for the organization reflects the amazing it does and reinforces its legitimacy.
- Highlight ICEFs unique development philosophy and model. Show users HOW their approach works and differentiates them from other traditional development organizations
- Creatively highlight our programs and make our site more interesting and enjoyable to interact with
- Increase awareness and learning of the different programs that ICEF offers at Tekera the impact they are having
- Added By Us— Inspire users to easily support ICEF by taking part in one of there 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 Resouce Centre. What sets ICEF apart is their strict dedication to creating real longterm 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 so 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 prominent 15 or so non profits like Unicef, WWF, Oxfam, and amnesty international as well as list of website our client liked that she had had prepared. We were looking for common and effective nav and ai patterns, marketing funnels strategies for donation and support CTAs, home page messaging and branding themes.
Nav & CTA Patterns
There was a very common and effective nav pattern that we thought would likely be an effective way for for us to achieve the clients goals of highlighting their philosophy and work. We found an amazing website that utilized a map to ad exploration and interactivity to the experience. Nearly every website had loud and proud “donate” Call to Action 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.
Next we explored messaging voice. Most of the development website 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 rocking it 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 date. By grouping similar date 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 of 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 through design and user experience audit of the current website and noted what we were working with.
Navigation & AI
- Confusing hierarchy and navigation
- Super confusing hierarchy and navigation
- Doesn’t 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, don’t celebrate their projects
- 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.2 — Sit Map
2.4 — User Flow
[User Flow Diagram Goes Here]
3.1 —Content Strategy Chunking
3.1 — Map Project Discovery
3.1 — Blog Page
3.1 — Donation Page
5.1 —Client Goals
- Priority of users
- Understanding organization (and all its parts
- Chunking, tilting, hiding “learn more” content
- Interactive Map making it look clickable enough
- Responsive was new challenge