loading bkgd image (from siqi) (1)_edited.jpg

Archive Dive

A visually engaging web & mobile experience that makes exploring the HistoryMakers digital archive fun. 

Client
The HistoryMakers, Chicago
 

Role
UX/UI Designer 
Producer 

Timeline
15 weeks, Jan-May 2021

Team
with Lauren Zhang, Siqi Wang, Shiwen Jiang, Yue Yuan

Platform
Web & Mobile Browser
 

Responsibilities
UX Research 
Usability testing
Wireframing
Rapid Prototyping 
Pipeline Development
Daily Scrum Master 
Development Documentation

Tools
Figma
Maya
AfterEffects
Photoshop
Illustrator
Trello
G-Suite

Final Product

ArhchiveDive_FinalPresentation.png

Project Trailer

Archive Dive-Poster.png

Logo

Team Branding Design

Poster

archive-dive_logo.png

Project Overview

Our team was tasked to create a visual, interactive and playful web browser experience that will attract the interest of new audiences and encourage them to learn about African American history from The HistoryMakers database.

Our Client 

unnamed (36).png

The HistoryMakers is a non profit organisation that contains an archive of 148199 Stories from 2691 African- Americans collected in the form of video interviews. 

Screenshot 2022-04-17 at 10.03.18 AM.png

Challenge 

The HistoryMaker was founded to address the lack of documentation and preservation of the African American historical record. However, they lack the opportunity to communicate with young community and engage them in the historical process.

Prompt

unnamed (39).png

Draw Young People

unnamed (38).png

Visually Attractive

unnamed (37).png

Cross-Platform

Demographic

People of age 20-29 years of all cultures and professions.

 

Design Process

Research

Analyze

Design

Prototype

Test

Polish

 

Research

Research Methods

Research Goals

  • What are the people's interests in history?

  • What will bring users to the HistoryMakers archive?

  • What are the problems with the existing archive?

  • Interviews

  • Surveys

  • Online research


 

User Empathy

To learn more about the current young people’s interest in history and African American culture, we interviewed 30 students and professionals of different races between the ages of 20-29 and invited them to browse the HistoryMakers website.

Screenshot 2022-04-17 at 10.11.06 AM.png
Screenshot 2022-04-17 at 10.17.47 AM.png

User Persona

unnamed (41).png
unnamed (40).png

User Needs

unnamed (42).png
unnamed (43).png

Matters

Familiar, intimate, firsthand, personal account

Willingness

 Authenticity, Trustworthiness

unnamed (46).png

History Narratives

 Minorities connection

unnamed (47).png

Goal

Present more

dimensionality

unnamed (45).png

African American

Community

& Family History

unnamed (44).png

White Race

Personal Past

Current Website Issues

We tested the existing archive of the HistoryMakers with our users to learn how we can improve the experience of our product. We watched the users explore certain features of the old archive and collected feedback through observation and interviews. 

unnamed.gif

More than 3000 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.

3K+ People Sorted By Last Name

unnamed (2).gif

Limited Info Displayed

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.

Pain Points

Solution?
Easily find a starting point.

Overwhelming Size of Data

Solution?
Curate content based on interests

Hard to Find Relatable Content

Solution?
Fun interactions and visual appeal 

Visually Dull and Disengaging 

Problem Statement

Screenshot 2022-04-17 at 11.52.15 AM.png

Goal Setting

Investigation

Screenshot 2022-04-16 at 9.17.15 PM.png

Experience Goals

unnamed (49).png

1

2

3

Provide an easy starting point

Find people aligned to user's interests

Visually appealing and appropriate 

Project Goals

Screenshot 2022-04-16 at 9.44.19 PM.png
 

Ideation

Each of the team members pitched 5 ideas. We organised our 25 ideas in 3 themes that seemed abstract enough to not offend the African American community. We then created detailed designs and early prototypes to pitch them to our clients.

1a
1
2
3
4
5
7
8
9
10
Screenshot 2022-04-16 at 10.41.38 PM
Screenshot 2022-04-16 at 10.41.48 PM
Screenshot 2022-04-16 at 10.42.00 PM
Screenshot 2022-04-16 at 10.42.10 PM
Screenshot 2022-04-16 at 10.42.20 PM
Screenshot 2022-04-16 at 10.42.40 PM
Screenshot 2022-04-16 at 10.42.55 PM
Screenshot 2022-04-16 at 10.43.07 PM

2

 3D timeline (animated storyboard)

1

Constellation (interactive website)

3

 3D library (unity mockups)

frame1
frame2
frame3
frame4
frame5
frame7
StarryBackground
IMG_0739
Frame 1.png

Experience Personalisation 

Screenshot 2022-04-17 at 10.55.07 AM.png
Screenshot 2022-04-17 at 10.55.07 AM.png
Frame 2.png

Data Analysis for Relatable Content  

We worked worked with the HistoryMakers to derive data that would allow us to create a personalised and relatable experience for the users.

Some common data we found from all the 3000 HistoryMakers' interviews were - 

  • Favourite Food

  • Favourite Color

  • Favourite Season 

  • Occupation 

  • Birth Year

foodPie.png
vacationPie.png
seasonPie.png
colorPie.png
 

Early Prototyping 

Upon testing the 3 ideas with our users and the feedback from our clients we decided to merge the 3D timeline idea with the 3D library. The feedback suggested the players preferred the following from all the prototype that we tested with them. 

  • Visuals of 3D space 

  • Picking album & playing record

  • Picking answer on wheel

Screenshot 2022-04-16 at 10.42.20 PM.png

+

1.png

Early User Flow

Group 1421.png
unnamed (61).png

Headshots in 3D

unnamed (60).png

Record Player

unnamed (65).png

Look & Feel Explorations 

Changed Direction 

Half way through our client decided not to host the video interviews on our experience due to paywall issues.

We had to pivot away from showing videos, focusing on presenting people and their information. 

Not showcasing the videos anymore, we broke the projector down into two parts to make it distinct from a film projector.

1. Replace the videos with a rotating picture carousel which the user can click through to explore the HistoryMakers in a playful manner.

 

2. Replace the projector control like filters to flat stripe filters which will give easy access to data and a quick starting point. 

unnamed (65).png
unnamed (1).png
userflow.png

User Flow

 

Design

Final Direction - Detailed View + Overview

Detailed View

Playful image carousel with slider filters for easy exploration.

Hover over the wireframe to see final results 

unnamed (1).png
unnamed (1).gif

Overview

Engaging data visualisation to explore content based on more personalised filter like favourites.

Hover over the wireframe to see final results 

unnamed (2).gif
Frame 94.png

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.

Screenshot 2022-04-17 at 11.41.21 AM.png

#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.

Screenshot 2022-04-17 at 11.41.28 AM.png

#1 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: Added the fade-in and fade-out effect to the biography information so that the animation can catch the user's attention better.

Screenshot 2022-04-17 at 11.41.37 AM.png

#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

43568293-7151-4c78-b6c6-2775aa711ac5_rw_600.gif

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!

fc7d632f-03f8-480e-bd25-387dc1fc7e5f_rw_600.gif

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.

a78b5eec-d0df-4140-b958-a78ebd364f5f_rw_600.gif

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

 

Responsive UI

ArhchiveDive_FinalPresentation.png
c2bf4da2-7063-4523-b5de-9f9997a7ff38.png
 

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!

 
f21136f7-0f8a-4da9-9d07-d495bd4b8d24_rw_1920.png

Design System