Luis F Morales
UI / UX Motion Designer
SKIDROW HOUSING TRUST REDESIGN
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.
Confusing and overwhelming process, users
can't find an actual “donate now” option.
Making a quick and effective donation without
getting lost in the 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.
Mid fidelity wireframes
High fidelity wireframes
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.
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.
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.
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
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
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.
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.