Digital museum experience design
This case study is a continuation of my previous project, the
ArtPass Application for Museum.
While the app focuses on the mobile experience and visitor
flow, this part of the project
covers the redesign of the responsive museum website.
The website required a different visual direction and a
distinct color palette to better reflect
the digital gallery context. For this reason, I present it as
a separate case study, highlighting
the UX approach, responsive logic, and visual system designed
specifically for the web
experience.
I conducted interviews with 6 participants, including casual museum-goers, travelers, and art professionals. From this research, two primary user groups emerged:
Users want fast access to essential information (tickets,
hours, prices, maps).
They expect a clean, modern, uncluttered interface.
Professionals need deeper, contextual, high-quality content.
Existing museum websites and apps often feel overwhelming or
poorly organized.
Critical information is hard to find or buried in long
menus.
Navigation is inconsistent and often confusing.
The museum has no responsive website, making it difficult for visitors to book tickets, check schedules, browse exhibitions, or access reliable, up-to-date information.
To design a responsive, user-friendly website that adapts to any device and provides clear access to exhibitions, collections, artworks, events, ticketing, and visitor information.
To define the website’s information architecture, I structured all content into a clear hierarchical sitemap. The goal was to reduce cognitive load, ensure predictable navigation patterns, and make key visitor actions—such as ticketing, planning a visit, or browsing exhibitions—accessible within 1–2 interactions.
The sitemap was built based on user interview insights and content audits. I prioritized:
This helped eliminate the primary pain points discovered during research: overwhelming menus, unclear grouping, and difficulty locating ticketing and hours information.
Before moving to Figma, I created multiple paper wireframe
variations for the key pages of the website.
This helped me quickly explore different layout structures,
validate content hierarchy, and identify which components
needed prominence on both desktop and mobile.
I focused on:
This early exploration allowed me to eliminate ineffective layouts and move into digital wireframes with a clearer direction.
I also sketched simplified versions for mobile to test how
the structure would scale down.
The priority was to ensure that users could access ticketing
and exhibition content within one or two interactions, even
on smaller screens.
The digital wireframes helped me validate the information architecture and test how key content blocks behave across different screen sizes.
At this stage, I focused on:
These wireframes served as the foundation for defining the layout structure, refining content placement, and preparing for the responsive design stage.
For the primary typeface, I selected Meno Banner, a serif font by Robert Slimbach. Its refined proportions and high contrast align well with the visual language of classical art institutions.
The typeface supports the design goals by:
This serif type was paired with a clean sans-serif family for UI elements to ensure clarity and optimal legibility across devices.
The color palette is inspired by classical art and was designed to support both the brand identity and the usability of the interface.
The palette consists of:
All colors were tested for contrast and accessibility to ensure readability across both light and dark backgrounds.
The component library was designed to support a consistent and scalable UI across both desktop and mobile. Each component follows the same visual principles: clear hierarchy, reduced ornamentation, and high legibility inspired by classical editorial layouts.
The system includes:
All components were tested across multiple breakpoints to ensure proper scaling and visual balance.
Browsing artwork is central to the museum experience. These layouts were designed to support both discovery and deep exploration, adapting content to each screen size.
The booking flow was optimized for clarity and ease. Attention was given to reducing visual clutter on mobile while keeping actions prominent.
These screens help users plan their visit with confidence, offering quick access to essential information like opening hours, location, and accessibility.
Account access is designed to feel private, personal, and easy to use — with a smooth login experience across all devices.
