 Quick search |  Easy booking |  Responsive website |
|---|
Role
UIUX, graphic designer
Duration
1 Week (Oct. 2021)
Overview
This was a passion project, where I did research, testing, prototyping, and branding.
This website delicates to providing modern art exhibitions for its audience. The primary target users include students and art fans who are concerned with the art event and would like to book events via the web.
Type
Personal Project
Tools
Adobe XD, Photoshop, Illustrator
Scope
UI/UX, Graphic design
Key Deliverables
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Kickoff
As a big fan of art, I noticed that the website become an important medium since Covid. The audience uses it to see artworks, attend events and know the new artist. Although an online viewing experience can never replace the experience of walking into the real museum, increasing users are using it to book tickets and preview an event. It's also an essential platform for curators and artists to advertise artworks and themselves.
Problem
The event information on most of the museum’s websites is not very sorted and hard to search for events or find the booking page.
Solution
Design an easy-search online art gallery with a booking ticket system for users to plan their visit to the gallery in advance.
A quick review
Pain point solved
-
Easy to search exhibitions from the home page
-
Quick browse various events by using filters
-
A detailed page for more information on the event
Pain point solved
-
Simple user flow for the booking system
Empathise
Interview
3
People
21-40
Age
20 mins
Average interview time
Goal
1. Understand how do users use an online gallery
2. Uncover user's pain points with existing products
3. Find out potential features that benefit users
Result
I collect reviews from other competitors’ websites to develop interview questions, which were then used to conduct user interviews. Most participants reported feeling not easy to search their interested event and it’s not very user friendly to view the schedule while booking. The feedback received through research made it very clear that users would like to use a website to search and book an art event if they had access to an easy-to-use tool to help guide them.
Problem Statement
Nana is an art student who needs a book ticket via the gallery’s website because she wants to organize a family trip to the gallery beforehand.
Insights
Compiling results from user interviews, I found out the users main pain points while using an existing product. I then synthesized it into insights.
Where to book?
Users want to have a better navigation from the home page when their main target is booking a ticket.
How to search?
Most users get lost or have to scroll a lot for finding their interesting exhibitions.
What's the content?
Users want to see more information for the events, not just a few photos and short descriptions.
Ideate
Information Architecture
With target user study and market insights, I initiated paper sketches and created information architecture.
Digital wireframes
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on creating an easy-used booking ticket system.
Prototype
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing online events and booking a ticket.
Booking system
I created the initial booking system for the gallery’s web.
Usability study
Findings
These were the main findings uncovered by the usability study:
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Iteration
Responsive design for devices
A clear filter is designed for a better searching experience
A better schedule is shown when booking
Highlight main exhibitions and promote other relevant events
UI Design
Brand image
I first set up a brand image for the gallery and then develop the style guide. The image of this gallery is modern and innovative, so I use light typography and bright red, green geometry to match the young image of this brand.
Style guide
The design system follows the colours and the typography of the brand. Only in some headings design, I chose different fonts to stand out from the contents, also simply use black and white colour to be the background to highlight the main colours.
Retrospective
What I learned
Diligently going through each step of the design process and aligning with specific user needs to be helped me come up with solutions that were both feasible and useful.
Next step
-
Conduct research on how successful the web is in reaching the goal to book tickets.
-
Add more educational resources for users to learn about modern art and related event artist.