Overview
We are challenged to create an experience for our client to encourage the young audiences to use the HistoryMakers website. For this project,  I worked as a UX designer and collaborated with 2 developers, 1 UX researcher, and 1 producer.
Collaborated with Yue, Lauren, Siqi and Anjali | 3 months

Walkthrough of the final website

our Client
The HistoryMakers is a national non-profit research and educational institution committed to preserving and making widely accessible the untold personal stories of both well-known and unsung African Americans who are also referred to as history-makers.
The website contains a database of 150,000 stories from almost 3,000 history-makers.
CHALLENGE
The HistoryMakers was founded to address the lack of documentation and preservation of the African American historical record. However, they lack the opportunity to communicate with the young community and engage them in the historical process

"How might we build a web experience that presents the data in a fun interactive and visually attractive manner? "
Insights from users
In order to learn more about the current young people’s interest in history and African American culture. I invited young people of different races between the ages of 20-29 to participate in the interview. And invited them to browse the HistoryMakers website.
"Users are more interested in those who share similar backgrounds with them."
Current Website Issues
3000 People Sorted By Name
All history-makers are sorted alphabetically by their last names. Thus, many users ended up clicking the first couple of people (whose last names usually start with A) and never had the patience to click through other pages to find what they actually like.

Limited Info Displayed Up Front
Users had to click back and forth to see the biography (which is often incredibly long) in order to make sure that person was interesting enough.

Ideation
Now that I know the problems, our team started ideating the possible solution which includes Record shop, BuzzFeed quiz, Carousel, etc...
Our team will first internally discuss all the ideas based on the feasibility and choose 3 ideas to present in the client meeting. 
Wireframes
After discussions with our client and instructors, our team decided to move forward with the Carousel idea.
Iterations
Our team used a 1-week design sprint (user tests, design iterations, client meetings). In this way, we were able to quickly identify the problem and iterate the design.

Usability test meeting

Based on the user-testing results each week, I iterated the design and handed it over to developers to prototype. Below are some major iterations that I went through:
#1 Better Filter Design
Before: Users can only see one option at a time so they have to click through all the options to find what they want.



After: Made the filters flat so that users can see multiple options at a time.
#2 Clearer Information
Before: Most users tried to click the biggest tile in the center unconsciously to see the information which was already displayed on the right side.


After: I added the fade-in and fade-out effect to the biography information so that the animation can catch the user's attention better.


#3 Additional Help Button
Before: Some testers didn't know how the states were categorized into these regions. 

After: Added a help icon that explains the region category and order convention.

Final Design
Narrow Down Your Search.
First, select the filters based on your interests! It helps you to narrow down from the 3000 history-makers. Feel free to try out different answers or even the filters themselves!

Choose One You Like!
The carousel on the left contains all history-makers that match your answers. Simply browse through it using your mouse. And the short bio on the right side will help you make the decision.

Want To Learn More?
Just found someone you are interested in and want to learn more about? You can click learn more and go to the biography page on the www.theHistoryMakers.org

Fun To Explore!
If you cannot find someone that speaks to you, no worries, just click the explore button below the carousel. We provide you with another set of fun filters like Favorite Colors to help you visualize the result and find the one you like.

Impact
With our newly designed website, there is no bias towards the people on the first page like before. All history-makers now have an equal chance to be discovered by users. 87% of users are able to find the history-makers they like. And 75% of users expressed interest to visit the website again.
Our client is so satisfied with our final design that they decided to publish our website on the HistoryMakers official website! Let's hear our client's feedback on us!

Testimony from our client

You may also like

Back to Top