Art Attack Museum App

Project Overview

This project was about designing an app for a public art museum to advertise exhibitions, provide museum information to patrons and enable them to schedule visits. The target users were visitors (either tourists or locals) that were interested in art.

The project was completed under the Google UX Design course, so the information provided on the app is fictional.

A website was also designed for the same museum, after the completion of the present project (click here to view the case study for the website version).

My Role

As this was the first project I completed while taking the Google UX Design course, I worked on it on my own from beginning to end. My responsibilities were conducting user research, wireframing, creating low and high fidelity prototypes, designing the mockups and testing. 

Problem

I had to build a responsive app that should be appealing to the widest user range possible. The platform had to be built in such a way that would provide the users easy navigation and fast completion of their tasks.

Goal

After understanding the users’ emotions and common behaviors, my goal was for the platform to be able to provide clear information to them in an engaging way, to advertise current and upcoming exhibitions in a non-aggressive way, and to enable a visit scheduling feature.

User Research and Empathizing

Summary

After setting my goals and questions, the information needed was gathered through notes and recordings during interviews. What followed was summarizing the findings, building empathy maps, user personas, user stories and journey maps, while identifying pain points.

Pain Points

• Not a lot of free time: Straight-to-the point interfaces, features and notifications may make an app easy to use, without spending a lot of time searching for the desired action.

• Lack of information: Providing clear information is crucial. Also, the users’ frustration about never learning about events may be decreased by building sections not only for “current”, but also  “upcoming” events, and by good advertising.

• Choice of having guidance through an exhibition: Giving the choice to users to schedule a personalized visit may include providing information about how and when they can book a tour guide.

• Can’t process text information quickly: Accessibility is key, so features like customizable text or screen readers can make an app more appealing. Also, by using confirmation buttons the user sets their own pace to read and interact.

Personas

User Journey Maps

After setting a clear goal followed the identification of the user’s path, by writing down their actions, tasks and feelings and adding recommended improvements for their experience.

Define Phase

Problem Statements

Eva is a 29 years old teacher and traveller who needs to have adequate and on-time information about the museums’ exhibitions, because otherwise she feels like she misses an opportunity.

Nicolas is a 40 years old paramedic who needs to be able to process text information more easily when visiting an art museum’s app, because he has dyslexia.

Ideate Phase

Goal Statements

Our Art Museum app will let users have adequate and on-time information about exhibitions, which will affect users who don't want to miss opportunities to visit an exhibition they find interesting, by providing clear information about current and future art exhibitions and enabling notifications for them. We will measure effectiveness by analyzing the app's data on how many users enabled the notification feature.

Our Art Museum app will let users process text information more easily and quickly, which will affect users who experience cognitive disabilities, such as dyslexia, by customizing text or by turning on "screen reader" features. We will measure effectiveness by analyzing the app's accessibility data and feedback from users.

Sitemap

At this point I organised the basic structure to start designing.

Paper Wireframes

Firstly, five different versions of the Homescreen were created. Having the users’ navigation in mind, the most appealing aspects were combined into a refined version of the wireframe.

The first five iterations and the final design of the Homescreen. Stars were used to mark the elements that would be used in the refined version of the Homescreen.

Then, the same process was followed for the remaining screens that had to be designed.

Paper Wireframes for some of the rest of the screens of the app

Digital Wireframes

The digital wireframes were built based on the conducted research and on the users’ needs. On the Homescreen users can quickly access basic features of the app: information about the museum and its exhibitions, while they can also schedule a visit by booking a ticket.

Emphasis was given to make the navigation experience easy for the user. Also, accessibility is key for good design, so assistive technologies were incorporated in the app.

Low-Fidelity Prototype

Here is a demonstration of the app's user flow, checking the connectivity, navigation and the completion of the flow.

Click here to view the Art Attack Museum's app Low-Fidelity Prototype.

First Usability Study

At this point, after having designed the Low-Fidelity Prototype, a usability study was conducted, in order to have a clear idea of how the users interact with it. This way the app could be improved before moving on to designing the Mockups and the High-Fidelity Prototype. The focus of the usability study was observing the user flow and whether users found tasks easy or difficult to accomplish. The findings are presented below.

Findings

• Users need to be able to toggle a setting by pressing anywhere on it instead of the toggle element itself, even on the text describing the setting.

• Users need to know exactly what they download. This wasn't communicated properly on the ticketing page, so the word “Ticket” was added next to the “Download” text field of the button.

• Users need a way to turn Notifications Off, because initially they were always On.

Mockups and High-Fidelity Prototype

The typography and the color palette that would be used throughout the design established a character for the art museum and the app.

Typography

Color Palette

Sticker Sheet

More components that would be part of the design were created.

Mockups and High-Fidelity Prototype before refinements

Second Usability Study

Final Design

Click here to view the Art Attack Museum's app High-Fidelity Prototype.

Accessibility Considerations

• It was considered that Screen Readers would be available on every screen of the app, which can be turned on or off from the Accessibility section of the Settings Screen.

• Users can select between Light and Dark mode from the Accessibility section of the Settings Screen.

• The option of customized text, in the form of selecting between two font sizes, small and large, is available in Settings. 

Takeaways

Impact

I am really happy to receive positive feedback from people that have interacted with the prototype. Some of the comments concerning this app’s design are: “I like the combination of colors, the clean design and the fact that images and elements sometimes pop out”, “It’s cool that there are different pathways to end up in the same screen”.

What I learned

Since this was my first UX Design project that was created during the UX Design Google course I attended, I learned almost everything that is necessary to complete the design process. I learned about the design tools, how to use Figma, the design steps and how to apply them, but also to care for and conduct research on the users' needs while meeting the stakeholders' desires.

Future Steps

• I would love to present the design to potential users, so that I can take more feedback on my work and improve aspects of it.

• Showing the art museum’s app to fellow UX Designers would also be an important step to take, in order to receive feedback on a professional level.

• The design of the Art Attack museum interfaces shall be completed with the design of its website (desktop, mobile, tablet).