www.hamicanada.ca

UX/UI Case Study
Website Redesign

We observe that the organization of the website was not conductive for the user to acquire relevant information about Hami Canada

The Problem

Hami Canada is a non-profit organization that provides access to education and raises funding for the overall level of development in impoverished regions, mainly in the Middle East.

What is Hami Canada?

The Solution

Improve organization and visual appeal of elements (e.g. navigation & cards). Our goal was to streamline the website and make the user experience more aesthetically pleasing.

4 Weeks

Project Duration

Tools Used

Design Process

- User Research
- Proto Persona
- User Interviews
- Industry Analysis
- Affinity Diagram
- Empathy Map
- User Persona

- User Insight
- Problem Statement
- Prioritization Matrix
- Value Proposition
- Storyboard

- Heuristic Evaluation
- Redline annotations
- Competitor Analysis
- Information Architecture
- User Flow
- Sketch Prototype
- Lo-Fi Prototype

- User Test
- Test analysis
- Iterations
- RWD Hi-Fi Prototype

Emphatize

Prototype

Test & Iteration

Definition & Ideation

Five 1-on-1 interviews
In-person or via Zoom
People who actively donate to non-profit organizations.
(Screened via survey)

User Interview - Empathy Map

User Persona

Sean, a high school teacher who likes to help the community needs a trustful organization that he can donate to, knowing that his donations are going to be well used because of past experiences where he did not know where his money was going.

User Insight

Hami Canada is a non-profit organization that focuses on providing equal opportunity for children to study in impoverished areas in the Middle East. People have a desire to help but are hesitant to donate to many non-profit organizations because of the lack of information.
How might we provide information about users and donations so that trust can be built between the donor and Hami Canada?

Problem Statement

Storyboard

Whit the heuristic evaluation we wanted to do a review of the actual user interface, looking closely at user experince aspects that could help to identify many kinds of user experince problems.

Heuristic Evaluation and Redline Annotations

Site Map

User Flow

Information architecture

Lo-Fi Prototype - Desktop and Mobile

Homepage

Current Projects Page

Goals and Objectives Page

Colors

UI Style Guide

State Colors

Black Colors

Typography

Heading 1

Heading 2

Heading 3

20px

Buttons

Heading 5
16px

Heading 4

18px

Gray Colors

48px

32px

Iterations after Usability Test

Based on the results of the usability tests, we identified a few areas where the page's design could be improved. In this case, the information is presented in a way that makes it easier for the user to comprehend.

RWD Hi-Fi Prototype

Desktop

Mobile

Let's work together

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.