Design for Digital, Print & Web
The Muse Art Gallery
responsive website design
OVERVIEW
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.
ROLE
User Research, Wireframing, Interaction, Visual design, Prototyping & Testing
DURATION
October - November 2023
User Research: Pain Points
Low-quality images
Users may encounter low-quality images or poorly lit photographs that fail to capture the true beauty of the artworks.
Cluttered
Users may find the website difficult to navigate due to a confusing or cluttered layout.
Loading Time
Users may experience frustrating page loading times or broken links that hinder their browsing experience.
Methods
-
Conducted online surveys with art enthusiasts
-
Interviewed art gallery visitors
-
Analyzed user feedback from existing online art galleries
Findings
-
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.
Recommendations
-
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.
Persona:
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.
Sitemap
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 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.
Low-fidelity Prototype
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.
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
Location
United States - Remote
Participants
Five participants
Lengths
20-30 minutes
Usability Study: Parameters
Usability Study: Findings
Checkout
Users wanted to make sure their Names would be listed on their tickets, at the Checkout process.
Mockups
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
Mockups: Screen size variations
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.
Headings
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
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with images, and demonstrated a clear visual hierarchy.
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.
Takeaways
Follow-up
Conduct follow-up usability testing on the new website.
Identify
Identify any additional areas of need and ideate on new features.