Have you ever walked through the streets and stood still to admire that unusual sculpture or mural? Then the next minute, you take your phone out to capture that striking piece of art, but there is one thing you ask yourself:

“Who is the artist?”

Introduction:

Who is the artist that did that awesome mural around the corner from you?”

This question was the leading question and it was the main incentive that led us to create Muse Map. Our fictional client was the City of London and we were appointed to create an app based on their brief.

Sprint length: 2 weeks

Team members: UX Designers: Brandon PfeifferMel Rizzo and myself

The objective of the City of London was to:

City of London badge

City of London badge

  • Increase awareness about public art among visitors and residents

  • Encourage engagement with the art

  • Increase appreciation for London and its art scene

  • Announce that they are funding public art

The Opportunity:

There presented itself the opportunity for us to work on:

  • Interactive mobile map to see where art is and mark it for a future visit

  • Games to encourage the discovery of art in public

  • Allowing the user to learn more information about the art exhibited

  • Including social media (example: social sharing functions )

User Research:

Before we started with the actual user interviews, we started brainstorming about assumptions about our potential target users and their needs:

  • Users want information about public art, but don’t know where to look

  • Users care about art and community

  • Users make time to see public art

  • Users like having a say on public art selection

Contextual Inquiry:

We decided to do a field trip and see how people in public interact with public art. It was a very hot summer’s day, the perfect weather to do a site visit to Hyde Park to go and see the Mastaba by Christo and Jeanne-Claude.

People taking Photos of the Mastaba

People taking Photos of the Mastaba

We made the following observations:

  • Users viewed art for a small amount of time, 1–2 minutes

  • Users took pictures and were posing in front of art but left immediately

  • No information about the art piece was located nearby

Competitive Analysis:

Feature Inventory Comparison Chart

Feature Inventory Comparison Chart

After the site visit we decided to look at other apps that promote street art and art exhibitions to see what features they had using the technique of feature inventory:

  • All apps featured an interactive map and art hotspots to be visited

  • Linked to social media and share function enabled

  • There were no personalized recommendations/top picks from users about certain art they’ve seen

  • All apps had a database with the info about the artist or the art itself

Empathy Map:

Before we started with our proper user research, we decided to brainstorm and create an empathy map about our potential use to help us come up with the right questions for the planned user interviews:

Target User Empathy Map based on Assumptions

Target User Empathy Map based on Assumptions

Key Findings from the empathy map:

  • Most users don’t seek public art, but they are aware of it.

  • Public Art should be appropriate for the area and audience.

  • Users would use google search. If this yielded no results they would not search further.

User Interviews:

After posting the screener survey, we received a lot of responses and after selecting the right people we went on to conduct user interviews with them.

Users we have interviewed

Users we have interviewed

Some of the key quotes from the user interviews:

“I like the feeling of being surprised by cool street art, it feels like an adventure”

“We should all be able to enjoy art and have it made available to us.”

“Art should not be selected by anyone. It limits the freedom of the artist. ”

Affinity Mapping:

After the user interviews, we each gathered our data and did collaborative affinity mapping on the whiteboard:

Affinity Mapping with different colored post-Its representing various Interviewees

Affinity Mapping with different colored post-Its representing various Interviewees

We synthesized our findings and came up with insights. We found that there was a gap between our earlier assumptions and the current affinity diagram results.

Insights we discovered:

  • Most users did not research the art further /online/onsite

  • Most users didn’t want to be consulted about art in their area

  • Most users view street/public art unintentionally

  • Most users take pics and post to social media

  • Users are happy to interrupt their current goal/routine to take a picture

User Personas:

We felt we needed to create 2 user personas to identify the goals and pain points of our target user. The reason why we chose 2 user personas was that we focused on how the user would come across street artintentionally and unintentionally.

Our primary unintentional user persona, Tom:

Primary User persona: Tom

Primary User persona: Tom

Our secondary intentional user persona, Jan:

Secondary User Persona: Jan

Secondary User Persona: Jan

User Goals:

We identified the user goals based on our 2 user personas:

  • Users enjoy being distracted by interesting visuals like street art and want to share that with others.

  • Users look for things that inspire or interest them.

  • Users want to remember experiences and document those on social media

User Pain Points:

We also identified the user pain points:

  • Users don’t want to see public art that’s violent and offensive

  • Users are usually not bothered to seek information about art if it’s hard to attain

User Journey:

We wanted to focus on Tom, our primary user persona and create a user journey, where he walks to the gym and accidentally comes across street art, but he can’t find any info on the artist whilst taking a picture.

Tom User Journey

Tom User Journey

Experience Map:

We also went into depth to showcase Tom’s user journey and created an experience map:

Tom’s Experience Map

Tom’s Experience Map

User Scenarios:

After the first scenario and user journey we decided to come up with a few more scenarios that would help us think of how we would be able to solve the problem of our target user by creating an app that would improve their experience:

  1. Tom uploads a photo of some street art to his Instagram. He gets lots of comments asking about the meaning of the art so he goes online to search for more details.

  2. Jan found out via the app where a particular art installation is being displayed by an upcoming local artist. She uses the app to find more of his artworks.

  3. Tom has moved to a new area. Eager to share on social media what his suburb looks like, he is looking for a way to find interesting content that he can photograph and share.

