top of page

UI REDESIGN CASE STUDY

 

 

View Figma Prototype

ABOUT

Mobile Email List.png
Mobile Watch Aurora LIVE.png
Mobile Watch Station LIVE.png
Mobile Homepage.png
Mobile Homepage.png
Mobile Invite Astronaut.png
Mobile Junior Astronaut Camp.png

WEBSITE REDESIGN FOR
THE CSA

The Giving Hand is an innovative care package app that makes it easier for users to donate items to those in need in other countries.  This user-friendly app will allow people to pick and choose items to put into a box and then send those packages over using humanitarian organizations such as the Red Cross and World Vision.

This app provides the benefit of tracking your order as well as photo confirmation that your order has been received by a person or family in need. 

 

With The Giving Hand's straightforward navigation and design features, it's never been easier to donate.

PROBLEM STATEMENT

When it comes to giving  money or items, trust is a huge factor in the donation process. People want to know what their money is going towards.  When donating money, the biggest thing that they want to know is how their  money is being spent and what kind of things their money is being spent on.

This application aims to develop a product that will allow users to pick and choose the items that go into a care package, therefore building trust with customers and positively influence them to donate more.

GOAL

Create a user-friendly app that will allow people to choose items needed by others to go into a care package

Ideate solutions and create prototypes in which the development process is based on key insights from user research and usability testing.

PROJECT OVERVIEW

Duration

2 1/2 weeks

Tools Used

Figma, Miro, Photoshop,

Dreamweaver, Github

Role

UX Researcher

UI Designer

DESIGN PROCESS

 1.  Discover

2. Define

 3.  Ideate

4. Design

 5.  Test

1. DISCOVER

Usability Testing

6

participants

Heuristics Evaluation

aged 20-70 years old

People who have donated to charities in the past.

Introduction

Title: UX research for care package app

Date: March 3, 2022

Research Objective: As a user researcher, we want to better understand the users' thoughts and feelings about donation preferences in order to create an app to help those suffering in war torn countries get the necessary supplies they need.

Goals: 

  • Gain insight into what items people would prefer to send to people.

  • Discover what humanitarian organizations people are familiar with and comfortable with donating to.

  • Understand what would make people want to continue to use the app to help people.

Research Questions

  • Which charity or website have you donated to before, if any?

  • Tell us if you have any experience with volunteering.

  • What would you prefer to donate to a website or charity? (ie. Money, items, time)

  • What are your thoughts and feelings towards everything that is happening in the World right now?

  • Why is it that you would donate a care package to someone?

  • What kind of humanitarian organizations are you familiar with?

  • If you had a choice to send items overseas to families and people in need, what type of items would you like to send?

  • What would be your main concerns when donating a care package overseas?

  • What kind of assurance would you like to receive to make sure your package is delivered to where it needs to go?

  • What kind of features would you like to see in an app devoted to humanitarian causes?

  • What would make you want to come back to the app and donate again?

2. DEFINE

Key Insights

User Persona

Part1- Proto Persona.png

3. IDEATE

Card Sorting

Card Sorting- Group v.3.jpg

User Flow

User Flow.png

4. DESIGN

Low-Fi Wireframes

Design Style Guide

UI Screens

5. TEST

Usability Testing

6

participants

Tasks

4

Participants for A/B Testing

Task 1

Navigate through onboarding and sign up using their email.

Goal/Output: The user is able to understand the features of the app

Assumptions: This the user's first time using the app.

Scenario/Steps:

1. Swipe/Tap on the "Welcome"button.
2. Go through the "Onboarding" process.
3. Click on the Sign-Up" button.
4.Fill up the form.
5. Click on the agreement to terms and conditions.
6.Navigate the homepage

Success Criteria:The user is successfully went through the onboarding tutorial and signed up as a member of the app .

Notes:The user can also sign up using their apple ID, google account or facebook account.

Create a small care package for Ukraine.

Goal/Output: The user is able to create a care package and receive a confirmation page.

Assumptions: The user has signed up as a member; The user is on the main page of the app; The user wants to create a care package to send overseas; The user has gone through the onboarding process.

Scenario/Steps:

1. Click on the 'package' icon on the menu at the bottom of the app.
2. Click on the dropdown country menu and choose Ukraine.
3. Click on the box size dropdown and choose small.
4. Click next.
5. Choose through the items or a pre-made package.
6. Click next.
7. Choose your payment method and fill out all the information.
8. Review your purchase and confirm.

Success Criteria: A confirmation page is displayed.

Notes: A confirmation will also be sent to user's email.

Task 2

Track your package from the main page.

Goal/Output: Users track their package.

Assumptions: The user has opened the care package app; The user has a previous order in their list; The user is a member of the app; The user is on the main page of the app.

Scenario/Steps:

1. Click on the 'view package' icon on the menu bar at the bottom of the app.
2. Click on 'package 1' button.
3. Click on "track your package."

Success Criteria: The user has successfully track the package.

Notes: User can also find tracking list on the main page.

Task 3

Share your donation post on social media.

Goal/Output: The user posts to preferred social media page after completing a donation package.

Assumptions: The user is on the profile page looking for the share post; The user is on the tracking page thinking of sharing the post; The user has linked their social media by editing their profile

Scenario/Steps:

1. Go to your profile click on the 'share' button.
2. Select the social media icon you want to post.
3. Once you've selected a social media icon, press share.
4.Another way to share, go to the confirmation page.
5. Click on the 'Share to social media' button.
6. Click on which social media to post.
7. Place a comment and hit "Share".

Success Criteria: The user successfully shares their donation package posts it on social media.

Notes: The user can choose one way or the other to post about.

Task 4

Results of Testing