Helping Hands
App and Website

UX Design Case Study

Project Overview

Helping Hands is a website and application that helps users find volunteer events in their community. Helping Hands provides access to services both on mobile devices for on the go use as well as from desktops so users can browse upcoming events whenever or wherever they desire. Helping Hands’ target audience includes a wide variety of people of all ages that are looking to volunteer and get involved in their community.

My Role

UX designer designing an app from conception to delivery

Project Duration

October 2021 - November 2021

Course

Google UX Design Professional Certificate

  
Helping Hands Main Image

The Problem

Current listings of volunteer events in local communities are spread across many websites, making it difficult for users to find events they can attend.

The Goal

Design a website and application that brings upcoming volunteer events to one place so users can browse and sign up for events with easier access.

Main Screens

Helping Hands Main Screens A
Helping Hands Main Screens B

Research

Findings

In interviews used to identify the needs of the users, the primary user groups were found to be working adults, young adults, and families. Research has confirmed the initially assumed target audience of Helping Hands, as well as expanded explanations of how people find community service events in their community and what can be improved. Many users that look to sign up for events to volunteer at online spend much time browsing different pages and sites trying to find what best fits their schedule. By gathering events in one place it will make it much easier for people to become more involved in their communities and save everyone time that would like to participate.

Pain Points

Helping Hands Pain Points

Personas

Helping Hands Persona A
Helping Hands Persona B

Paper Wireframes

Mobile App Wireframes

Paper Wireframe 4Paper Wireframe 3

Paper Wireframes

Desktop Site Wireframes

Paper Wireframe 6Paper Wireframe 7Paper Wireframe 5Paper Wireframe 6

Digital Wireframes

Mobile Application

Digital Wireframes C

Digital Wireframes

Desktop Site

Heloing Hands Digital Wireframes Desktop

Low Fidelity Prototype

Helping Hands Low Fi Prototype

After completing the pages of the digital wireframes, I created low-fidelity prototypes.
The user flow followed the process of browsing events and signing up,
so that it can be used in a usability study.

Attached below are links to the low-fidelity prototypes of Helping Hands.

View Lo-Fi Application PrototypeView Lo-Fi Desktop Prototype

High Fidelity Prototype

Mobile Application

The final high-fidelity prototype presented a complete user flow,
allowing full experience of navigation through the application.

Attached below is a link to the high fidelity prototype of the mobile application.

View Application Prototype
Helping Hands Mobile Mockups

High Fidelity Prototype

Desktop Site

After making changes based on user feedback, the high fidelity prototype
was created for the desktop site of Helping Hands to demonstrate an improved user flow.

Attached below is a link to the high fidelity prototype of the desktop website.

View Desktop Prototype
Helping Hands Desktop Mockups