Accessible Housing Austin - Desktop & Mobile Redesign

PROJECT OVERVIEW

Redesigned from the ground up, our team tackles the existing design of "Accessible Housing Austin's" website for both mobile and desktop platforms (responsive web design) that retains users longer and creates reoccurring donors.

THE PROBLEM

AHA was designed to provide accessible rental housing for low income disabled individuals. We have observed that AHA isn’t providing enough financial and statistical information to instill trust and secure donations which is causing a loss in revenue.

How might we improve AHA’s website so that our donors feel confident that AHA is making a positive impact with their money, feel secure when contributing donations, and become return visitors to using the AHA website?

THE PIVOT....

We thought we should focus redesigning the applicant process but found out through an interview with AHA's Executive Director that they do not have enough donations on site. Also, AHA is NOT accepting applicants right now. 

THE SOLUTION

Improve AHA’s website so that our donors feel confident that AHA is making a positive impact with their money, feel secure when contributing donations, and become return visitors to using the AHA website

We do this by:

•Redesigning a secure donation portal on the website

•Providing a link to detailed financial accountability

•Highlighting positive outcomes or stories that resulted from the donation.

USER RESEARCH AND DEFINITION

Our team planned and conducted 5 user interviews and 1 stakeholder interview with AHA’s Executive Director. Utilizing the affinity diagram tools, we were able to extract that trust was a significant factor when site visitor would turn into a donor. We cross examined this with our stakeholder findings as well.  We then created our user insight and problem statement in relation to our research-backed user persona, Michelle.

User Insight

Michelle, who volunteers at her local hospital and donates to local food banks, wants to know her donation will be handled securely when giving to a nonprofit online, and wants to see the beneficial outcomes of her donation.

Problem Statement

AHA was designed to provide accessible rental housing for low income disabled individuals. We have observed that AHA isn’t providing enough financial and statistical information to instill trust and secure donations which is causing a loss in revenue. How might we improve AHA’s website so that our donors feel confident that AHA is making a positive impact with their money, securely provide donations, and return to using the AHA website?

Value Proposition Statement

AHA is a nonprofit that develops accessible housing to help low-income disabled individuals.

We are effective because we provide a simple and secure way to pay it forward.

We are trusted because we connect our donors to community members in need.

IDEATION

From there, we used the "I Like, I Wish & What If" tool to address other features we may want to add.  It was followed by a feature prioritization matrix to further refine those features that we could accommodate in the scope and time of the project.

Our team then focused on a User Journey Map to help narrow down and define once again the pain points that visitors of the AHA website would encounter in its current design.

IA & NAVIGATION

AHA's existing primary and secondary navigation had several redundancies and key items such as "Our stories" were not easily found.

We performed card sorting to reposition the key features within the primary navigation and removed any repetitive page links.

REVISED SITE MAP

After card sorting, we were able to create a more stream-lined site map that shows the most essential pages of our site that would be part of the primary and secondary navigation.

HEURISTIC EVALUATION

A heuristic evaluation was performed to see where major design flaws were in the existing site.   This involved some redlining to review the different elements and color schemes used.     We found that there were some failure in contrast testing for accessibility.

INSPIRATION AND MOODBOARDS

To help inspire us, we created a moodboard (via InVision) to not just select color schemes, but also review how some of the most popular nonprofit sites layout their elements effectively, especially call-to-action buttons, within their designs.

PROTOTYPING

Knowing the main features we wanted to include, we began to create detailed user flows so every step of the process.

We then started with pencil and paper to rapidly wireframe the key features we wanted to implement followed by digital wire-framing in Figma.

TESTING

Focusing on the donation call-to-action, recipient testimonials, and financial data of AHA, we created a user testing plan to focus on our mid-to-high fidelity prototype.

This included stating our research questions, goals/outputs, assumptions, scenario, steps and success criteria.

HIGH FIDELITY ITERATIONS

Per user feedback we revised the menu to collapse with a hamburger menu icon instead of heaving the primary navigation listed out.  This led to a cleaner mobile header with the donate call to action as the primary button.

DESKTOP