International Community Empowerment Foundation Website Redesign

UX/UI Redesign Website for Desktop & Mobile

ICEF is a non-profit organization based in Vancouver that support the development of communities within Uganda. ICEF has a holistic approach to the development of each community and knows the only way to support the people is through multiple interconnected programs. ICEF is currently working on the provision of quality health care, education standards, drinking water and sustainable income opportunities for men and women. The communities in Uganda drive this progressive change; as key stakeholders in all planning, implementation, monitoring and evaluation of the work, no decisions are made without the community’s input.

Currently, ICEF is focused on the Tekera Resource Centre. The TRC was founded in January 2006 near Tekera Village, Masaka District, in Uganda.

ICEF felt their website was lacking in several key areas and our project has been to address each of these issues and come up with a solution that can help them grow.

Current ICEF website

Client Goals:

  • Layout is very basic- sections are not aligned
  • Large amounts of text- may be seen as unappealing to visitors looking for the quick facts. Some repetition found in multiple areas of the website
  • Organization’s purpose is not clearly stated- it takes a lot of reading to learn exactly what ICEF does
  • Increase Visitor traffic
  • Raise awareness of what life is like in Uganda, and what can be done to help
  • Enable applicants to apply online for internships
  • Highlight how ICEF operates and accomplishes community development in Uganda
  • Improve the website’s layout to enhance overall user experience
Left to Right: Rob Morton (UX), Neeko Colada (UI), Me (UX), Luc (UX), Sonya Sangster (Executive Director, ICEF)

Affinity Diagram

After interviewing dozens of ICEF website visitors, our team analyzed the data we collected and uncovered the major pain points. Then we we grouped together the insights and created an affinity diagram.

Affinity Diagram

Personas

Before we dove into the user flow, we needed to understand what kind of people were using the website . This was our top priority, because it helped our team to understand the user-base and provided us with framework for the rest of the design process.

Personas

Information Architecture (IA)

First we had to redesign the homepage to create a storyline structure for visitors to follow and learn the key information about ICEF. We drew out all the information from the old site, then we cut out some unimportant sections, rearranged the content, and added new chunks of information to sketch out the preliminary layout for the new home page.

IA for Home Page

  1. What is ICEF
  2. How ICEF works
  3. How ICEF has succeeded
  4. Donate

User Flow

We created a user flow to help us step through the site map and understand how each segment will fit together and how the content will be ingested.

Sitemap

After we all agreed the IA design I created the sitemap to use in the medium fidelity designs.

Desktop Prototype

Home page

‘Our Work’ webpage design problems

The current ICEF website contains a dropdown list with 8 sub-categories beneath “Tekera Resource Centre”. Each dropdown item leads to a different page with an overwhelming amount of densely formatted text.

Current TRC dropdown menu and page

New Design:

We aimed to make it “Fun” “Different” and “ Easy to understand” for users.

We captured the satellite image of the Tekera Resource Centre from google maps and placed eight pins to show each of ICEF’s community centres. Users can select each number to see how ICEF impacted the community.

In the centre of this page we interrupted the flow with segments entitled “WHY”, “STORY”, and “IMPACT”. Users may click to read more detail on each segment.

Conclusion:

This project was a great success. I learned a lot during the design process. Our client was very pleased with the new design and how it brings to light the story of ICEF — that’s what they really wanted from the start. We handed our design to the Web development team to do the coding portion of the project and off to the client. Overall, it was a wonderful experience to work so with my team at RED and Sonya (the ICEF representative).

Prototype:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.