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.
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.
From interviews and surveys I got my first-hand information. My goal was to:
- Define who are the users and what features they have;
- Find out what they might be interested from the alumni site;
- Know reasons, opinions and thoughts from them about making donations;
- 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
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.
To organize the information I gathered, empathy map built a clear image of typical users.
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.
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.
What should appear on the landing page?
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
- What's happening (twitter)
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 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.
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.