top of page
1 - Home on laptop_wide.png

The Muse Art Gallery
responsive website design


Bringing Art Closer: A Responsive Website for the Modern Gallery-Goer

Project Goal: Craft a responsive website for an art gallery that immerses busy adults in the world of art, seamlessly guiding them from artist discovery to ticket purchase.

Target Audience: Imagine the art enthusiast on the go: a professional with limited free time, yet a deep appreciation for artistic expression. They crave convenient access to information and a frictionless path to experience art firsthand.


Website Features:

  • Compelling Artist Showcases: Feature captivating visuals and insightful artist bios to spark curiosity and engagement.

  • Intuitive Exhibit Browsing: Facilitate exploration with clear exhibit listings, dates, and descriptions, simplifying event discovery.

  • Seamless Ticket Purchasing: Streamline the ticketing process with secure payment options and clear purchase steps, minimizing barriers to art appreciation

Responsiveness at its Core: The website will adapt flawlessly to any device, from desktop screens to tablets and smartphones, ensuring a consistent and delightful experience for busy adults on the move.

Outcome: This website aims to bridge the gap between busy lives and the vibrant world of art, turning casual admirers into engaged gallery-goers. By prioritizing convenience, clarity, and beauty, we hope to ignite a passion for art in every visitor.

User Research, Wireframing, Interaction, Visual design, Prototyping & Testing

October - November 2023

User Research: Pain Points

low res artwork example.png

Low-quality images

Users may encounter low-quality images or poorly lit photographs that fail to capture the true beauty of the artworks.



Users may find the website difficult to navigate due to a confusing or cluttered layout.

Screenshot 2023-12-22 235332.png

Loading Time

Users may experience frustrating page loading times or broken links that hinder their browsing experience.

Using Mobile Phones


  • Conducted online surveys with art enthusiasts

  • Interviewed art gallery visitors

  • Analyzed user feedback from existing online art galleries



  • Users want high-quality images and detailed descriptions of the artwork.

  • Users want to learn about the context and history of the artworks.

  • Users want a website that is easy to navigate and use.

  • Users want a website that is accessible to people with disabilities.

Outdoors Meeting


  • Create a diverse collection of artworks.

  • Use high-quality images and provide detailed descriptions of the artworks.

  • Write engaging stories about the artworks and their history.

  • Make the website easy to navigate and use.

User Research: Summary

Goal: To understand the needs and expectations of potential users of The Muse Art Gallery website.


Marie Johnson

Problem statement:
Marie, a passionate art history enthusiast juggling long hours as a doctor, yearns to explore the vibrant world of galleries but struggles with her hectic schedule. Deciphering complex schedules, battling inconsistent ticketing platforms, and worrying about closed doors make every art adventure a logistical nightmare. She dreams of an app that curates hidden gems, simplifies ticket buying, and seamlessly integrates art excursions into her busy life. Marie envisions a trusted art concierge, her gateway to enriching encounters with the art she loves.



Intrigued by a brushstroke? Captivated by color? The website guides you seamlessly from artistic discovery to gallery visit.

  • Browse: Immerse yourself in high-resolution artworks on the landing page. Each click leads to the artist's dedicated page: a virtual exhibition unveiling their story and masterpieces.

  • Learn: Biographies, quotes, and curated visuals paint a vivid picture of the artist's creative universe.

  • Experience: Discover their current exhibit at the gallery with clear dates, timings, and effortless ticket purchase.

Paper Wireframes

My goal is to make all navigation elements visually distinct and intuitively placed, guiding users on a seamless journey through the content. I'll use contrasting colors to highlight key links, while crafting a narrative flow that piques their curiosity at every turn.

Digital Wireframe-Desktop-Home.png
Digital Wireframe-Desktop-Featured Artists.png

Digital Wireframes

During a review of the initial digital wireframes, I received feedback that the Welcome video should be left aligned with the text next to it to create a more seamless visual flow and encourage users to read both elements together. I readily adopted this suggestion to enhance the user experience.

Paper Wireframes - Tablet size variation

Adapting the desktop layout for tablet without sacrificing ease of use is crucial. I'll prioritize clear information chunking, prominent navigation elements, and touch-friendly interactions to guarantee users effortlessly find what they need on the go.

Tablet wireframe-Home-Featured Artists.jpg

Low-fidelity Prototype

Low-fidelity prototype_desktop_connections.png

To visualize the artist selection and ticket purchase flow, I sketched out connected wireframes on paper using boxes and labels for key UI elements. This quick and low-fi approach let me focus on the layout and user journey without getting bogged down in visual details.

Feedback from classmates pointed out that the 'Learn More' button for artists felt buried on the initial screen. I addressed this by moving it above the fold and adding a subtle call-to-action label.


By incorporating the suggestion to make artist bios easily accessible from the selection screen, I streamlined the user journey and reduced potential frustration while browsing.


Seeing the connected screens come to life, even in their low-fi form, gave me a real sense of momentum and excitement for the project. Knowing I had incorporated valuable feedback from my team further solidified my confidence in the user-centered design approach.

Low-fidelity iPad_Home.png
Low-fidelity iPad_Featured Artists.png

Digital Wireframe - Tablet size variation 

On tablets, the small video and overlapping text hampered scannability, so I enlarged the video by 40% and shifted the text below. This creates a cleaner hierarchy and prioritizes engagement with the visuals first, leading to a more intuitive and engaging tablet experience.


Study Type

Unmoderated usability study



United States - Remote



Five participants



20-30 minutes

Usability Study: Parameters

Online shopping

Usability Study: Findings



Users wanted to make sure their Names would be listed on their tickets, at the Checkout process.


I needed to add in a field for the User to enter their Name and Email, so make sure their identification is on their tickets and that they receive thei correct info by email.


Mockups: Desktop screen size

Desktop mock ups.png

Mockups: Screen size variations

Mockups_screen size variations.png

Going beyond the desktop, I optimized my mockups for mobile and tablet users based on my initial wireframes. On mobile, a sleek slide-in menu replaces the desktop navigation, and larger buttons ensure effortless browsing and purchasing. Tablet users benefit from a reorganized layout that prioritizes product visuals and descriptions, encouraging them to explore the catalog further.  By tailoring the experience for each device size, I aim to ensure a smooth and enjoyable shopping journey for all users.

Hi-fidelity prototype showcasing User flow

My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.

Desktop-Hi-fidelity prototype-connections.png
Controller Device


I used headings with different-sized text for a clear visual hierarchy.


Alt Text

I designed the site with alt text available on each page for smooth screen reader access.

Accessibility Considerations

Liquid Drop


Our target users shared that the design was intuitive to navigate through, more engaging with images, and demonstrated a clear visual hierarchy.

Traditional Library

What I Learned

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when producing with design ideas and solutions.




Conduct follow-up usability testing on the new website.



Identify any additional areas of need and ideate on new features.

Next Steps

bottom of page