The Gallery
Responsive Web Design Case Study
Challenge: Design a responsive website for a public art museum to advertise exhibitions and events, provide museum information to patrons, and enable patrons to schedule visits.
Background and Research
In user studies and surveys addressing the challenges of current museum websites, respondents frequently highlight issues with navigation, accessibility, and responsiveness. Many users report difficulty locating essential information such as exhibition details, event schedules, and ticketing options due to cluttered or poorly organized interfaces. Additionally, non-responsive designs lead to subpar experiences on mobile devices, where text becomes too small or buttons are difficult to press, resulting in frustration. Users have also expressed that museum websites often lack clear calls-to-action or intuitive flows for booking visits or accessing interactive content, such as maps and locating exhibits within the establishment.
Poor Mobile Responsiveness
Users struggle with distorted layouts and too many or non-clickable elements, making it hard to browse on smaller screens
Confusing Navigation
Menus are either overwhelming or unintuitive, requiring too many clicks to find relevant information
Research Goals
Limited Accessibility
Creative websites often focus on aesthetics and neglect users with certain accessibility needs such as high-contrast modes and resizing options
Increase website traffic through both web and mobile users
Pain Points
Learn and address the challenges that users face when completing essential tasks such as buying tickets
Assess and address accessibility gaps of users when they navigate museum websites
Personas
Daniel
Age: 52
Occupation: Retired IT Manager
Location: Austin, TX
Tech Skill Level: Advanced
Device Preferences: Desktop (PC), occasional tablet use
Frustrations:
-Websites that lack proper accessibility options, such as text scaling and contrast adjustments.
-Difficulty finding archived information about past exhibitions or events.
-Long forms or confusing processes for booking tickets online.
-Lack of event updates or notifications for cancellations or schedule changes.
Emma
Age: 30
Occupation: Art Teacher
Location: San Francisco, CA
Tech Skill Level: Moderate
Device Preferences: mobile (iPhone)
“Booking tickets through my phone shouldn’t feel like solving a puzzle.”
Goals:
David is a retired IT manager who enjoys learning about art history and often attends museum lectures, gallery tours, and other cultural events. He appreciates clear and detailed information on museum websites, especially regarding special programs or events. David also relies on websites being fully accessible, as he has mild visual impairments and uses features like text scaling and high-contrast modes. He has a keen eye for how websites should function and often notices design flaws.
-Find exhibitions and events that align with her teaching themes or personal interests.
-Easily book tickets for herself and her class, especially from a mobile device.
-Receive personalized recommendations based on past visits or interests.
-Quickly access museum information, such as hours, ticket prices, and location.
Emma is an art teacher who loves to visit museums in her free time to find inspiration for her students. She regularly checks museum websites for upcoming exhibitions and events, especially those related to modern and contemporary art. She also organizes class field trips, which often require her to book tickets online for groups. Emma values intuitive websites with easy navigation, especially when browsing from her phone between lessons.
Frustrations:
“I understand websites need to stand out to stand out, I just feel there is more that goes into that!”
Goals:
-Stay updated on upcoming lectures and guided tours offered by the museum.
-Use an accessible, well-designed website that accommodates his visual needs.
-Quickly find specific information about past exhibitions and archived content.
-Access clear and reliable visitor information, including parking and accessibility policies.
-Mobile websites that are poorly optimized, making it hard to navigate or read exhibition details.
-Cumbersome ticket booking processes, especially when booking for groups or events.
-Difficulty finding updated information about last-minute event changes or closures.
-Lack of recommendations that cater to her interests in specific art styles or periods.
Competitors
Pérez Art Museum Miami
Cons
Overwhelming homepage: There’s a lot of content presented immediately, which could overwhelm first-time visitors.
Navigation complexity: The layered navigation structure may confuse users trying to find specific information quickly.
Accessibility issues: Though the colorful design is appreciated, it can cause issues for users with different accessibility needs such as high-contrast visibility.
Washington DC Museums
Cons
Overwhelming homepage: There seems to be a trend of overloading the homepage with as much information as possible on museum-focused websites.
Overloaded with links: The site can feel overwhelming due to the number of links, making navigation a chore.
Pros
Extremely well-designed in terms of responsive web design - accommodates both mobile and desktop beautifully.
Interactive and sleek design: Perfect for an art-focused website.
Pros
Comprehensive content: Offers detailed information about various museums in Washington, making it a one-stop guide for visitors interested in discovering multiple cultural institutions.
Responsive design: The site adjusts well across different devices, enhancing mobile accessibility.
Inspiration: branding, color palettes, and concepts
I wanted to develop a color palette that took inspiration from iconic art by Monet and Studio Ghibli, while also remaining subtle and accessible to most personas’ needs.
I chose a muted primary color for the background to initiate the template theme, while keeping it white in the accessible version
