Revamp the complex information presentation for the Chinese Historical Society in New England

CHSNE Web Redesign

ROLE
Solo student project for
Information Design Class
TIMELINE
April - June 2022
(10 weeks)
SKILLS
Information Architecture
UX Researching
UX Designing
Product Thinking
Strategic Design
Web design presented on MacBook and iPhone mockups.
chsne and the forgotten history

Many histories of minority groups are still forgotten or unseen.

The Chinese Historical Society of New England (CHSNE) was founded to fill in the gaps of historical education about Chinese American immigration in New England and to ensure that their stories and contributions are remembered.

"... and this website doesn't help."

CHSNE has a wealth of historical materials that they want to share with the world through online exhibitions, events & more.
But their original website was cluttered, unorganized, and without appropriate hierarchy, making it difficult for visitors to find the information they were looking for.

HMW help CHSNE effectively present the brand and message through an organized & easy-to-navigate website?

So that the website can be a useful tool to promote the public knowledge of the Chinese Americans's history, a piece that is missing from most American classrooms.
User Interview
Uncovering the mystery of involvement
To kickstart the project, I started by conducting a series of user interviews with 8 people who had experience with historical society websites. I've asked them questions of below to find out how they interacted with the websites and identified 3 main pain points through affinity map.
INTERVIEW QUESTIONS:
‍1. What usually makes you pay attention to the history of other ethnic groups?
2. What prompts you to visit a historical society's website?
3. What factors affect you when deciding whether or not to continue exploring the website?
4. Under what circumstances would you donate to the organization?
INSIGHTS:

Overwhelming Contents

People are tend to lost in the daunting amount of information historical society website provides.

Boring Showcase

People tend to lose interest in historical records that are densely packed with text.

Lack of Donation Awareness

Most sites don't effectively and emotionally communicate its need for donations.

Identifying main user types

Based on the patterns identified in the affinity map and my secondary research on CHSNE's current website, social media, and reports about the general historical societies, I found these three main user groups.
Members and people who are closely connected with the Chinese American community in New England.
Educators looking for educational resources for related history to promote cross-cultural understanding.
People who are curious about the organization or Chinese American history/culture.
User JOURNEY
The journey of Explorers
Unlike the Affiliates and Educators, Explorers often have little emotional connection with related history and lack a clear and persistent motivation to browse the website of historical society like CHSNE. The design of the website can easily affect their involvement. Therefore, the focus of my design lies with the Explorers.

The design goals of CHSNE website

Clear hierarchy
Present the information with priority and reduce the cognitive load.
Compelling message delivery
Encourage more website visitors to stay and interact with the website.
Encouraging donation
Highlight the donation function and smoothen the process.
competitor analysis
Gathering more insights
To gain inspiration and identify best practices for the website redesign, I reviewed other historical society websites but found many of them were poorly designed due to budget constraints. I then turned to museums but found many of them were too complex and extensive for my project on CHSNE. Nevertheless, I identified common patterns among these websites and distilled the key aspects that would be relevant to CHSNE.

1. Key Components: Exhibition, Events, Education, and Get Involved.

In most historical society and museum websites, you will find these sections, which essentially encompass the most critical elements of these types of sites. They showcase the content and activities, offer educational resources, and encourage donations or other forms of support to sustain the organization.

2. Repeated compelling Donation section.

Almost all of these websites prominently display a donation section at the end of various pages as a reminder for visitors to support the organization.

3. Without "Plan To Visit", CHSNE website will focus more on online exhibition.

CHSNE does not have its own physical space for exhibitions. Visits must be arranged in advance through email with the volunteers, which is different from other historical societies and museums. As a result, I will place more focus on enhancing the online exhibition experience, and change the "Plan a visit" option to a "Contact us" section.

information architecture

After card sorting with 11 people, I created a new sitemap.

To ensure that the new sitemap for the CHSNE website aligned with the mental models of the target audience, I conducted a card sorting exercise. This involved both moderated offline card sorting with 5 participants and unmoderated online card sorting with 6 participants, who closely represented the target audience personas.

Redesigning homepage with key components

As the first page that visitors encounter on the CHSNE website, it was crucial to ensure that the homepage effectively showcases the main features and goals of the organization. I highlighted the key components such as upcoming events, featured exhibitions, collaborations, and ways to support the organization, making it easy for visitors to quickly find what they're looking for and engage with the CHSNE.

Conceptualizing a new exhibits presenting template

Since CHSNE doesn't have a physical exhibition space, it is crucial to have an attractive and user-friendly online exhibiting template that allows visitors to easily browse and learn on the screen.

The original CHSNE website's online exhibitions often consisted of multiple text paragraphs, numerous historical photos, and separate related stories or anecdotes. I reorganized the pictures and stories into respective groups at the end of the main exhibition paragraphs, and added a section for a brief introduction and quote to guide the reading." without changing the original meaning

Unifying the basic design

I designed the basic wireframes of the main pages to ensure that the design elements and language were consistent and unified throughout the site, providing users with a seamless and cohesive browsing experience.

Iterations with testings

I utilized the wireframes to carry out usability testing with 4 participants, which provided me with vital feedback on what to incorporate into the final experience before proceeding with the next design iteration.
‍
In general, users had no major difficulties with the website; however, I needed to rectify some minor problems with content positioning and make the content more interactive and engaging. I implemented several rounds of iterations based on the feedback and testing to guarantee that the wireframes encompassed all the necessary features. After finalizing the design's functionality, I proceeded to develop the user interface.

Setting the tone and mood

I considered various Chinese traditional color palettes. The goal was to highlight the elegance and charm of Chinese tradition while avoiding colors that would detract from the exhibition images.
‍
For the font, I selected a refined serif font for headings to create a formal and traditional feel, complemented by a modern sans serif font to maintain a balance.
homepage

Communicating the identity and message

By featuring the mission statement prominently on the website with an exhibited painting as the background, it can help to build trust and engagement with visitors and encourage them to support the society's cause.

repetitive donation card

More compelling donation card

I took the elderly lady's portrait to give a feeling of closeness and connection. Gesture of holding hand is for a sense of memory inherited and kept from the previous generations, which echoes with the main campaign words.
exhibit page

A more intuitive exhibition list

I highlighted the featured designs at the top without listing all the exhibition boxes by box to avoid the Paradox of the Choice.
Featured stories of important historical characters are listed here as complementary to the exhibitions, which creates a new tunnel for visitors to explore the content and shed light on the previously forgotten stories in the corner of the website.
Exhibit individual page

Enhancing the immersion & interactivity of the exhibited storyline

The tabs here allow CHSNE to categorize past text-heavy exhibition content into different parts based on time or other labels in the future.

This way, visitors will no longer be overwhelmed by large amounts of text, but instead can build an information structure in their minds through a more effortless and chunked reading experience.
The original website had many stories of specific historical figures and disorganized image albums, which were scattered throughout the site. Although some were related to other exhibitions, they were not well linked.

Therefore, I designed sections below the main text for related stories and photos, allowing visitors to connect the dots and easily learn about the history.


"More on View" encourage viewers to explore more exhibitions on the website rather than just leave the page.
donation page

Illustrating the impact of donation

I aimed to simplify the donation process for visitors by redesigning the money donation page to incorporate suggested donation amounts.

To further encourage the donation, I made sure that the page clearly explains how each donation amount will help CHSNE, emphasizing the impact their donation would have.
about us page

Establishing trust and celebrating the achievements

I aimed to create an atmosphere of trust for visitors while educating them on the impact of CHSNE. This approach is crucial in motivating more donations.
‍
I started the about page with quote of founder to add credibility, draw connection between the CHSNE and website visitors and emphasize the most important mission.

The image of Chinese traditional celebration ceremony here gives a feeling of what CHSNE does is celebrated by the local ethnic group. Also it implies CHSNE is also actively promoting cultures and taking part in the public affairs.

This section “CHSNE Through the Years” used the design component that had been used on other pages. It shows the highlights of CHSNE's thirty-year history through several image stories complementary to Our Story's paragraphs. It tells the CHSNE's history in a more interactive, direct and colorful narrative.
The qualifications of CHSNE and its celebrated past are also shown here in "Our Achievements" section. These together have established a long-standing, active, and trustworthy image for CHSNE, worthy of support.

Final Design - Desktop

Link to my full Figma prototype here.

Final Design - Mobile

Link to my full Figma prototype here.
Conclusion + lesson learned

What I learned from this project

This project was my first web design UX project (yay! 🥳), and it was a challenging but ultimately rewarding journey. I gained so much experience along the way, and here are a few things I learned:

1. Iteration and testing are designer's good friends.
At the start of the project, I conducted extensive research and exploration to find the best possible solution for my main user group, the "Explorers." I explored many different design options and ended up restarting the project over three times to ensure that every aspect of the website was designed with intention. However, iterating on my own was not enough, user testing also provided me with additional insights that helped me perfect the project from the user's perspective.

2. Clear documentation makes life a lot easier.
While designing in Figma, I made it a habit to clearly name each component and group and arrange them in a logical design order. I also made sure that padding and other formatting were consistent throughout the project. This somewhat compulsive habit really saved me a lot of time during the design process, as well as during feedback and presentations to my professor as I didn't have to spend extra time searching for things like layers.

3. Design the website with text copies ready.
It is important to use real copy instead of placeholder text because placeholder text can be easily adjusted to fit the design, whereas real copy often has a fixed length. Designing with placeholder text may result in having to completely redo the design to accommodate the actual copy. To save time and effort, it is best to communicate with stakeholders and obtain website content in advance to use as a basis for design.

Fin.

Go Back to All Project →