Quick search

Quick search

Easy booking

Easy booking

Responsive website

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.

mockup01.jpeg

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.

截圖 2021-12-02 22.42.07.png

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.

Site map.jpg

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.

0-2 What’s on.png
1-1 Exhibition.png

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.

截圖 2021-11-05 下午11.26.06.png

Booking system

I created the initial booking system for the gallery’s web. 

截圖 2021-12-02 19.44.27.png

Usability study

截圖 2021-12-02 19.33.23.png

Findings

These were the main findings uncovered by the usability study: 

截圖 2021-12-02 19.20.19.png

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.

截圖 2021-11-05 下午11.54.13.png

Iteration

 
Mockup02.jpeg

Responsive design for devices

A clear filter is designed for a better searching experience

截圖 2021-12-02 19.25.41.png
截圖 2021-12-02 19.27.24.png

A better schedule is shown when booking 

Highlight main exhibitions and promote other relevant events 

0-2 – 1.png
0-2.png
0-1.png

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.   

截圖 2021-12-02 22.19.48.png

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.

截圖 2021-12-02 22.28.45.png
截圖 2021-12-02 22.23.48.png
截圖 2021-12-02 22.29.56.png

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.