What Does the Project Entail?
Our group of three (Jason Rodriguez, Angelica Guajardo, and Myself) were tasked with understanding and resolving a specific user flow of our choosing with a local non-profit in our city of residence.
The team worked on user research as a whole, but were left to our own devices when it came to our process and the hi-fi prototype. All of us came up with our own solutions, so here is my take on the donation flow of the Explore Austin website.
About Explore Austin
"Explore Austin uses mentoring and outdoor adventure to transform the lives of youth from low-income communities so they can reach their full potential. Through a leadership based outdoor adventure curriculum coupled with social-emotional learning components and long-term mentoring, Explore Austin is improving the well-being of each participant, their families, and the community."
A middle-aged, married woman who feels apathetic about donating to an organization needs to learn more about the non-profit but faces navigating a content-dense site with unclear expectations.
Who We Interviewed
We interviewed two people from the organization to get a feel of what the business needs: (portrait on left) the CEO, Ann Jerome, and (portrait on right) Laura Nettleton, the Director of Development.
We also interviewed two volunteers/donors of Explore Austin who gave us insight from those actually in the thick of it.
I also interviewed several people I know that volunteer, but not at Explore Austin currently, so I could get a more unbiased approach to the users who will look up this organization.
Insights Gathered From Interviews
The Business Standpoint:
Donations are the most important call-to-action right now.
Condensing info on their current site — it is too wordy
Make process of donating easier.
Making the site more visual to appeal to people’s emotions.
The User Standpoint:
Wanting the donate button to be larger or a different color to make more obvious.
Donate page is super boring with no visuals to see of children exploring the outdoors.
Nothing in the site exudes a giving response.
I created these two personas to identify the most common users that tend to donate: those that have strong beliefs in benefiting the future of our society, and those that have the money to give but not always the time. Both personas show these characteristics.
Jessica wants to see concise information on a non-profit, be able to see bright "donate" buttons, and organizations that take the time to reach out to her for engagement.
Jamar desires to see a confirmation page after spending money on a product/donation, time-sensitive content that grabs his attention quickly, and the ability to see original content from organizations that steers away from spamming his inbox.
User Journey Map
UX Scenario (made visible by the User Journey Map)
Jessica finds herself rushing between meetings at her workplace to accommodate all of the clients she is responsible for. After one particularly hectic morning, she drags herself into the office kitchen to heat up her freezer meal. Her coworker Sarah, who works in the HR department, stops to talk to her about her day.
Jessica starts venting to Sarah about her daily stressors with wanting to please everyone. Sarah kindly shares some of the ways she finds satisfaction throughout her week, one of those reasons being that she volunteers at Explore Austin on the weekends.
Sarah begins to tell Jessica about how easy the site is to navigate to learn about the organization as well as clearly showing you how you can donate. Jessica begins to show interest but knows in her mind she can’t really give up her weekends to volunteer because she is already drained as it is.
When Jessica heads back to her office to answer emails, she first goes to the Explore Austin website. She immediately picks up on this nature theme that is shown through in the color palette which she likes as a pull-back from her modern office. It relaxes her mind when she easily learns about the organization and their mission.
Within just two minutes, Jessica has a good grasp of what Explore Austin does and what they are all about. Since she knows that her time is very valuable at this season in her life, she decides to donate. The form for her is laid out very well with lots of visuals and information on what her donation will accomplish. When she fills out the form and makes a payment, she is immediately sent a confirmation and is signed up for the next Donor party that meets twice a year. She can get behind that type of commitment!
Jessica makes space on her calendar for the next Donor party that is happening later this year and heads off back to her meetings feeling the same satisfaction that her friend, Sarah, is currently feeling.
Current Audit of Explore Austin Website
Opportunities for Improvement
1. The site was never made on a grid/layout system before because various items were in disarray when it came to alignment.
2. Color contrast on logo is very poor. The light sand color of the background did not mesh well with the orange-yellowish text on the logo.
3. I did not understand why the social media icons were in the top nav bar because generally they universally fall in the footer somewhere. Current placement seemed distracting from the feel of the site.
4. The donate button was fixed in the menu and did not have good color contrast to show that this was a call-to-action.
5. Donate form was long and some items seemed irrelevant.
6. Not enough visuals were utilized to help bring emotion to people potentially giving to the organization.
Lo-Fi Mockup of EA Site
Usability Testing Insights From Mockups
Homepage - It makes more sense to have the mission statement go all the way across the screen instead of looking like a paragraph, the placing of the donate button is awkward - consider placing it in the menu on the right side, likes the clean order of things on this page.
Donate page - likes the layout of the page with the form on the left side of the screen (generally the form is on the right), consider evening out the text input fields more to look more visually appealing, try making an infographic for the section called "Did You Know" on the right hand side that keeps it from being so bland, move down "Thank You For Your Donation" right below "Process Payment."
Confirmation page - like that the picture is really big, like that the confirmation is personal and lets the user know what they are capable of doing the next time they give money, likes how the user is automatically booked to the next donor party because she gave a generous amount to the organization.
Creating the UI Style Guide
This UI Style Guide demonstrates typography, color palettes, and input fields across platforms to make the site responsive. Currently, the Explore Austin site is not responsive, so having desktop, tablet, and mobile versions will allow for more users to access the organization.
Paper Sketches Preceding Prototype
Next Steps/ What I Learned
Business needs can sometimes vary wildly from what the user needs. I will need to continue to find the right balance there.
Coding is hard, like real hard… *insert Michael Scott quote*
Should still interview more users than I did
Future develop the site by tracking it with HotJar and Google Analytics - see where there could be improvement in redirecting users.
Find better workflows on Sketch to help me with rapid prototyping.
Use Balsamiq more often to create low-fi mockups of future projects for clients.