DURATION

5 weeks, August 2023–April 2024

TEAM MEMBERS

Debby Chung, Elizabeth Kim, Vivian Le, Alex Mah, Oliver Shapton

MY ROLE

UX Design, User Research

Chinese American Museum of Chicago Website Redesign

For this year-long course project, my team and I were tasked with improving the overall usability and visual design of the Chinese American Museum of Chicago's website. We became design consultants searching for an effective way to equally benefit all stakeholders involved with the museum and allow the museum's awesome features translate into a digital space.

Within the first 5 months, we created project plans and gantt charts to effectively outline client needs and deliverables. You can view our project planning report at this link.

We researched, ideated, prototypes, and tested a website redesign for the remainder of the project timeline showcased below. To view a more detailed outline of the project, check out our final report at this link.

Final Product Video

The CAMOC website is difficult to use.

Our team has been tasked with renovating the museum’s website to ensure that its diverse user base can more intuitively explore and engage with Chinese American culture and history in a more meaningful way. The new website structure would also provide an easy way for museum staff to organize content over time.

After frequent meetings with the museum staff, we defined specific project goals:

1. Ensuring that visitors can easily find the information they are seeking for on the website
2. Building a sustainable structure that the museum staff can follow when changing website content
3. Innovating how the website layout actively engages visitors with ongoing events and exhibitions

Research

Secondary Research

Each team member conducted interviews with museum staff, potential researchers, and community members in order to understand their uses for the CAMOC website. After understanding their needs and problems with the current website, we mapped interviews into 4 overall themes to apply to the redesign of the website:

Theme 1: Website Navigation

Theme 2: Visual Aesthetics

Theme 3: User Engagement

Theme 4: Showcasing Museum Offerings

"The website does not provide a way for users to efficiently access information due to the organization of pages." -P5

"The website has general information but the design is very outdated." -P8

"I think the museum's mission and history should be more comprehensive and interactive for visitors." -P1

"The website should focus on telling visitors what is happening at the museum (rather than group tours)."  -P2

User Personas and Journeys

Based on our interviews and usability testing sessions, we created user personas for each to highlight specific pain points through different experiences on the website. User journeys also help put our personas into perspective defining the key pain points within a scenario. These scenarios will help our team further empathize with the user and utilize certain friction points in their journey to inform our design decisions.

Design

UX Principles

Website Navigation

General Visual Aesthetics

User Engagement

Showcasing Museum Offerings

This requirement aims to align our design with user mental models to reduce the time it takes for a visitor or staff member to find and interact with information on the website.

These requirements aim to improve visual information on the website to appeal to diverse audience of visitors.

This requirement aims to make the website more engaging by highlighting the museum’s history and narrative related to Chinese American history. This includes focusing on content that reflect the museum’s mission in a compelling way.

This requirement aims to address issues with discoverability and content visibility on the website, to better and more quickly inform visitors of CAMOC’s current offerings while maintaining an accessible archive.

Inspiration

Our team started the design process by compiling a collage of design inspiration based from websites for Chinese American museums in the United States, museums in Chicago, and other history museums. From this preliminary compilation, we were able to draw inspiration in terms of aesthetics, visual components, and website layouts that are most popularly used among museum websites.

Sitemapping

Through creating a sitemap of the current CAMOC website, my team and I were able to externalize and analyze the path by which visitors have to travel to access the various resources. It became more clear that our solution would need to reduce this complexity to ensure there is a faster way for users to engage with resources.

Low/Mid Fidelity

After establishing a wireframe and receiving peer feedback that allowed the team to feel our design was both visually engaging and could accurately address UX requirements,  we created multiple iterations of the different pages that would make up the new CAMOC website. Most users expressed their desire for more imagery associated with the museum’s content alongside a modern aesthetic throughout the website, so we proceeded with these overarching needs in mind for our low-fidelity iterations.

User Testing

For user testing, we used convenience sampling due to time and resource constraints. We asked users to give their impressions of our mid-fidelity prototypes. Participants specifically tested the Home, About, Exhibitions, Events, and Visit pages as well as the navigation bar and footer. From this testing session, we were able to compile our user findings to further influence our next iteration of designs.  Core issues included: general navigation experience, text sizing, brand identity, and layout of page content.

A detailed overview can be found in the final report document. (Password: CAMOC)

High Fidelity

From the conclusions we derived from the user testing sessions and peer critiques, updating our style guide after receiving assets from the museum, and refining our work via team-led discussion, we arrived at our final designs. These designs support our four main UX/design requirements and reflect feedback from our initial research, intermediate user testing, and user interviews to address inconsistencies in:  website navigation, lack of visual content and information hierarchy, and general visibility of information on the CAMOC website.

Visual Language

As we started the designs, the CAMOC staff also hired a designer to help rebrand their colors, typeface, and logo. We worked with the designs given to us to incorporate them into the theme and redesign of the website.

Final Prototype

We provided our client with annotated screens outlining each design decision in the final prototype. (Password: CAMOC)

Screen Annotations

Reflection

Throughout the duration of this long-term consulting project, we received feedback from peer designers, instructors, and clients on a weekly basis. We also presented this in our university's expo as our final project. While the design was widely received by our clients and instructors, I was still encouraged to explore making further improvements to the design.

The Chinese American Museum of Chicago plans to immediately implement this website design as a part of their rebranding project within the next year. It was an honor to be a part of their process to continue raising awareness and digital connection in the Chicagoland community about Chinese American culture for community, scholars, and staff members alike.