Clark University's website has featured an alumni and donation information page in some form for over twenty years. The most recent version of this, called ClarkConnect, combines all of the above with the ability to make online donations. However, ClarkConnect current page is now outdated, and looks horrible on mobile. This project is a re-design of the onlinedonation forms from a mobile first perspective, completed as a project for Springboard's UX Design Workshop.
Problems of current pages:
The ClarkConnect site aims to keep connections to alumni and attract more people to contribute to the university. The current website is not able to reach the marketing goal. Even though the whole site contains lots of valuable information, the home page doesn’t open doors or provides routs to those topics. It is hard for users to find information they want from this site. The donate form is outdated and hard to use as well.
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 will be checked if they are related to the task.
Tasks
Approaches
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 | ✓ | ||
Sitemap | ✓ | |||
User flow | ✓ | ✓ | ||
Visual Design | Wireframe | ✓ | ✓ | |
Style guide | ✓ | ✓ | ||
Prototype | ✓ | ✓ | ||
Usability Testing | ✓ |
User research helped me to define who are the users, understand their feeling and attitude of making donations and ideally find the motivations behind their behaviors. In addition, it also helped me to find flaws of the current website and potential ways to fix them.
From interviews and surveys I got my first-hand information. My goal was to:
There were around 30 people participated in the survey and 5 people involved in the personal interview. The research helped me clarify the target users. I created the empathy map and two personas based on their age range, life status, current goals and their connections to the university.
I also created user stories to keep wireframes and visual design focused on user needs. This chart not only includes two types of donors but also specifies their needs at different stages.
Want to know more about the user research result? Here are the shortcuts to each part:
Interview & Survey Report » Competitor Analysis » Empathy Map & Persona » MVP & User Stories »
IA is for the sitemap. As it mentioned above, the current website has abundant information but hard for people to spot. Reorganize IA will be the solution. This part, I invited 3 participants for card sorting and created the sitemap afterwards.
In the card sorting, the logic behind everyone’s categorizing is different, which lead to 3 complete different final results. I put their sorting data in the spreadsheet and eventually built a sitemap. Ideally, I should have shown my sitemap to the 3 participants and tested if they could find certain information on the map, but with the tight timeline I did not complete this iteration.
Let’s take one step back. with the help of the user story above, I built the user flow (up-right picture). 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.
I started with low-fidelity sketches and worked up to high-fidelity wireframes. I then create the prototype and put it into InVision for usability testing.
This style guide includes a color palette, typography and button styles for my proposed redesign.
Usability tests were conducted in-person with 5 Clark alumni. From the test and feedback, I categorized problems from deadly to dispensable and improved the prototype.
This project focused on a small but important aspect of the ClarkConnect website, the online donation form UI, but in the process also revealed many new ideas that could be incorporated into the overall UX for alumni and friends. Based on the data collected so far, my top 3 recommendations for the site would include:
What would I do differently on the next 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.