top of page
ties.png

TIES Website Redesign

In this project, I collaborated with a team of UX Designers to redesign the website for an NGO, Technology in Education Society (TIES),  in order to improve the usability & interface design of the site, with special attention being paid to the donation process.

 

This case study showcases the redesign process of our team and my contributions to conducting research, heuristic evaluation of the existing site, and designing the interface.

OVERVIEW

Project

Collaborative Design Sprint

Timeline

5 Days

Role -

Team player

Secondary research, Heuristic Evaluation,

Interface Design

Tools

Figma

InVision

Platform

Website

Mask group-1.png

Design Sprint Process

Day 1

Discovery

Day 2

Ideate

Day 3

Build

Day 4

Test

Day 5

Present

Design process.png

We started by learning about each other's strengths and weaknesses in the design process so that we could delegate tasks effectively and decided to break the project down into smaller deliverables and set deadlines for each deliverable so that all the team members can stay engaged and accountable. 

 

I was mainly in charge of conducting a heuristic analysis of the existing site, conducting user interviews, preparing the presentation deck, and presenting it to the stakeholders for this challenge.

SETTING THE CONTEXT

EXISTING SITE

Mask group-2.png

TIES is an NGO that donates innovative technology and grants scholarships. Their projects run in developing countries, where the donations made will have the most impact.


While the organization has great humane values, its website does not best convey their story, values, and impacts in a meaningful manner. Thus, by improving the design and usability of the website, TIES will be able to gain more credibility and engagement which can lead to more donations.

existing site.png

ANALYZING AND UNDERSTANDING THE KNOWN

KEY KINDINGS

Mask group-2.png

We did a heuristic analysis of the website to understand its current user flow and discover existing pain points and difficulties.

You can find our detailed analysis here.

Frame 3.png
Frame 4.png
Frame 5.png

DIGGING DEEPER

SECONDARY RESEARCH

Mask group-2.png

After having a fair understanding of the working of the existing website, we started researching and learning about other NGOs in the same space or related work. Our primary objectives of the research were:

  • Discover online donors’ motivations, pain points, and behaviors regarding the donation process

  • Research more about the donation processes done online

  • How impactful storytelling can help influence people visiting the website to donate more

  • Research how successful existing NGOs build trust with their donor base

USER'S MINDSET FOR MAKING A DONATION

PRIMARY RESEARCH

Mask group-2.png

Taking a dive deeper, we spoke to a few people who make donations online to understand their motivations, pain points and behaviours regarding making a donation. We conducted user interviews with 5 people. 

You can read the entire interview guide here.

Interview insights.png

We made an affinity map based on the interviews and identified 3 key themes :

Frame 7.png
Frame 8.png
Frame 9.png

The research and interviews helped us define our Sprint Goal- 

How might we help Scotia Wealth Management build rapport with newcomers to Canada to maintain a long-term positive relationship in a shared digital space?

Optimize the website’s design and user interface of TIES and establish storytelling throughout the website, so that the process
of donation and learning about the organization is clear and easy
 to understand.

LEARNING FROM OTHERS

UI INSPIRATIONS

Mask group-10.png

We drew inspiration from existing NGOs, picking out features we thought would be the most suitable for the task flow.

Frame 16.png

SKETCH & DECIDE

SOLUTION SKETCHES

Mask group-10.png

We worked individually together! Following the 4-step method (Notes - Ideas - Crazy 8s - Solution Sketches)  

We presented our solutions and discussed & decided which solutions to prototype. We then created greyscale wireframes of the same.

Frame 17.png

PRIORITIZE BEFORE NIT-PICKING

USER TESTING & ITERATION

Mask group-9.png

We tested our then tested our initial prototype with 5 users and received some valuable insights. We prioritized the feedback in order to make efficient changes for a revised prototype. 

prioritization.png

Design Iterations - 

Protoype Comparison.png

PRIORITIZE BEFORE NIT-PICKING

USER TESTING & ITERATION

Mask group-9.png
TIES.gif

LOOKING INTO THE FUTURE

NEXT STEPS

Mask group-4.png
  • Include testimonials and personalized stories to further improve the storytelling.

  • Conduct more user interviews & A/B testing with the high-fidelity prototype to improve the design and usability.‍

SELF REFLECTION

KEY LEARNINGS

Mask group-10.png
  • Overall, this Design Sprint has been an amazing collaborative UX Design experience. It helped me understand a clear vision of the project goals upfront. Being a team player helped me learn how to make big decisions without long discussions and prioritize high-impact design iterations to improve usability.
    A peek into the intentions and mindsets of p‍

  • People feel more inclined to donate if they can connect to the cause.

  • It’s important for NGOs to highlight transparency and accountability.

  • People want to track and see how their donations made an impact.

MORE PROJECTS

NFT.png

NFT Creator Studio

project with gskinner

traverse.png

Traverse

Creating your own
travel narratives

UX/UI Project

scotia.png

Scotia x
BrainStation

Industry Hackathon

bottom of page