Tianci Zhang

Tianci Zhang portfolio

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.

UX project
UX/web project

Problems and Approaches

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.

This redesigning project contained multiple small parts. I organized these parts as tasks, and fit them into design approaches. The two columns on the left are design tools and approaches, they helped me with different tasks.

ApproachesHome PageSitemap Give Form
User ResearchInterview and survey
Peer school donate form comparison
Empathy map and persona
MVP and user stories
Information ArchitectureCard sorting
User flow
Visual DesignWireframe
Style guide
Usability Testing

User Research


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.

Empathy Map and Persona

User Stories

In the persona, I formed personal journeys with users thoughts and needs. However, I wanted to create full processes of how users think and dig out why they think these ways.

In the spreadsheet, the following 3 colors indicated the 3 donating phases, before, during and after.

No.NameAs a ...I want...So that...
1Search methodPotential donorFind the donate page ASAPIt saves my time
2User friendly contentPotential donorFeel welcomed when I see the donate pageI am willing to make donations
3Potential donorKnow recent activities the school is holdingI can decide if I want to donate and how much
4Potential donorKnow how can I make donationsI can choose the one fits me
5Donation giftsPotential donorKnow what benefit I can get from the donationI feel honored by the school
6SecurityDonorSee the page has security verified symbolI feel my personal information is secured
7AutofillDonorAutomatic fill to the formI don’t need to repeat typing every time
8Anchoring effectDonorHave some reference of how much other people donateI can decide how much I want to donate
9InstructionsDonorSee instructions of certain stepsBetter trust the page & form, reduce wrong data input
10Recurring donationsDonorKnow more about making donation regularlyPlan my donations
11Donation feedbackDonorKnow what does the school do with my donationsI feel it is worth donating
12Name listDonorSee my name on the donor list in publicOthers know my contributions to the school
13Donation giftsDonorReceive an thank you card or souvenir from schoolFeel the school appreciate donors

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

Card sorting for the sitemap

To build the sitemap, I conducted card sorting by asking 3 users grouping site information with paper cards. I gathered the information of how they grouped the card and why they grouped in certain ways, and documented in the spreadsheet.

In this project, card sorting played one of the supporting role for the sitemap. The pain point of card sorting was everyone had their own way of grouping, and it was difficult to moderate 3 users’ result in the final site map. So I completed the site map based on both the card sorting result and the old website.

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.

Style Guide

Usability Testing

Usability tests were conducted in-person with 5 Clark alumni. 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: