Brooklyn Museum
Website transformation for one of the largest art museums in the United States
Brief
Brooklyn Museum is the second largest museums in New York City. In conjunction with its 200th-year anniversary, the museum is taking on a digital transformation project—refreshing its visual identity, public facing website, CRM and CMS system in order to better reflect the Museum’s new strategic plan and compete within the arts and cultural landscape. As the web design partner, we created a modern site with a highly scalable CMS and robust search to meet the varying needs from the Museum’s different departments and diverse audience, complement existing digital ecosystems, and reflects the Museum’s uniqueness.
Role
UX lead (Led the UX phase, user testing, design system, and partnership with accessibility consultants). Collaborated with three other designers and internal development team.
Company
XXIX / Sanctuary Computer
Discovery
We conducted “listening tours” with Museum departments to understand their needs and painpoints with the current site. Later, we organized workshops to discuss current landscape and used the Jobs-To-Be-Done framework to discover opportunities to further include stakeholders’ voices in our design process.
Jobs to be Done & User stories
We turned insights from each workshops into feature requirements and user stories that are then prioritized with the client and our development team. Technical feedback and outstanding questions are recorded in detail in a shared docoument.
UX phase
We used wireframes and clickable prototypes to discuss navigation, content, and feature requirements with stakeholders and our development partners.
Technical consideration: Unified search, multilingual support
The museum uses different systems for different content types such as collections, posts, pages, exhibtions. We worked with the Digital team at Brooklyn Museum and our technical team to unify the structure across systems so we could create a unified search experience.
We approach multilingual design considering the Museum’s capacity to translate content by launch and best practices. We suggested prioritizing translation for pages around planning visits. On these pages, visitors can access an in-page language drop-down.
User Testing
I designed an aysnc usability testing to discover any pain points around key conversion user journeys such as planning a visit, buying a ticket, and considering membership. The biggest revisions include clarifying the Museum’s ticketing structure, navigation item naming, and content design around audience guides.
Insights
• Most testers find the family guide helpful, they appreciate the amount of offerings and clear organization confirming the validity for user-segmented content • Many testers have difficulty finding the Exhibitions page, the navigation item name “What’s good” was confusing. • Testers did best (70% accuracy) in determining if members need tickets for long-term exhibitions and did worst in determining long-term exhibition costs (5% accuracy). Information around pay what you wish is not clear.
Synthesis and Shareout
I organized painpoints by criticality and recommended design and content iterations. I presented the findings to museum leadership with datapoints and quotes from users, and aligned on areas of improvement.
Digital Accessibility
I was the primary liason between the accessibility consultants, our internal team, and the Brooklyn Museum’s Digital team. I advised our internal team on accessibility best practices, created deliverables for design reviews, and processed and tracked the consultants’ reports into actionable next steps. I gathered the learnings from this collaboration and did a company-wide shareout with hope to continue improving digital accessibility on all projects.
Design system
The design system is created with usability best practices and easy CMS (Sanity Studio) schema application in mind. Part of the challenge is ensuring the system is accessible and functional within the new brand, which is highly codified and minimal. Examples including creating a consistent focus state that meets color contrast requirements across the many color themes (Ad Hoc’s case study was a helpful resource), and ensuring core elements are differentiable. My colleague coded a type generator site to test for optimal type scale.
