GOODler Website Redesign
Overview
GOODdler is a platform that houses nonprofit material goods drives for people to donate to. We were brought on to improve the usability for the donors.
My role
User research, Prototyping, User testing, UI Design
Results
Improved top navigation usability, filtering system, and increased users understanding of site functionality by 40%
Why are we doing this?
1.
Gain User's Trust
Create a donation space that instills confidence in the donor and reassures them that their money is being used in a transparent way
2.
Improve Understanding
Allow users to easily orient to the site to understand the website's mission and functionality
3.
Improve Customization
Allow users to easily sort and search for the specific donation drives they want and contribute to their desired causes more efficiently
Users need a clear, search friendly, and accessible donation platform
We conducted 5 user tests on the current site to answer these questions:
-
Do users understand the purpose of the site?
-
Can users easily use the donation function?
-
Is it easy for users to sign up for an account?
-
Are users able to find a way to contact Gooddler?
The tests uncovered that users were:
-
Confused about the site's function
-
Unsure about the product they were buying
-
Unclear about where they were on the site
-
Lacking search or filtering abilities
A look into our target demographic
Meet Barbara
Barbara is a 64 year old part time non profit coordinator and loves to support local nonprofits.
Goals
-
Support her favorite organizations in a time efficient manner
-
Easily understand where she is donating her money
Pain Points
-
Understanding modern websites and knowing where she is in the process of donating
-
Misleading information or fraudulent donation platforms
How does Gooddler stack up to the competition?
We looked into five of our direct and indirect competitors (including the sister site Goodler.org) to see where GOODdler stood
To compete with what is currently on the market and standout, we determined that GOODdler should:
-
Improve filtering and search abilities
-
Improve UI patterns and colors
-
Make mission more prevalent
Areas for Improvement on the current site
Our team conducted a heuristic evaluation on the current GOODdler site. Here are some of the notable areas:
Navigation bar is disorganized and orange text color does not pass WCAG standards
Text is too small and spacing is not intuitive
Donation cards lack information or context
Duplicate nonprofit cards and no search filters
Truncated product description
Inconsistent font sizes/types across pages
Inconsistent button design leading to function confusion
Prioritizing improved navigation, site organization, and search-ability
Our team came together to brainstorm which elements we wanted to change, add or eliminate. We then organized them depending on how feasible and impactful they would be.
Main Priorities:
-
Landing page needs to be more organized and clear
-
Charity drives need to be easier to find and have a clearer structure
-
Need better navigation (top nav, breadcrumbs, etc.) and findable buttons
-
Copy should be simplified wherever possible, avoid any complex phrasing or words
Lo-fi Prototyping
The current site had duplicate cards for the same company due to them having several drives on the site at one time.
I improved this interface by building out an individual page for each nonprofit that could house all of their drives, reducing user confusion.
I also improved the information arrangement on the cards, added filtering to the types of drives, and organized the material goods into categories that the user can scroll through, displaying the full description of the product.
Feedback from Lo-Fi testing
We explored the same questions we had for the original Gooddler website user tests but applied them to our Lo-Fi version!
Feedback from the tests included:
-
Not enough white space
-
Donor icon isn't recognizable
-
Need a summary of how GOODdler works with other nonprofits on the home page
-
Want a cart button at the bottom of wish list
Creating a design system and brand identity
A style guide was created for a cohesive branding across our screens along with a component library to create our Hi-Fi prototypes.
Feedback from the Hi-Fi testing
We conducted five user tests to try out the hi-fi version. Here are some of the elements we changed:
Before
After
Rearranged card order to emphasize the points we wanted to be read first
Changed logo color from black to white to keep brand consistency
Changed "message us" to "contact us" to keep consistency
Adjusted placement of help chat to give more breathing room from the bottom of the screen
Added a donate button on nav bar
Next Steps
-
Work with Gooddler's CEO to discuss additional features they want
-
Continue to perform testing on site to improve the call to action buttons on the Top Navigation
Takeaways
-
Creating a design that balances user needs and client wants can be a delicate task but backing all decisions by user data is the best practice
-
Extra attention to clear and concise language and descriptions can make a big difference in allowing the user to understand the platform