Website Redesign

HOPE AFTER PROJECT

Role: UX Designer

OBJECTIVE

To help the non-profit, Hope After Project, clearly portray the objective of their organization and make them easily accessible to interested participants.

Hope After Project is a non-profit organization that strives to help people coping with grief connect with their loved ones who have passed away by giving back to the community and celebrating their life.

OUR ROLE

Our team identified existing pain points, conducted a comparative analysis on similar organizations, and ultimately conceptualized and implemented our ideas in new online experience the helped meet the objective.

METHODS

Exploratory User Research with randomly selected participants who have experienced a loss.
User Research with potential volunteers, previous recipients of a Hope After Project, and stakeholders.
Heuristic Evaluation of the existing website.
Comparative Analysis of similar non-profit organizations.
User Personas: Volunteer & Recipient
Journey Mapping & Empathy Mapping
Feature Matrix evaluating priority, impact, and feasibility.
Created information architecture by conducting card sorts.
Low Fidelity Wireframes, followed by Usability Tests, implemented recommendations in High Fidelity working Prototype, conducted Usability Tests, and produced Final Website using Wix.com

USER PERSONAS

We created User Personas of a Volunteer and a Recipient to embody the essence of someone who would be interested in Hope After Project and interact with the organization.

Allison Wilson

Allison Wilson

Jack Anderson

Jack Anderson

JOURNEY & EMPATHY MAPPING

We created journey and empathy maps to conceptualize the current experience based on our personas and research. The journey map details the steps before, during and after the project with all touch-points (in blue) and emotion on the smaller post-it's (red for unhappy, yellow neutral, green happy) in order to identify opportunities for improvement. The empathy map has a particular focus on the emotions of the user throughout the experience curve.

Journey Map

Journey Map

Empathy Map 1

Empathy Map 1

Empathy Map 2

Empathy Map 2

FEATURE MATRIX/INFORMATION ARCHITECTURE

We created a feature matrix to visualize and document our findings and our design recommendations against impact, feasibility, and priority.

In order to understand the best possible organization of content for the new website, we conducted an open card sort. This allowed participants to group content together in how they would envision finding it.

FeatureMatrix.jpg

FeatureMatrix.jpg

Card Sort Results.png

Card Sort Results.png

HI-FI MOCKS

Based off our internal research and the competitive analysis, we created a series of wireframes. Our wireframes included searching by location and searching by name since these were deemed the most common use cases. We also provide a map view for those most interested in distance, but also a list view that highlights the partners performance level in a specific product line. These wireframes were then translated into hi-fi mocks:

Desktop Home Page

Desktop Home Page

Mobile Home Page

Mobile Home Page

MotorolaSolutions-PartnerCenter-v13 (1).jpg

MotorolaSolutions-PartnerCenter-v13 (1).jpg

©2017 by Mauli Isha Shukla.