Objective
Create an experience for our client to encourage the young audiences to use the HistoryMakers website. In this team, I, as a UX designer, 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.
Its 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 browser 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 Lastname
Many users ended up clicking the first couple of people (whose last name usually starts with A) on the page and never have the patience to click through pages to find what they actually like.
Limited information displayed at the front
Users have to click back and forth to see the biography (which is often incredibly long) in order to make sure that person is interesting enough.
Wireframes
Iterations
Our team uses 1-week design sprints (user tests, design iterations, client meetings). In this way, we are able to quickly identify the problem and iterate the design.
#1 Advanced Filter
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 stripes (keeping the dragging component).
#2 Image Click Event
Before: Most users tried to click the biggest tile in the center unconsciously to see the information which is actually on the right side.


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


#3 Help Button
Before: Some testers don’t know how the states were divided into these regions. 

After: Add a help icon that helps explain the region and order.

Final Design
Limited information displayed at the front
Users have to click back and forth to see the biography (which is often incredibly long) in order to make sure that person is interesting enough.
Limited information displayed at the front
Users have to click back and forth to see the biography (which is often incredibly long) in order to make sure that person is interesting enough.
Limited information displayed at the front
Users have to click back and forth to see the biography (which is often incredibly long) in order to make sure that person is interesting enough.
Impact
Our client is really satisfied with our final design such that it has been hosted on the HistoryMakers official website! Let's hear what's their opinions on us!

Testimony from our client

You may also like

Back to Top