Tekera Resource Centre —A Holistic Approach to Design


Client

The Tekera Village is located about 14 km from the nearest city, Masaka. Before the Tekera Resource Centre (TRC) came to life, this village was lacking electricity, running water and public transport due to the non-existent roads between Masaka and Tekera.

TRC works with community in Tekera to support their well being and sustainable growth. They focus on a holistic community development.

Since 2009, TRC falls under ICEF Canada’s operation.

Team

Eveline Pinto, UX Designer
Irem Ozekes, UX Designer
Jessica Cho, UI Designer
Marie-Philipe Boucher, UI Designer

Tools

Adobe PhotoShop CC, Adobe Illustrator CC, Sketch

Brief

ICEF & TRC approached us to build a responsive website that empowers users to take action.

Design Opportunity

TRC’s current website lacked information hierarchy and therefore made it very hard to find the great projects they are leading. Their visual brand identity also didn’t speak for all of what they offer.

Primary Users

Ugandans willing to volunteer, Ugandan Government officials

Website goals

Based on the brief and the issues with their current website, we came up with the following goals for this project:

  • Empower users to get involved
  • Create awareness for TRC’s unique approach
  • Enable social media engagement
  • Give a contemporary visual
  • Make it easy to be update by staff with poor internet connection
  • Clearly represent TRC and its programs

Design Process

To tackle these goals from a visual perspective, I went through the following process:

Visual Language & User Research

This project started off with a little bit more research than usual as we had to understand the cultural aspect of our users. We were going to be dealing with Ugandan users, who have very strict data usage and therefore view websites mostly from their phones.
We needed to create visual elements that resonate within their culture and speak to them as digital users.

From our research, we found a lot of dancing and dance outfits, traditional patterns in clothing, drums, lively music. This would influence the design elements we would develop.

To truly understand the utility this website would have on its users, we asked ourselves :

Why would Ugandans want to be involved with TRC?

From this question, we derived that users would want to empower their country/culture through their involvement. They would also want to gain experience within the community as there are few job in the country to satisfy the large amount of skilled workers in Uganda.

Mood Board

This research led us to branch out to two distinct art directions.

The first art direction represents Uganda’s culture, but more specifically Tekera’s contribution & interpretation of it. Through the images selected, we can see the various elements of Tekera’s village and how they complement each other. These resources bring joy to the village and ensure Tekera’s main goal — self-sustainability.

The colours selected showcase the colours found in Ugandan clothing as well as representing the natural elements of the country.

The dark blue would add assertiveness to the website & allowing governmental organizations to take Tekera seriously and want in invest in the center.

The teal colour ensures Tekera keeps its originality with its unique development model.

The green colour showcases the farming done in the Tekera village and the sustainability of the center.

The orange colour would be used a complement colour for elements on the website that would require action from the end user, such a button.

Art Direction #1 — PRIDE

The second art direction represents the group co-operation of Tekera Resource Centre.

TRC has many community development projects to improve the quality of life for the Tekera residents such as inheriting Uganda’s traditional culture and providing practical education. All of these programs are closely related to one another and will achieve the best result when many people are willing to participate together.

In this art direction, we focused on yellow and red colours from Uganda’s national flag to maintain Uganda’s vibrant identity, yet tone-downed the colours for a better accessibility to users. Also, the shapes are rounded to represent TRC’s strong social cohesion and linking them to the shape of TRC’s logo

Art Direction #2 — TEAMWORK

Based on the client’s feedback, we took the bright colours from the 2nd art direction and incorporated them in the first art direction, to give us the final look and feel for this website.

Style Tile

Once the desired mood was defined, we went ahead and placed these visual elements (colours, shapes, space, movement) unto a a Style Tile, to help the client understand how this could all be represented on a website — as mood boards can sometimes be too abstract for some clients.
We therefore defined teal and blues as our primary colours and yellows/oranges as our call-to-action/contrasting colours to help us engage with the user.

We also used the weaving of the baskets as inspiration for the shapes on the right-hand side of the header.
This would later transform into an important element of the flow of the website design.

