top of page

Articious

Articious is a mobile-first app that re-imagines traditional art galleries and provides visitors with comprehensive and well-organized introductions of artists and their artworks as well as inclusive visiting experiences.

Google UX Design certificate project

October 2021 - January 2022

UX Research, UX/UI Design, Branding

Hero.png

100%
Conversion Rate

9.5/10.0
Customer Satisfaction

30%
Decrement of Failure Rate

Empathize

The other day I asked two friends to visit the newest exhibition together at a local art gallery.

“Nah, visiting art galleries is outdated considering how boring it is...”

Their random complaint suddenly reminded me of my disappointing visiting experiences too...

Art Gallery Failure...

Visiting art galleries has become a popular leisure activity for people, especially those who want to relax and gather inspiration. However, in today's fast-paced environment, the way how traditional art galleries document and illustrate artists and their works frequently fails to satisfy visitors. Instead, they got overwhelmed and confused, stepping out of art galleries in disappointment.

Which roles were involved,
and who should I design for?

I started the project by mapping out some key stakeholders related to art galleries.

Having the largest number among all the listed stakeholders, which could potentially result in the best business model and revenue model, visitors finally became my target demographic.

Stakeholder Map.png

What actually made art gallery visitors frustrated?

Unorganized exhibition

Most art galleries had their exhibitions of artists and artworks poorly organized, making visitors typically spend a lot of time finding favorite artists and works.

Insufficient design process expansion

There was always inadequate information about how artists got inspired and designed their works, which prevented visitors from grasping inspiration.

I had the faith that the best practice to figure this out was to directly talk to users...

Therefore, I conducted user interviews where 5 users who frequently visited art galleries (5 times or more per year). Each of them was asked 8 open-ended questions and their answers were synthesized as the following research insights:

Long and plain texts

Introductions of artists and artworks provided by art galleries were always in long and plain texts that were too overwhelming to read.

Lack of immersive experience

Traditional art gallery installations felt didactic and rigid to visitors. Visitors were not feeling engaged and immersive while visiting.

How might we...

document and illustrate artists and their works in a comprehensive and inclusive way to art gallery visitors so that they have better visiting experiences?

Conceptualize

What have my competitors succeeded/failed?

Before moving to ideation stage, I studied on existing art gallery mobile apps to address their success and failure as inspiration for my own product.

Smartify.jpg
Google Art and Culture.png
Smartify
Google Arts & Culture

Advantages

- Easy to find a specific artist and artwork.

Disadvantages

- No visitor commenting feature.

Advantages

- Visitors could leave comments on artworks.

Disadvantages

- No artist list. No artist bios.

Gallery Explorer.png
Gallery Explorer

Advantages

- Artist list with different sorting options.

- Visitors could leave comments on artworks.

Disadvantages

- Artist and artwork introductions in long and unorganized texts.

How Articious addressed visitors' pain points?

Having all the insights collected, I started to ideate design decisions that addressed art gallery visitors' pain points and met their expectations, and visualize these interventions into Lo-Fidelity wireframes.

Unorganized exhibition
Quick and easy access to artists & artworks
LoFi-01.png
LoFi-02.png
Insufficient design process expansion
Artwork intro for basic info + backstory providing insights from design process
Long and plain texts
Quick and easy access to artists & artworks
LoFi-03.png
LoFi-04.png
Lack of immersive experience
Discussion forum with visitors' thoughts on artworks

How should users move step by step?

As a combination of knowledge and visual artifacts, a wire flow map was articulated where I successfully figured out how the structure of Articious looked like. A user task flow was also made as a further interpretation of users' behaviors while visiting galleries with Articious.

Site Map.png

Would visitors enjoy my design?

To verify if my design interventions work as expected, I decided to grab real users where I can have them execute the user flow and thus gather more insightful feedback. 

I planned my usability test into 2 rounds, each including 5 participants who visited local art galleries at least 5 times a year. Each participant was expected to complete the user task flow by interacting with a Lo-Fidelity prototype I built based on previous wireframes.

During the process, I actively took notes by observing their behaviors and asking for their thoughts, which were then synthesized into an Affinity Map as a reference for design revisions.   

Design

How my visual elements enhanced my design?

As a mobile-first digital archive, users would inevitably read texts on a small screen in different light conditions. Therefore, readability of user interfaces was prioritized and carefully tailored.

Highly readable typography

The typeface I chose, Lato, was among the fonts with best readability on mobile screens, where body text in 16px could further enhance the readability.

Typography.png
B&W, but not B&W

My research showed that combining pure black and white on screen will force eyes to work harder, making users easily get tired. Therefore, a grey-ish black, together with a “white canvas paint” light grey were selected for texts and backgrounds.

Color Palette.png
Reading in the dark

To maximize the visual effects of each artwork, lighting conditions could vary in different areas of an art gallery, where some artworks might require a very dark environment. So a dark mode was designed to ensure that visitors can easily read in the dark.

Home.png
Home-Dark.png

Final Product

Final Product

Reflection

What I learned from the project...

Assign small and easy tasks

Letting art gallery visitors comprehensively and inclusively view artworks may sound vague and complex at the very beginning. However, by breaking it into small, easy and interconnected tasks, users could efficiently complete the flow feeling rewarded.

Human connection results in motivation

The fact that people are social animals makes them feel motivated when using a product that allows them to connect with each other, which was proven by the success of discussion forum feature of Articious.

What I would do if given more time...

Design and implement more accessibility features, such as audio tour and multi-language features.

Conduct more usability tests to ensure newly implemented features are useful and enjoyable.

Other Featured Works

Mockup.png

Flight Club Redesign

Website | UI Design, Branding

Home-Desktop.png
Home-Mobile.png

LearnActive

Web App | UX/UI Design, Responsive Design

bottom of page