Libra Website
A customer service website for an art gallery.
In this 6 week long project for the Google UX Design certificate, I worked as the UX designer designing for a website for Libra Art Gallery from conception to delivery. My responsibilities include conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem
Libra Art Group is a leading Australian art gallery group with four locations across the country. Frequent art gallery visitors become dissatisfied by the lack of variety and relevance in the art on display.
The Goal
Design an website for Libra art gallery which makes it easy for users to find art, exhibitions and genres they enjoy and make bookings.
Responsive High-Fidelity Prototype
Understanding the User
User Research Summary
A questionnaire was conducted consisting of 7 questions directed at users with from a diverse group of age, career and demographic background. We also needed to make sure our users visit art galleries.
Research revealed that both frequent art gallery visitors and travellers who plan their travels around art exhibitions need to easily find details about art on exhibition and book tickets.
User Research Pain Points
1. Lack of information
Users don’t know what to expect and end up feeling dissapointed.
2. When to visit
Busy users don’t know when to visit the galleries to avoid crowds and queues.
3. Information Architecture
Text heavy gallery websites overwhelm gallery users.
Starting the design
Sitemap
Paper Wireframes
Iterations were drafted for each screen, using stars to highlight the most successful elements for the final version. The refined version focuses on optimising the browsing experience for users.
Additional screen sizes for customers using a mobile phone.
Digital Wireframes
Moving from paper to digital wireframes gave further clarity on how the design can solve user pain points. Prioritising useful button locations and visual element placement was a key part of my strategy, to ensure the website is easy to navigate.
Screen size variation
Low-fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of selecting an exhibition, adding tickets to the cart and checking out.
Usability Study Parameters
Study Type:
Unmoderated Usability Study
Location:
Australia
Participants:
Five participants
Length:
20-30 minutes
Affinity diagram
The affinity map summarises the raw data and groups it based on similar participant responses and reactions to usability tasks.
Detailed notes and observations are recorded during usability studies for all 5 participants.
Usability Study Findings
1. Navigation
Make navigation bars design consistent so that users recognise their function.
2. Payment options
Give more payment options at checkout to provide users with more solutions.
3. Account
Prompt users to log into their account, so that they can apply their saved credit card details and save time at checkout.
Refining The Design
Low fidelity
Based on insights from usability studies
The payment process was adjusted to add more payment options.
A step was added, including a payment details pop up which furthermore adds clarity to the check out process.
Additional design changes include:
Secondary navigation bar design was adjusted to match the main navigation, making its function more recognisable.
Mock ups
Mock ups were designed from low-fidelity wireframes, making use of the brands colours and typography to create a website coherent with the Libra Art Gallery brand.
Designs were adjusted for various screen sizes to optimise the browsing experience for a range of device sizes.
High-fidelity Prototype
The final high-fidelity prototype presented an intuitive user flow from searching to booking art, artists and exhibitions between the 4 gallery locations.
Accessibility Considerations
1. Contrasting colours were selected for the design making it easy for users to read and find important actions.
2. I used headings with different size text for clear visual hierarchy.
3. Used icons to help make navigation more recognisable.
Going Forward
1. Conduct another round of usability studies to assess whether the pain points users experienced have been effectively addressed.
Impact
The Libra Art Gallery Website has simplified the process of finding and booking art and exhibitions at Libra Galleries.
What I learned
Whilst designing the website I learned the value of feedback and iteration.
The initial designs were just a starting point which grew into a much more valuable and easy to use product through feedback and iteration.