Style Tile for TRC Website

Logo Ideation

TRC’s current logo doesn’t due to the NGO justice. They represent so much more than their current logo showcases the world.
We wanted to showcase TRC’s incredible initiative to the world by adapting their logo to something that really represents their true brand identity.

TRC’s Current Logo, in the Ugandan flag colours
Sketches for the new TRC Logo

We began to think outside the box of the client’s initial request to see how far we could go. There’s no shame in trying right?

We sketched out many elements that represented Uganda, TRC, TRC’s programs. We should the below to the client and to our surprise, the client enjoyed the diversity and the fact that we tried something different.

Extensions of the TRC Logo

We there went deeper into our possible options based off the items the clients liked in the previous round of ideas. The human aspect for “community” was highlighted as well having the words Tekera Resource Centre on the outside of the logo to put emphasis back on Tekera and not the letters T-R-C.

2nd Round of Logo ideation
Final logo ideas

The final logo options showcased a much deeper meaning and connection to the the values of TRC and showcased the brand to world as a successful organization that is empowering Uganda as a whole.

Style Guide

Colours

In the final screens, we added many variations of the teal colour. Darker tones were to keep assertiveness while lighter tones were to keep uniqueness in the projects’ offerings and personality of the site.

We kept the yellow/orange colours for our call-to-action buttons or any area where we wanted to user to focus on.

We diverted from the green colour as we did not find it had a purpose within the colour palette and would overwhelm our already colourful palette.

Extensive colour pallet found in the Style Guide

Typography

We selected Open Sans as the main font for this site due to its large family and the fact that is was a web font. It is also not too sharp, with rounded edges that allows users to feel more comfortable with the content they are reading. As the rest of our design had sharper lines, we wanted the user to feel as ease when it came to the typography.

We also added a “Striking” font for key moment throughout the site where a powerful message needs to be sent out. This was done with Shadows Into Light as it is a hand-written looking font that can allow the user to feel authenticity towards TRC’s messaging.

Typography used in TRC’s Website

Iconography

Iconography was an important piece of this project as TRC has so much content to showcase that the use of iconography could actually ease the digestion of this content.

As ICEF already had some icons to showcase these programs, we first thought about utilizing them to create consistency between both organizations.
However, after having a closer look at them, we realized that some may not speak to the Ugandan culture. For example, the education icon was presented by an apple. For North Americans, this makes sense. For other cultures however, not so much.

We therefore went about changing all the icons so we can create icons unique to TRC, exclusive of ICEF.
We kept the square and sharp edges from the the style tile to create assertiveness. We also did this to align our icons with those for the Sustainability Development Goals set out by the United Nations, an important development agenda for the client.

Iconography of TRC’s Main Programs
Sustainability Development Goals Icons by the UN

Final Screens

Once we combined our art directions, final colours, typography, iconography and other visual elements, we ended up with an array of Desktop and Mobile screens that would become TRC’s new responsive website.

From paper to Mid-Fi to Hi-Fi screens
Responsive Designs of the Home Page & Education Page

Prototype

This website was selected by the web developers at Red Academy and is currently in the process of being built.
For now, you can view the Mobile prototype here:

You can view the Desktop prototype here:


Reflections

This project was completed in a very short time frame — 3 weeks to be exact. The team and I managed to do a lot within the short time frame yet would have loved to have been able to expand more on the branding identity for TRC. The majority of our time was spent designing the screens as, it turns out, there was A LOT of content on this website that required separate screens. Time management was something we had to focus on. The client wanted a responsive website and a brand identity was secondary to them.

We had to keep the existing logo, only changing the colours and typeface, due to political and government regulations that couldn’t be solved within our short time frame.

The navigation bar was a huge struggle for the team. There was a lot of information to display and many sub categories within each category. Due to the time frame of this project, our solution may still need to be worked on to get the best user experience possible.

Marie-Philipe Boucher

Written by

UX/UI Designer with a flare for international interactions | Adventurer ✈ ⛰ Currently designing for National Bank of Canada | 📍 Montreal

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade