Artlab

Project Overview

Artlab is a mobile website for the homonymous art gallery. I focused on creating an easy IA and promoting the main user flows: checking incoming exhibitions or events the user might be interested in and booking a ticket.

Goals

Keep users updated with ongoing and coming soon exhibitions
Organize IA to create an easy navigation
Create a custom and efficient ticket booking procedure
Design a standing yet minimal visual identity

Kickoff

I found qualitative research methods to suit best for the Artlab project, consisting of literature review, competitive analysis, interviews, and persona hypothesis construction. I started out by asking ourselves some initial key-questions during the kickoff brainstorming.

Who is my primary user?
What kind of goals do they have?
What digital product should I build?

Interviews

I conducted in-person interviews with a sample of 6 participants to understand users and their needs. Research revealed that the possibility to book tickets is not the only reason why users might use a digital product by Artlab: other activities include checking for upcoming events or workshops and exploring past exhibitions. Another fundamental insight suggested the mobile website was the right product to develop.

Outcomes

66% of participants book art galleries and museum tickets in advance
The majority of participants find it hard to stay updated with events organized by art galleries
100% of participants prefer to reserve tickets with their mobile phone
83% of participants prefer not to download a dedicated museum/art gallery app

Insights

Booking flow is crucial
An event section is important
Design mobile first
Mobile website over mobile app

Personas

The foundational research outlined two different groups of users: young adults passionate about art and older users that fall outside of the millennial generation, which have a very different approach to technology compared with the first group. Thus, I created personas to represent these groups.

Competitive Audit

I looked at several potential competing art galleries and museums. Art galleries are direct competitors, while museums can be considered indirect competitors. Although these two groups have different audiences they share some common traits and face similar problems.

Key-points

Minimal and no-branded aspect VS Strong brand identity
Tendency to create desktop-first websites
Austere and almost academic tone is predominant
No halfway between an overwhelming amount of information and poor content

Insights

Mobile website will better target the desired end-users with less competition
Less formal tone will captivate more primary users
Amount of content should be carefully balanced
Bold brand identity fits better the Artlab audience

Storyboards

I drew a storyboard of the big picture and the small pictureto explain how the new Artlab mobile website will affect the user, which also helped me to empathize with users.

User journey

Wireframes and lo-fi prototype

I started to sketch some basic wireframes. I focused on the main user flow and left other features and sections for later. As soon as I had a basic set of paper wireframes I created a digital version to build a low-fidelity prototype for testing how users interact with the product during the primary user flow: checking for exhibitions and booking a ticket.

Sitemap

After the user testing validated the main user flow was efficient, I started to implement the sitemap of Artlab and create another round of more refined wireframes to test the new prototype.

Wireframes iteration

I created a new set of more advanced wireframes and improved the prototype to get closer to the final product. The new prototype has been tested again in a unmoderated usability study with 5 participants. The user flow was extended also to the event section. The tasks were to check exhibitions, check events, look for relevant info, and to book a ticket for a given event/exhibition.

User testing outcomes

The only major issue reported by the second test was in the event section: events were organized in a vertical accordion that turned out to be cumbersome to use, because, once an event is opened, the big spread of text doesn't allow to easily undo the operation. A side overlay of the event cards solved the problem.

Before

After

Final design

After the user testing validated the main user flow was efficient, I started to implement the sitemap of Artlab and create another round of more refined wireframes to test the new prototype.

Prototype

Booking a ticket

Booking a ticket is the main user flow. It has to be easily accessible from different points, such as the main menu and at the bottom of each event. The designs system spreads consistently also in the payment section to give a special look to Artlab mobile website.

Checking new events

The event section is a list with a sliding event-cards overlay. This allows to easily display basic information and eventually open and close the event card to read more about the event.

Scrolling exhibitions

Scrolling through exhibitions to find important infromations is crucial for every users. A clean yet captivating visual design and a correct distribution of informations keep the user engaged without overwhelming him.

Design system

Utilizing only two main colors was a bold choice to make the Artlab brand identity stand out from the crowd. The neon green spreads all over the website and conveys a sense of irreverence typical of an independent art gallery, proud of its freedom of expression. At the same time, the not full-bodied black of the type provides a smoother contrast with the background, providing a pleasant balance despite the high contrast.

Conclusions

All the participants were enthusiast about the website. They loved so much the possibility to easily check events and book tickets. Reading their comments during the interview it is clear that a branded website strongly increased the appeal of Artlab over all of them.

Even if an Art Gallery website might seem an easy challenge, there is some complexity to properly organize which requires a thoughtful design, especially if the website has to meet the newest UX standards.