Problem Statement:

Finally, we came up with the problem statement:

People who live in or visit the City of London need a way to engage more with public art because their engagement is currently short lived and shallow.

How Might We:

We asked ourselves how might we…

… help users discover opportunities to take photos of unusual content?

…bring Public Art to people?

… make viewing Public Art exhilarating instead of quick?

…prolong interaction with Public Art?

Hypothesis Statement:

Accordingly, we came with the following hypothesis statement:

We believe that creating opportunities to engage with public art on a deeper level, for people who live in or visit the City of London we will improve their overall experience and appreciation of public art.

We will know this to be true when we see an increase of Public Art content shared on social media.

User Flow:

After the problem statement was formulated, it was time to start with the actual design process. We started by defining the user flow for Tom using the app when trying to find an interesting piece of art near to him. From there he gets directions to the spot and takes a photo to be shared on social media.

User Flow

User Flow

Design Studio:

We gathered together for a design studio to start with ideation on initial sketches for how the app should look like.

Ideation session

Ideation session

The ideation session produced interesting results for the homepage, from scavenger hunt, to interactive map with hotspots to unlock secret art pieces. The game factor appealed to all of us, so we decided to pick the one art-piece per day page.

Feature Prioritisation:

We decided to use the 2x2 matrix layout for feature prioritisation:

2x2 Matrix for Feature Prioritisation

2x2 Matrix for Feature Prioritisation

We decided to focus on the following MVP features: social media content, camera function and upcoming artwork.

1st Iteration of Paper Prototype:

Finally, we started creating the first paper wireframes.

First Iteration of Paper Wireframes

First Iteration of Paper Wireframes

Context of Wireframes explanation:

The focus of the wireframes was to highlight the homepage, and how it would feature a daily piece of art, that was presented to the user every time they opened the app. The user was then prompted to engage with the piece of art by taking a photo with the art itself or inspired by the art, and thus to create content for social media or the profile they created on the app. The photo then would be able to be viewed and rated by other users. The user him/herself would also be able to rate photos taken by other users relating back to the same piece of art.

Usability Testing 1st Round- with Paper Prototype:

After the first user testing with the paper prototype we found ourselves stuck in a dead-end road with nowhere to go:

Our users came up with the following issues:

  • They were confused by lack of detail on info page

  • They were not sure how the rating system worked

  • They didn’t understand the whole concept of an art-piece per day

We started doubting the whole idea and asked ourselves:

Would anyone use this app?

2nd Iteration of Paper Prototype:

After a lot of hours of debating, we decided to start from scratch and pick an entirely new idea.

The new wireframes focused on an interactive map and recommended hotspots of public art for visits and taking pictures.

2nd Iteration of Wireframes focusing on Map Feature

2nd Iteration of Wireframes focusing on Map Feature

Hi-Fi Digital Wireframes:

Shortly after the paper wireframes, we proceeded to create the hi-fi digital wireframes in Sketch, as shown in the photo below (wire flow with the digital wireframes):

The new digital wireframes featured an interactive map as the homepage where the user could access a filter menu to choose different spots with public art to take pictures of, which they then could save to their gallery or share on Instagram. Once the user picked a recommended spot, the map would then give the user the option to get directions by either walking or other means of transport. Once the user arrived at the spot, a notification would pop up prompting the user to take a photo. The user would also be able to get information on the art, once he/she has reached the desired spot.

Hi-Fi Digital Wireflow

Hi-Fi Digital Wireflow

Usability Testing 2nd Round with Hi-Fi Digital Wireframes:

We went on to test our digital wireframes and the following issues arose:

Filter Menu and Camera Icon issues

Filter Menu and Camera Icon issues

  • User has expected to filter content by type of art not by keyword

  • Users wanted to swipe up the filter menu, but it only opened up with a click function

  • Users felt there was too much emphasis on the camera at the top navigation, users felt they only wanted to access the camera once they arrived at the destination and were ready to take a picture

Evolution of the Filter Page:

Here we wanted to showcase the journey of how the filter page has evolved from sketched wireframe to final mockup.

Filter Page Evolution

Filter Page Evolution

Site Map:

Here we created the site map with the new mock-ups of the app:

Site Map for Muse Map

Site Map for Muse Map

Style Guide:

For our style guide for Muse Map, we opted for the clean and modern font Archivo Narrow and chose UI colors that are on-trend right now.

Muse Map Style Guide

Muse Map Style Guide

Visual Design: Final Mock-Ups:

Finally, we created the final mock-ups for Muse Map.

Muse-Map Prototype

Muse-Map Prototype

Next Steps:

After the prototype was created, we started debating about our future plans for Muse-Map:

  • We wanted to do further user testing with our newly created prototype

  • We planned to integrate more social media platforms

  • We wanted to enable users to create their own profile and feed within the app

  • We wanted users to follow each other on the app