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.
|Approaches||Home Page||Sitemap||Give Form|
|User Research||Interview and survey||✓||✓|
|Peer school donate form comparison||✓|
|Empathy map and persona||✓||✓||✓|
|MVP and user stories||✓||✓||✓|
|Information Architecture||Card sorting||✓|
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.
Empathy Map and Persona
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.||Name||As a ...||I want...||So that...|
|1||Search method||Potential donor||Find the donate page ASAP||It saves my time|
|2||User friendly content||Potential donor||Feel welcomed when I see the donate page||I am willing to make donations|
|3||Potential donor||Know recent activities the school is holding||I can decide if I want to donate and how much|
|4||Potential donor||Know how can I make donations||I can choose the one fits me|
|5||Donation gifts||Potential donor||Know what benefit I can get from the donation||I feel honored by the school|
|6||Security||Donor||See the page has security verified symbol||I feel my personal information is secured|
|7||Autofill||Donor||Automatic fill to the form||I don’t need to repeat typing every time|
|8||Anchoring effect||Donor||Have some reference of how much other people donate||I can decide how much I want to donate|
|9||Instructions||Donor||See instructions of certain steps||Better trust the page & form, reduce wrong data input|
|10||Recurring donations||Donor||Know more about making donation regularly||Plan my donations|
|11||Donation feedback||Donor||Know what does the school do with my donations||I feel it is worth donating|
|12||Name list||Donor||See my name on the donor list in public||Others know my contributions to the school|
|13||Donation gifts||Donor||Receive an thank you card or souvenir from school||Feel 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.
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.
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.
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. 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.
View Full Reports
If you are interested in details about this project, please check out the full reports below:
- Interview and Survey Report >
- Competitor Analysis >
- Empathy Map and Persona >
- MVP Features and User Stories >
- Card Sorting Result >
- Clickable Prototype >
- Usability Test >