Marker: Connecting communities with public art
A UX Design case study
Role: Product Designer
Team: Christine Lee
Timeline: 11 Weeks
Scope:
User Interviews
Desk Research
Personas & Empathy Mapping
Ideation
Mapping/Clustering
User Testing
Micro-Interaction Animation
High Fidelity Prototype
A solo project done over 12 weeks through UCLA Extension’s UX Design Certificate Program.
I was responsible for determining the overall design direction of the project while working within an iterative framework.
Brainstorming
As a starting point, I pinpointed some areas of interest:
navigation
leisure
sustainability
How can I connect people with their local neighborhoods?
I originally had the idea of creating an app focused on shopping from neighborhood businesses. I explored this topic in my initial research.
Research
I conducted research to gain insights about how people interacted with their local neighborhoods.
Some sample questions:
What do you like to do in your neighborhood?
How would you describe your local neighborhood?
How would you describe the areas outside of your neighborhood?
How would you spend your weekend?
navigation
I created an interview guide which I referred to during my in depth user interviews. This outlined the questions, requirements, and also included a script to gain informed consent. I
recruited 3 appropriate participants and conducted remote interviews over Zoom.
Synthesis & Analysis
I organized the data from my in depth interviews and used affinity mapping to cluster and sort responses.
Naturally, topics of interest emerged and gave me insight into user needs, their world view/mental models, and pain points.
I created an interview guide which I referred to during my in depth user interviews. This outlined the questions, requirements, and also included a script to gain informed consent. I
recruited 3 appropriate participants and conducted remote interviews over Zoom.
PIvot
In synthesizing the responses from in depth interviews with shoppers and store managers, I quickly realized that my concept was not the ideal solution for small businesses as it was too time intensive and other platforms already fulfilled the same need.
I revisited my topics of interest and my initial research regarding navigation, leisure, and sustainability. and was inspired when I was completing a competitive analysis.
I came to realize that I wanted to help people explore their local neighborhoods and allow them to document their ever changing landscapes through tracking public art.
A user’s social media post conveying the pain that they feel about their changing environment
A local mural over the years
The Problem
Art is everywhere. Most of the time, people think of visiting museums for new experiences. But we pass by works everyday without even knowing the history and impact that it has on the local community. More than ever, people are looking for ways to practice mindfulness and have unique meaningful experiences.
Problem Statement:
As an art enthusiast, I need a budget friendly way to experience art so that I can connect with my local neighborhood and spend more time outside.
The Solution: Users explore their neighborhoods by documenting their changing landscapes and sharing information about free and public art.
Personas
The Artist
Primary Persona
Users who like art and are motivated by their interest in sharing ideas about politics and culture.
The Explorer
Secondary Persona
Users who are active, like spending time outside, and want a memorable experience
Mapping
After my initial affinity mapping, I created a list of features that would serve my personas. I did a 2x2 matrix to brainstorm important features.
These mapping exercises would later help me when I incorporated the features into an app map.
From there I conducted a feature prioritization sort which helped me visualize what elements were needed on each page.
Design Process
I started with paper sketches. I drew my initial designs on graph paper and then scanned them into digital versions.
I then used these sketches to create low fidelity wireframes. While turning paper sketches into wireframes, I was able to find more areas for improvement; adding additional features that got left out in the quick initial sketches.
These wireframes served as a reference for the creation of a working prototype.
Usability Testing & Solutions
I conducted usability testing by creating a list of tasks and subtasks for the user to accomplish.
Some examples of tasks include:
Look up Murals on the Map
Post a picture to the Mural’s page
Change your profile picture
Usability testing showed areas for improvement. In the login flow, users are prompted to specify their interests. These are large text buttons that will change colors when they are selected.
In my original prototype, the user would select their first interest, but immediately the screen flashed to the next screen. Users said that they did not even get to see all the choices. I went back and redesigned the screen adding the “Done” button. This gave users time and control of moving the flow forward.
Design Exploration
During usability testing, one insight was that my login and signup pages were too simple. I needed to add some additional elements such as a back button and system status indicators.
I further explored login pages and iterated on alternate sign in methods such as using a phone number instead of email address. I created a low fidelity mockup for my sign in flow.
These exercises helped shape the final design for the Marker App.
Challenges & Next steps
Since this app revolves around art, it was a challenging to choose a color scheme that did not clash with the media and content, I wanted to highlight the art itself so I stuck to a primarily black and white design. The black and white contrast is dynamic and energetic. I had to indicate status changes for tag selection and I made use of colors to delight users.
There were messaging features that I did not pursue in the app design. It was much better to allow people to connect through following each other’s posts. I might look into a messaging feature in the future.
Try my prototype!
