Luis F Morales
UI / UX Motion Designer
SKIDROW HOUSING TRUST REDESIGN
OVERVIEW
I researched why a simple donation transaction became a difficult and problematic process for the user. As a solution I redesigned SKIDROW HOUSING TRUST website focusing in finding an easy way to make online donations.
PAINPOINTS
Confusing and overwhelming process, users
can't find an actual “donate now” option.
GOALS
Making a quick and effective donation without
getting lost in the process.
PROCESS
In my process to find a solution to the problem of the online donation checkout process, I had to first analyze the problem and what surrounds it. Then I analyzed different tests for applying an easy and simple solution in the final design. These are the steps of my process.
Research
-
Context Study
-
User Points
-
Survey
Analysis
-
Problem Statement
-
User Points
-
C&C Analisys
-
Card sorting
-
Nav Schema
-
Moscow
-
Affinity
Ideation
-
User goals
-
Redesign Navigation
-
reorganize hierarchy
Design
-
Mid fidelity wireframes
-
High fidelity wireframes
-
prototype
-
Usability test
PERSONA
I sent out questionnaires and conducted interviews to gather data about the target audience, I found that the majority of possible donors were middle class people in their 30's - 50's, students and/or professionals who feel empathy towards people who have had the misfortune of being homeless lack time to get involved with a good cause like SKIDROW HOUSING TRUST but are willing to make a quick online donation.
This research is based on surveys and interviews in Los Angeles area, for that reason I chose “Jacob Doe” as a person, a student who works part time but has little time to help with SKIDROW HOUSING TRUST other than a quick online donation.
JOURNEY MAP
Jacob Doe is trying to make a donation in his free time between classes and work. He visits the SKIDROW HOUSING TRUST website and doesn't know where to go since there is not a "Donate Now" option. Jacob gets confused with two repeated CTAs, so he decides to click one just to find out that the link takes him to a broken link. He tries the other CTA and he has to go through 4 more screens in order to get to the donations or payment options. Once he gets to the donation options, Jacob needs to fill 4 more screens with information and he notices that the donations link opens a new window which is "non secure". Jacob is frustrated since he could not make a donation and already spent nearly 10 minutes in the process.
7-10 mins checkout process
OLD NAV SCHEMA
In order to get a better understanding of the SKIDROW HOUSING TRUST website, I analyzed the navigation schema and I found couple of repeated subcategories and broken links.
MOSCOW : feature prioritization
I used the MoSCoW analysis method to prioritize the SKIDROW HOUSING TRUST website features, in order to reach a common understanding of the importance of having an easy checkout process.
CARD SORTING
Based on my card sorting method, I evaluated the information architecture of SKIDROW HOUSING TRUST. In this session the participants organized topics into categories that made sense to them to assist in labeling these groups.
As a result, I decided to get rid of some repeated categories and prioritize other ones.
LOW-FI WIREFRAME PROTOYPE TEST
I needed quick feedback on my concept and flow before my final prototype, so I decided to do a low-fi prototype. I learned from the test that I need more a prominent donation CTA and to simplify the flow for the donation process, and create more visible (color, size ) CTA for the donation process.
OPTIMIZED SITEMAP
New and simplified SKIDROW HOUSING TRUST site map based on my previous researches and low-fi prototype
USERFLOW / WIREFRAMES
New and simplified SKIDROW HOUSING TRUST userflow based in our previous and low-fi prototype test
MOODBOARD
In SKIDROW HOUSING TRUST study I found that beside usability and checkout / donation problems, users found the design of the website of SKIDROW HOUSING TRUST a little rigid, cold and very corporate which I thought it was not convenient since the topic what we are dealing with is very delicate and should not have a negative and cold denotation, I should think of something more cheerful and alive which led me to think about making a new design proposal not only of the website but the branding including logo, colors and photographic treatment.
PHOTO SELECTION AND RETOUCH
ABSTRACTION
The photos needed to be retouched to give them a bit of quality finishing, in the photo selection process I found a rose which helped me as inspiration for the new logo, in the photo I decided to highlight it and give it a slightly warm tone to denote the sense of charity, love and above all of humanity.
Then I abstract the rose in simpler forms according to the look of the new page and mix it with a heart which symbolizes love in any culture and society.
LOGO PROCESS
OLD LOGO
NEW LOGO
COLOR PALETTE
ICONOGRAPHY INSPIRATION
PROTOTYPE
After all the studies and research I managed to find a point where the prototype showed that with clear, concise and visible "DONATE NOW" CTA, a quick and easy donation is achieved, which only needs 4 screens to fill the information of the donor.
The confirmation of the amount that the user wants to donate in a safe and easy way generating tranquility of the user.
It was also proposed to change branding for a much more friendly and warm product without sacrificing brand credibility.
substantially Simplification on the navigation of SKYDROW HOUSING TRUST website through priorities and usability tools.
I added a final final gratitude screen with an e - mail confirmation where the user can see how much and the end point of his donation.