Discovery

what's the problem?

According to our contact at the university, they were experiencing issues with both their Giving landing page and their Giving online payment form. Unfortunately, they were not seeing the kind of conversions that they were expecting on either workflow. Only a low 8% of users that visited the landing page were making it through to the payment form. Additionally, only 40% of the users that made it to the payment form actually completed it. This means that only 3.2% of users that arrived to the landing page actually donated a gift.

research

connecting with users

We took daily calls with our contacts at the university and weekly in-person meetings to review findings and designs. We began by meeting with our client at the university to understand all of the goals that they wanted to achieve throughout this project and to confirm the feasibility of what we could address within the project timeline. It was requested that we focus on “everyday normal people” as our target users. The targeted user was 18-50 years of age, had an average income, and worked a normal 9a-5p job or was a student.

We immediately started by walking around campus and questioned about 25 people total (students, professors and staff). We then questioned family and friends on whether they'd be willing to donate to the university. Immediate feelings of confusion and disbelief stood out.

heuristic analaysis

Let's take a look at what could be confusing users. We immediately started with performing a heuristic analysis of both the existing Giving landing page and payment form and identified some heuristic issues that may have been preventing visitors from easily being able to accomplish their giving goals. The scope of this project was primarily centered around these two pages.

user interviews - Online payment form

As expected, most interviewees had a mental depiction of Stanford that was privileged or spoiled and prioritized its own needs over the cause. The promise of helping students gain a good education was not enough here.

Our client was able to connect us with 5 existing donors. Since these donors had already given to the university, we wanted to hear about their experience with filling out the online payment form. Common issues that were mentioned:

design

landing page design

After analyzing all of our research, we felt the best plan was to focus on including those elements that touched the emotions of being well informed about why this so seemingly wealthy university could still tremendously benefit from the help of our target user, as well as imagery on who they'd be helping. We also wanted to showcase the breadth and width of the site to provide a multitude of ways that potential donors could become involved with the university and all of its causes. We began with drawing up some rough drafts for what the landing page could look like. The giving landing page is the first place that most donors arrive, so this is where we wanted to draw out those feelings that we discovered from our surveys and interviews. To do this we focused on:

With a combination of testing with real users and using Usertesting.com, we were able to iterate on two more versions of the online payment form. Ultimately, users were just looking for a simple and quick method of being able to donate. We also suggested that the university add the convenience of a quick pay option, as it was mentioned several times in testing sessions.

final designs

By compiling all of our research and user feedback, we were able to design one final iteration of each the giving landing page and the online payment form to present to our client. With these final designs, we utilized the Stanford University design system to align the branding and style of our design to the University and make things simple for their team to implement.

success metrics

We presented our final designs for the client and they loved them. They were super excited about the changes and eager to implement them on their website.

Regarding the giving form, we were able to cut down the time to complete the form by 50%. Testers cited a simpler, "less daunting" process, cleaner look, and the quick payment option as reasons of preference towards our designs over the current design.

looking back

make better use of wireframes

Looking back, I think that I could've made better use of low-fi wireframes to maximize feedback in the few client meetings that we had. With this being my first official client, I think I was a bit eager to create some cool mockups to show but moving forward I want to make sure that I always have mastered the element of "functionality" before investing time on polished visuals.

be able to adjust

Being able to adjust your plans is important. I think we did a pretty decent job of using our time to come up with the best design for our client, but it was a challenge coordinating times to speak with some of the users provided by the client. With the 3-week timeframe on the project, we sort of had to work around the schedules of these users, forcing us to adjust our plans at times.

next steps

If given the chance, I'd track the performance of the payment form to confirm if our solution remedied the abandonment rate issue. Regarding the landing page, I'd be really interested in tracking the conversion rates and mapping the many different navigation routes that users take to arrive at the payment form, to uncover more insights into what could further interest potential visitors of the page.