Cate Hayes
UX designer

Gallery of Contemporary Art

Responsive Web Design

This project was a responsive website design for an art gallery. The main user flow is ordering tickets for general admission to the gallery, and users can browse all the gallery's current exhibitions before ordering as well.

The problem: Many people visiting art galleries are tourists and busy professionals, which means that having a responsive web design for mobile users is important when purchasing tickets. When people are traveling, they may not always have access to a laptop or desktop computer and therefore rely on their mobile phones to purchase tickets, make reservations, etc.

The goal: Give users the ability to browse current exhibitions and purchase tickets for this art gallery from a desktop or mobile browser.

My role: UX designer, UX researcher, Product designer, Visual designer, Interaction designer. 

Responsibilities: 

  • Conduct preliminary user research.

  • Define user problems and pain points based on user research.

  • Ideate solutions to user problems.

  • Create wireframes, mockups, and prototypes that helped solve user problems.

  • Conduct usability studies on prototypes to gather user feedback.

  • Continue ideation on designs based on user feedback.

Understanding the User

Interviews

When I first began this project, I wanted to uncover how users actually purchase tickets for museums and art galleries and what their user journeys looked like.

Respondents reported the following when asked about their user journey buying tickets for an art gallery/museum:

  • The reason for visiting an art gallery was usually traveling to or exploring a new city

  • Most respondents preferred to buy tickets online ahead of time, especially during a pandemic.

  • The expected user experience for ticket purchasing was being able to view a calendar, time slots, and the type of admission you're purchasing.

Gallery of Contemporary Art

User Persona

I created this user persona after interviewing users about their experience purchasing art gallery tickets.

This persona helped me create a user flow that was simple, easy to navigate, and easy to access on many devices. Features that were built from this persona were being able to buy tickets several weeks in advance, saving ticket purchases to a user account, and being able to preview the gallery's current exhibitions before purchasing tickets.

User Goal: Plan a trip to an art gallery

User Goal: Plan a trip to an art gallery

User Journey

I mapped out a user journey to help me better understand where I could streamline the ticket purchasing process.

This user journey map helped me design certain features of the website, such as adding a page to specify each type of ticket and price before purchasing. I wanted to increase transparency in the user flow, and making the ticket options clear helps with this.

Gallery of Contemporary Art

Sitemap

I created a sitemap to map out the navigational flow of the website before I started sketching wireframes. While I didn't end up building out the website to encompass all of these pages, I did include hypothetical navigation tabs for all of these pages in my final designs. The sitemap helped me visualize that I needed to follow a linear structure for the ticket ordering user flow.

A few sketches of the homepage layout

A few sketches of the homepage layout

Sketches

Before sketching, I took some time to write a list of elements I needed to include in my homepage wireframes.

Listing these features helped me come up with a homepage design that helps users gather the information they need before and during the ticket purchasing process. After I was done sketching, I starred elements that I felt would work best from my wireframes and combined them when I transitioned to making digital wireframes.

mobile wireframe for selecting a date for tickets

mobile wireframe for selecting a date for tickets

Wireframes/Low-Fidelity Prototypes

Wireframing for both web and mobile was a new experience for me, but it was helpful to wireframe for both simultaneously for consistency and continuity.

It was useful to create these wireframes and lo-fi prototypes because I wanted to create a design combining the elements I had starred in my sketches. I also utilized these to test the user flow before designing mockups and hi-fi prototypes.

Usability Study

For my usability study, I conducted an unmoderated usability study that asked 5 participants to complete the basic user flow of the design: purchasing a general admission ticket.

I used my low-fidelity prototypes to test the user flow of purchasing a ticket, which revealed the following insights about my initial design:

  • Users needed more transparency about ticket pricing before they selected the date and time.

  • Users needed more navigation cues during the checkout process.

Scroll within above prototype to view full page

Scroll within above prototype to view full page

Mockups/Hi-Fidelity Prototype

Once I completed my usability study and discovered how I could better iterate on my designs, I began creating my mockups. I kept most of the page layout the same but added features such as pricing and navigation cues to improve the user experience.

I wanted this website to feel authentic to a real art gallery website. Many museums and gallery websites attract users and potential visitors using a lot of feature images, so I spent time carefully choosing images and drafting titles for possible exhibitions. I wanted the user to feel confident that they would enjoy the experience when choosing to purchase a ticket for this art gallery.

Takeaways

What have I learned from this project?

This project helped me improve my web design and more specifically, responsive web design. I learned how to design with edge cases in mind, and I learned about the importance of transparency of information in UX design. You never want a user to feel tricked or deceived, especially when their user journey involves purchasing something.

My greatest challenges for this project were balancing images and text in different layouts, prototyping dropdown menus in a new tool, and keeping the design consistent for both desktop and mobile devices.

If I were to do this project again, I would build out more of the website to encompass broader user navigation besides the ticket purchasing process. I would also implement different selection options for tickets (such as a date/time picker for the mobile version instead of listing out the individual dates and times).