ICEF: Weaving Community Empowerment

A case study on the website redesign for the International Community Empowerment Foundation (ICEF) Canada based in Delta, BC.

Who is ICEF?

They are an NGO organization who are passionate about helping communities able to stand on their own feet. They hope to have the growing town of Tekera-Masaka district in Uganda to be fully sustainable in 5 years. They help operate several programs that provide income and a better living standards.

_TASK

Redesign the ICEF Canada website for responsive web design.

__TEAM

UI: Nicolle Colada

UX: Robert Morton, Luc Dippolito, Tiffany Tse

WebDev: Andrew Nelson, John Wat, Julie Lo

__TOOLS

Hand-drawings, Photoshop, Illustrator, Sketch, Crystal, InVision, Keynote

The Problem

ICEF’s current website isn’t optimized for their user’s to achieve their goals for attaining information.

Design Opportunity

Currently using a template from WordPress ICEF’s website wasn’t able to be fully showcase their work. The redesign will address the lack of information hierarchy

Target Audience

  • Potential and Reoccurring Donators (All ages)
  • University Students in related field/interest

Timeline

3 weeks

Sonya Sangster is the new executive director of ICEF and our client representative for the website redesign. In our meeting she gave us a great deal of information, context and a solid base of what type of organization she was apart of and the work they commit to providing.

  • Large opening image
  • Text central on page (meaning)
  • Grid-styled
  • likes contracts between space and images
  • Simple and clean
  • no clutter

Following after the organization of all the data points came the construction of a two mood boards that would lead into two explorable directions.

“Under the Same Sky” (below) which was working based off the feelings of unison. The ideas that no matter where in the world you were everyone could look up and feel connected to another. The board focused on three things: applied textures, the movement and rhythm of music/culture. It was inspired by a story from one of the interviews. One of the events that had a lasting impact on a traveller to a developing country was the solid drum beat when the groups gathered together. No titles or points of separation.

The selected art direction below entitled “Woven” had many ideas that resonated and aligned with ICEF’s goals. The phrase “Don’t tell people your dreams, show them” stuck with Sonya after one of our client meetings. The colour were native tones found in the crafts and fabrics made in Tekera creating a rich colour story.

As the iteration process continued the blue was eventually taken out to create a more succinct colour trio between the deep magenta, gold and brown black. One of the images that ICEF gave to us in their package was the point of inspiration and anchor.

4 KEY POINTS

Richness — Though their lives are rough there is an ecosystem of value being brought in, sharing experience, culture, new skills and stronger community.

Support — A reflection of how the town folk rely on one another to achieve their goals. The tree of intertwining relationships like this student carrying their sibling on their back was a big focus. I wanted items to stack or feel like they fit like puzzle pieces.

Strength — Their lives are hard, the amount of tenacity they have in order to go through their days is amazing, I tried to express their warm, sunny dispositions in Fira Sans while keeping the titles and bordering words in Oswald as it was a tall, bold, enduring font.

Weaving — As social beings I wanted to use weaving of their clothing, physical baskets, bracelets and crafts they made as connections to the people who make them with one another, to the people who purchase them. They fitted in as subtle details around the site mainly found in the two toned icons.

Next came the working pieces of some unique iconography and assets. The focal design piece was to incorporate the two toned chevron that represented weaving the pages together.

There were a lot of icons used in sections like the self-sustainability loop was a collection of icons I created like the backpack, pieces from Noun Project and some that I modified to match the line thickness to create a more cohesive library.

The homepage underwent several facelifts as the trouble was losing sight of designing with responsive web in mind. While the fourth version of the homepage featured a very engaging and active layout style it became difficult to understand how it would break down in blocks in a smaller screen size. The fifth version had the mot change as it embraced a more stacked approach. By the seventh version the blue and pink boxes had been phased out a the pink felt like it was pulling away from ICEF’s image, and the blue gave a misplaced coldness to the page.

Another large issue that we came across was how to deal with the centrepiece of interaction and the bulk of the information was the Our Work page.

*This section to be filled in at a later date.

This was one of the hardest and largest volume of work to this date for me. I am really proud of how involved I was with everything. I was in-charge of all the visual elements but I was also helping UX develop their wireframes and IA, while being the lead for communications between design team, development team and the client.

To view the prototypes on InVision: Mobile / Desktop

OUTCOMES

This design was one of the 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.

The site launch will happen on May 13, 2017 — http://icefcanada.org/

The client showed a great deal of excitement and satisfaction over the hard work all teams put forth. At the end the the UI/UX presentation Sonya treated us to cakes in celebration and gave us these handmade cards by the Women’s Craft Club in Tekera.

Left to right: Rob Morton, Nicolle Colada, Tiffany Tse, Luc Dippolito, Sonya Sangster.
Show your support

Clapping shows how much you appreciated Nicolle Colada’s story.