Overview

Asian Art Museum approached LION with a vision for digital transformation. Their current digital ecosystem and organizational data architecture was crowded, disorganized, and not adaptable to the evolving needs of museum guests and staff. This case study outlines my collaborative approach to redesigning the museum's CMS solution and website channel, 1 of 4 long term projects including in-gallery iOS app, digital signage in the museum and more.

Role

  • Lead UX Designer, Project Manager

Collaborators

  • Radmila Zelic Josimov, Senior UX/UI Designer
  • Bryan Turley, Lead Engineer
  • Jonathan Lee, Museum Director of Digital

Deliverables

  • User Research
  • Information Architecture
  • Interaction Design
  • Visual Design
  • Programmed Website
  • Custom CMS

User Research

User research establish a shared, communicable understanding of museum guests' context and feelings as they navigate the landscape of the Asian Art Museum online and off. User personas, task flows, and other diagrams were produced to validate and challenge design decisions.

 

Personas

aam-persona-example.png

USER TYPES

  • Explorer & Facilitating Socializer
  • Facilitator (Parent)
  • Professional & Recharger
  • Experience Seeker (Tourist)
  • Member & Facilitators
  • Volunteer

 

Staff

To create a sustainable digital museum transformation, staff were interviewed to understand the pain points on all the many current CMS solutions they relied upon to captivate audiences and drive ticket sales.

  • Marketing
  • Events
  • Education
  • Store
  • Security
  • Guest Services
  • Membership
  • Information Desk
  • Directors Board

 

SYSTEM Architecture

The current data infrastructure relied on multiple CMS solutions, workflows and data sources. We collaborated to design a CMS tool and process for museum staff to manage all content from one source of truth relying on APIs and a decoupled display channels.

 

Enter once, publish everywhere

A great content experience relies on well-versed and empowered content authors. We designed each content workflow and built it for WordPress. The solution delivers a thoughtful, content author process utilizing atomic design system, CMS controls, layouts, admin types, privileges, and capabilities.

A custom WordPress plugin was designed and built to allow content authors to source official museum images residing in an enterprise DAM called Cortex.

INFORMATION ARCHITECTURE

 

Content DESIGN

Organizing all organizational and design data into a relational database (AirTable) helped streamline planning of all visual design deliverables including sitemap, wireframes, prototypes, CMS documentation and more. Coggle was also used to get help inventory the many taxonomies relied on for website content display and global search.

 

Taskflows

The overall sitemap was reduced through content strategy and task flows for each persona. The main navigation was created through iteration around quantitative and qualitative data synthesis.  Total sitemap URLs were reduced by 30% emphasizing a 'now what' approach to content engagement; we constantly ask the question of our screen interactions, "where might this user wish to go next and how might we facilitate that in 3 clicks or less?"

Task Flows were created for personas to frame content design assumptions and strategy.

Task Flows were created for personas to frame content design assumptions and strategy.

 

Website Design System

This being the first digital design system created for the museum, great emphasis was placed on accessibility and flexibility in every UI component. An inspiring design challenge throughout was finding innovative ways to serve the art experience online while maintaining sustainable CMS flexibility and thresholds.

 

CalendaR DESIGN

 

Key Questions

  • What's the best content mix and components to present events?
  • How might we organize the many types of events using taxonomies, labels, content patterns, and filtering UI?
  • How might we streamline event content management using WordPress and design system?

 

Template Design: Calendar Lander:

Template Design: Calendar Post Detail:

Global site Search

SwiftType was selected to serve as the WordPress multisite's search engine including autosuggestions, algorithmic results, drag and drop optimization, algorithims and content labeling based on agreed taxonomy structure. 

VISITOR CONTENT

 

Response to current design

  • “The current mobile website is slow and hard to find what I need quickly."
  • “I can't find the museum entrance."
  • "How do I buy a ticket online?"

Accessibility

Special emphasis was put on accessibility, following WCAG 2.0 "AA" standards for font size and color contrast to support legibility. In addition the website design system was crafted to support multilingual translation (Korean, Simplified/traditional Chinese, French, Spanish) as well as font-size control.

 

Key Questions

  • How will our modular UI patterns support multiple languages and varying font sizes?

 

Conclusion

A complete digital overhaul is a large undertaking for any organization–especially for ones that have only recently recognized the need for it. Naturally, there is a lot to unpack here for this 3 year project (still in progress) slated for a winter 2019 public release. The final website relies on small handful of reliable infrastructure including WordPress (CMS), Cortex (DAM), Shopify (commerce), WuFoo (forms), MailChimp (newsletter) and Siriusware for ticketing.

 

Final Deliverables (A-Z)

  • System Architecture Research
  • Performance and IT Evaluation
  • Website Multisite and CMS (WP)
  • Digital Design System
  • Research & Technical Documentation
  • UX Documentation
  • Visual Design Mockups & Stylescapes
  • CMS documentation for staff
  • Communications
  • Roadmap & Project Briefs

For more case studies or questions surrounding this project or others like it, feel free to contact me.

 

Thanks for your time!