Jack Gifford
Gallery Genius
Responsive Web Design
Tools: Figma, Google Sheets
Role: Research and design
Duration: January 2024 (3 weeks)
Project Overview
Gallery Genius is a responsive web platform aimed at art enthusiasts and professionals seeking a seamless experience in discovering artists, exploring galleries, and booking gallery spaces. The project focuses on delivering an intuitive and visually engaging user experience across various devices, including desktops, tablets, and smartphones.
My Role
UX/UI Designer
and researcher
Tools
Figma
My Responsibilities
-
Conducting user research
-
Developing personas
-
Journey mapping
-
Wireframing and prototyping
-
Usability testing
Sheets
The Problem
Traditional art gallery exploration can be overwhelming and inaccessible for many, lacking personalization, easy navigation, and simplistic booking. In addition, many users do not use an iphone as their primary device for viewing and booking the art gallery experience.
The Goal
Our goal was to extend Gallery Genius's reach beyond the mobile app by developing a responsive website. This effort was aimed at attracting a broader audience by ensuring the platform is easily accessible across various devices and meets diverse user needs, including those requiring accessibility accommodations.
Initial Challenges
1) User Experience Across Devices:
Making sure the website offers a seamless experience, regardless of whether users access it from smartphones, tablets, or computers.
2) Accessibility:
Ensuring the website is navigable and usable for people with various disabilities, adhering to web accessibility standards.
3) Content Management:
Implementing a robust system capable of managing a growing volume of artwork and artist profiles, ensuring content is up-to-date and easily discoverable.
Research
We relied on the insights gained from the mobile app to guide our approach to the website. The focus was on identifying specific enhancements a responsive design could offer, such as broader accessibility, a streamlined user interface for better user engagement, and an improved system for managing gallery and artist content. Below are a few of the key research questions we asked throughout the research process to insure our insights were beneficial.
Competitive Analysis
Our analysis of competing platforms highlighted a gap in offerings that combine ease of use, aesthetic appeal, and full accessibility. Gallery Genius is positioned to fill this gap by delivering a platform that not only appeals visually but is also fully accessible, including compatibility with various assistive technologies, catering to both artists looking to showcase their work and art enthusiasts exploring new talent
.
-
A focus on simplicity and clarity.
-
An interface for both artists and enthusiasts.
-
A strong visual focus.
-
A structure that suits screen readers.
Artland
Wikipidea
Artsy
Online Survey
Now that we had a general understanding of similar applications, we were in a better position to begin asking potential users more specific questions regarding what they really needed in a responsive gallery viewing and booking application. A survey was the best way to get a large amount of information from a potential user base in a relatively quick and inexpensive time frame. We found and surveyed 21 eligible participants through friends, family and social media.
Key Findings
Feature Prioritization
Device consistency
-
Finding: 40% of non-mobile users were searching on iPads or tablets, indicating a significant portion of users engage with the platform on devices other than phones or desktops.
-
Priority: Ensure consistency across screen sizes to accommodate a diverse range of devices and screen dimensions.
Streamlined Booking
-
Finding: Most user pain points occur during the booking process, suggesting a need for a more intuitive and user-friendly booking experience.
-
Priority: Simplify and refine the booking process to minimize user frustration and drop-offs. This may include clearer call-to-actions, reducing the number of steps, or providing helpful guidance throughout the process.
Image Optimization
-
Finding: Visual-focused websites had issues with responsive images, leading to poor user experience on various devices.
-
Priority: Implement responsive image solutions to prevent layout breaks and ensure images scale properly for different screens, preventing any loss of important visual information.
Progressive Enhancement
-
Finding: The graceful degradation approach, while useful, may not fully support an optimal experience for users on older or less capable devices.
-
Priority: Shift towards a progressive enhancement approach, focusing on content-first design that ensures core functionality and content are accessible on all devices, with enhancements for more capable devices.
User Journey
The user journey is planned to cater to both first-time visitors and returning users, guiding them from discovery to engagement. It includes steps like initial exploration, favoriting galleries or artists, through to the booking or purchasing process. This journey is designed to be intuitive, reducing friction and encouraging deeper interaction with the content.
Phases
Tasks
Browse artist and gallery bios
-
Open app
-
Click on bios
-
Scroll through artist/ galleries
Mindset
-
Excited to find interesting artists and galleries
Opportunities
-
Ensure ease of user flow with visual impairment
View individual bios
-
Select an artists
-
View their bio
-
View their work
-
Overwhelmed by the amount of options
-
Ensure bios can be read by alternative text features
Manage Favorites
-
Find an artist you like
-
Add to a collection
-
Happy to have a favorites page to help navigate upon arrival
-
Simple way to stat favorites.
-
Separate place to view stared artist/ exhibit locations
Repeat, select a gallery
-
Repeat actions 1 - 3
-
Decide which gallery to attend
-
Overwhelmed by the amount of options
-
Simple, straight forward way to select galleries
Confirm Booking
-
Confirm booking and payment
-
View tickets via email
-
Nervous to navigate the gallery alone
-
relieved to have a confirmed booking
-
Simple way to book tickets
-
Way to scan tickets via phone
Site Map
The site map is structured to ensure easy navigation and quick access to all parts of the website. Key sections include a homepage, artist profiles, gallery listings, an about page, and support resources. Each section is designed to be accessible within a few clicks from anywhere on the site, with clear pathways for users to follow based on their interests.
Home Page
Browse Artist Bios
Browse Galleries
Profile Page
Booking Page
Learn More?
No
Yes
Learn More?
No
Yes
View Collections?
No
Yes
Collections Page
About Page
Add to Favorites?
Yes
No
Favorites Page
Gallery Info Page
Book?
Yes
No
Add to Favorites?
Yes
Favorites Page
Booking Page
Ticket Amount
Payment Info
Book?
Yes
Confirmation Page
No
Paper Wireframes
Key User Path - Booking
Laptop flow
Tablet flow
Mobile flow
Testing and Iteration
Our usability testing process involved detailed feedback sessions with participants, allowing us to identify critical usability issues. By categorizing this feedback, we focused on redesigning elements that caused confusion or hindered the user experience. Iterative design based on user feedback has been crucial in refining the website's usability and ensuring it meets user expectations.
Usability Testing Notes
Affinity map
Mockups
Design Kit
The design system for Gallery Genius was developed to ensure scalability and adaptability. It includes a comprehensive set of design principles, reusable UI components, and a color and typography guide that maintains visual consistency across the website. This system is designed to accommodate future growth and changes, ensuring the website remains cohesive and aligned with user expectations.
Colors
#6BCC85
#88DE9F
#000000
#646464
#999999
#FFFEFE
Type
Buttons
