Awaken the past, inspire the next

Although it housed some of the world’s most significant collections of Asian art, the San Francisco Asian Art Museum (AAM) needed legitimacy with younger audiences who considered it in the periphery of the Bay Area museum scene.

The team sought to change this reputation with an update of its digital brand alongside the approaching expansion. I was a brand consultant for this digital evolution.

 

A fresh start

We found that a majority of visits started with the desktop site — a confusing mix of legacy, custom, and third-party pages. The museum’s digital experience had yet to espouse its promise of “Asia for all”.

I partnered with the product and creative teams to tame this fractured experience with conceptual and tactical solutions.

 

Analog to digital delight

Inspired by the treasure boxes of Chinese royalty, “Curio Design” was a design story I introduced to spark user-centered pathos for all digital projects. Though eons apart, the parallels in user experience between these containers and today’s personal devices was undeniable.

 
Curio Box from the Qing Dynasty

Curio Box from the Qing Dynasty

These precision-crafted containers stored prized pieces in an aesthetically pleasing and thoughtful manner. They delivered a delightfully personal experience to the royal treasure aficionado.

Curio Design urges designers to also break down AAM’s digital interface into elemental pieces for a more nimble and modular approach. The site could thus better deliver a similar experience for modern museum fans.

 
Every thing in a place, a place for every thing

Every thing in a place, a place for every thing

Curios combine to make up drawers, which combine to make up whole page sections.

 

Competitive analysis and audit

We looked at contemporaries of AAM, and how they achieved similar goals. We also took stock of elements on the site in need of brand/UX updates. Here is some of the audit.

 
 

Style tiles

To quickly get feedback and collaboration with stakeholders and partners, I used style tiles to broadly define a look and feel.

 

As we narrowed in, the tiles dove deeper into individual types of elements such as color, font, CTAs, and content modules.

 
 

Wireframes and sitemaps

Design iteration was informed by wireframes and sitemaps provide by the UX team. I used these to build mocks for proof-of-concept and various pages in the guideline.

 
 

All together now

I used high-fidelity mocks to solicit holistic brand feedback and exercise Curio Design. These were presented in live viewports and devices.

 
Desktop+1200+-+R4.jpg
L Feature - All pages 1200.png
L Full-Width Featured Events 1200.png
M Audio 768.png
L Footer 1200.png
M Full-Width Featured Events 768.png
M Audio 768.png
M Footer 768.png
 
S.jpg
S Full-Width Featured Events 320.png
S+Audio+320.jpg
S+Footer+320.jpg
 

Digital brand guide

I authored a digital brand guide to highlight the design pathos and provide guidance for color, type, grids, and modules. This was a jump off point for future builders of AAM’s next digital brand.