UX design:

Clark University
Give Page Redesign

Jul 2016 – Jan 2017

This is a website redesign project, aiming to design a mobile-friendly and user-friendly website by using user-centered design methods.

Background

The ClarkConnect site aims to keep connections to alumni and attracts more people to contribute to the university. The old site and the donation form was neither up-to-date nor attractive. So my task was redesigning the home page, and the give form on mobile phone.

User Research

Goal

From interviews and surveys I got my first-hand information. My goal was to:

  1. Define who are the users and what features they have;
  2. Find out what they might be interested from the alumni site;
  3. Know reasons, opinions and thoughts from them about making donations;
  4. Find out what will convert the thought into behavior and how to make one time action into a regular behavior.

Interviews and Survey

There were 5 people involved in the personal interview and 22 people participated in the survey. From the survey, I wanted to find out how much influence the site made for donations, then form a general image of the online donors.

 

What I found from the survey

give-mail-mobile

More people choose to donate by sending out mails instead of using mobile phone

More people donated from snail mail. Because a large amount of people are reminded by mails every year.


Safety and trust problem on online donation

People might give up donation at any step while using mobile phone

I
changed
my mind


It's difficult to find out how much people will donate by interview/survey

It is very quickly for doners to change their mind on the decision of how much they want to donate.

To organize the information I gathered, empathy map built a clear image of typical users.

clark-give-empathymap

User Stories

User stories put users in the 3 scenarios, including before, during and after donations, which specify user intentions and the reason behind them.

From the user stories, I attributed them into 6 categories. Content, function, structure, SEO, marketing and security. These categories are also corresponding to the 3 big problems I wanted to solve at the beginning of this project.

 

 

Let’s fit the 13 user stories into these categories, which helped me better define the problems.

 

 

User flow

With the help of the user story above, I also built the user flow. This flow starts with the potential donors accessing the donate form from different sources. They will go through the form and experience login info match, auto fill, info confirming and subscribing the newsletter. People who got newsletter would get more chance to donate again next time.

 

Information Architecture

What should appear on the landing page?

clark-give-card-sorting

To define what to put on the landing page, I conducted card sorting by asking 3 users grouping site information with paper cards. From the process I decided to put the following part on the landing page.

  • Upcoming events
  • Alumni stories
  • Reunion
  • Media
  • What's happening (twitter)

Visual Design

I started with low-fidelity sketches and worked up to high-fidelity prototype.

In the hand drawing, I formed the home page, a template for the give form, the menu and footer. Bringing the hand drawing to the wireframe, I modified some details fitting in the screen, also made sure all the elements are included.

Usability Testing

Usability tests were conducted in-person with 5 Clark alumni with Guerrilla usability testing. I did the test twice. First was with the wireframe, second was with the prototype.

 

Additional Steps

The project ended at usability test, but there can be more steps:

  • After launching, shorter and more frequent user surveys can be done to improve site features and UI(MVP for this project)
  • Using A/B testing to increase the amount of donations
  • Incorporate participatory design into ClarkConnect website to bring more traffic to the site

What would I do differently on the next project?

About problem solving

I came up with a bunch of questions at the beginning of the project, but unfortunately not all of them had an answer at the end of the project. For example, how to turn one-time donor to donate regularly.

Questions/problems like this is difficult to solve. First, I need to define metrics, how to define success. Second, I need data support, which I could not have access. Actually I should have asked for second-hand information from the school advancement, but I was not able to at that moment. Third, put the product into use and gather data for at least half a year. I could not do it either.

About UX and marketing

I used to ask myself what is the difference between UX and marketing. In this project, I definitely mixed marketing thought. In the user research, I was facing to many potential donors/users, instead of real donors, and my questions are about how to attract them, if they were going to donate. However, the fact is maybe they would never donate. In the future I will specially pick real users.

About learning while doing the project

There is no “standard” process for UX design. Picking the best approaches and increasing efficiency is the crucial work before starting. I was learning while building the project at the same time, so I tried to include as much what I learned as possible. After finishing it, I realize that I put too much time on empathy map, persona, MVP and user stories, especially comparing to the result that the card sorting gets.

If I was going to work on this project again, I would compress my time for empathy map, persona and user stories, skip MVP and put more time on card sorting and sitemap building. After all, it is a big site with 50-60 pages, and card sorting gives you a good sense of how to organize the site. From card sorting I found new insights from people, as well as techniques of how to deal with data. It was one of the fun part of this project.

About the story telling

While working on this project, I forgot to document some parts, so there is limited material to show the process of my work. I believe the story will be more attractive if I use graphics to show more of my thinking process.

View Full Reports

If you are interested in details about this project, please check out the full reports below: