Gallart

gallart mockup

Product: An app that gives access to audio tours of the art gallery.

The app contains audio tours for art exhibitions, which serves as an additional tool to immerse visitors in the atmosphere of an art gallery and improve their experience in the art world.
Target audience: artists and tourists.

Duration

2021 year
5 weeks - 20 hours per week

Problem

  • Some visitors are audial, so they prefer to listen to something rather than read signs and booklets.

  • Some people visit alone or in pairs, so it is too expensive to pay for a guide for that small number of people. It can also be useful in times of restrictions like a pandemic.

Objective

  • To provide more options for visitors. If they don't want to read, they can listen or combine both to get a better experience overall.

  • To provide more options for visitors. If they don't want to read, they can listen or combine both to get a better experience overall.

  • To make the product competitive in the market with other tourist audio guides and provide more art-oriented services that set it apart.

gallart mockup 2

User research: pain points

Payment

Getting an excursion is too costly, especially if you are only by yourself.

Experience

Can’t have full dive into an art experience without a narrator.

Accessibility

Prefer audio recording or have problems with text perception (dyslexia, etc.).

User research: summary

I began my case with empathy to better understand the user's needs. To ensure that I did a little research regarding audio guides in particular.
The next step was conducting user research. I set the main goals and made a list of research questions and assumptions. I used interviews because it was the best way to know what users know and it didn’t take a lot of resources.
Competitive audit served 2 purposes:

  • to know what competitors we’ll have and which services they offer;

  • to analyze their style and understand if there are any similarities between then, so we can stand out among them.

gallart mockup 3

User personas

As I gathered valuable insights from interviews and research, as well as their goals and needs, I created a collective user persona to represent key audience segments and their concerns. This helped me focus on solving the most important problems - meeting the basic needs of the target audience.

persona1

User journey

After understanding the target audience and its problems, I started creating an app that could solve them. The next step was to create a user journey map. As a designer, I have to make it as clear and intuitive as possible. The ultimate goal of this path is for the user to navigate to the audio tour and listen to it, ideally write a comment or note, and then return to the home page. In addition, you can see other routes and pages, such as the profile and settings page.

userflow 2

Design system

Here you can see the final version of the design system for this app. Like any design, this project went through several iterations. I had the opportunity to test our design several times before launching, and I'll show you what I changed soon. Why do you need this system? Well, there are many reasons why designers create them, but for us, the most important one is that it's presentable and makes the process easier. When we list all the important and recurring elements, colors, etc., in a list and organize them, both clients and designers clearly understand it without any problems.

designsystemgalart

Before/After

When I started the project, we discussed the design of the app with the client, and as I mentioned earlier, it went through several iterations. Here you can see the very first sketch we started with and the final version.

ghehrhehrghehrhehr2

Low-fi prototype

The next step was to create a low-fi prototype based on the sketch we agreed on with the client. Here, I placed the components on the pages more clearly and tested the main user journey. The monochrome version allows you to decide on the composition and arrangement of elements without being distracted by colors.

low fi-prototype

Usability testing: results

There were two stages of testing the product. The first one was conducted on an undated prototype, the task was to find shortcomings in the main user journey. The second one was conducted with the first version of the detailed prototype, which is closer to the final version.

Round 1 findings

 5 out of 5 participants could not find the bottom audio bar.

 The current icon for the notes function is not clear to users.

 Comments are useful for some people, but not for the vast majority.

Round 2 findings

 The color contrast ratio did not meet the standards.

 The text was too small.

 The "Find a tour" button was not visible.

Hi-fi prototype. Main page.

t's time to show the improvements between the first version and the second one that I mentioned earlier. As you can see here, I changed the color palette because the previous one had a low contrast ratio and the main button was not easily distinguishable. In addition, I adjusted the text font and made it bigger to make it easier to read and understand. I also changed the search function to settings because it is more important for the user.

comparison1

Hi-fi prototype. Audio panel.

I've changed the look of the bottom audio bar. Now it attracts more attention due to the contrast. I left important settings there, such as play, and removed the rewind and fast forward. They're already on the audio page itself, so there's not much need for them in the small audio panel, where there's not much space. I added tour and audio titles because during testing, many users were confused, saying they didn't know which song should be playing now and what the panel was for.

comparison2

Accessibility considerations

When creating an app, you need to keep accessibility in mind, because the more user-friendly our product is, the more potential customers we will have. In this project, I took three steps to take care of accessibility.

Added alternative gesture options for opening a page.

Used understandable icons to make navigation easier and more intuitive.

Changed the palette and used high-contrast colors for text, buttons, and components to make them compliant with the standards.

Final version

galartfinal Previous projectNext project