Discover new local artists performing in your area
UI/UX Design
What is Amplify
Amplify is an IOS app that lets you discover local artists’ shows based on your personal music taste by connecting both your location and music streaming service. When choosing a new artist to see, you can demo their top songs and learn more about them before being directed to buy tickets.
PROJECT OVERVIEW
From January 2022 - April 2022, I completed a full-time User Experience Design Bootcamp with Brainstion to obtain a certificate in UX Design. During my team in this Bootcamp, I was tasked to complete an 8 week capstone project to create practical digital experience that is both compelling and interactive. This project was an end to end design process that start with idea generation and research to then develop wireframes and a high fidelity mobile, app, and webpage as well as a brand.
Project Type
Capstone
Timeline
8 weeks
Roles
UX researcher
Design Strategy
UX/UI Designer
Tools
Figma
Sketch
Illustrator
Empathize
Secondary research
Primary research
Problem Space
Define
Personas
Experience Map
Ideate
User story
Task flow
Prototype
Low-fi Wireframes
Mid-fi Wireframes
Test
Usability Testing
Incorporating feedback
High-fi Wireframes
Refine
Visual Identity
High-fi Prototyp
MY APPROACH
Empathize
PROBLEM SPACE
Becoming a successful artist is nearly impossible. The success rate for musicians is 0.00002 percent. Performing live is their best way to make money and gain a potential fan base as well as establish themselves in certain cities.
Due to many individuals not knowing who or where certain artists are performing many of these aspiring musicians get little to no recognition at their shows.
SECONDARY RESEARCH
Live events provide 75% of the artist's income
Younger adults (ages 18-34) are far more likely than the average listener to discover new music
location-based experiences will become a $12 billion dollar industry by 2023
18-34-year-olds would rather spend money on experiences than products, bolstering the experience economy
Small clubs and venues are incredibly special and sometimes underrated. Without them, emerging bands and artists wouldn’t have the platform they need to actually get their music out to the world. They often don't have the financial resources to get their musical lineups out to the public in a cohesive way.
Design Challenge
How might we develop a way to finding immediate local artist entertainment that is targeted to an individual's certain music taste in order for smaller artists to get more recognition at their shows
PRIMARY RESEARCH
When needed to understand why this is a problem, I conducted 3 interviews done in-person and online (zoom). Interviewees had to be between the ages of 18-34 and had attended a concert in the past month.
After completing the interviews, I went through the affinity mapping process by classifying the interview notes into pain points, motivations, and behaviors. Once that was done I was able to use empathy mapping to extract 6 main themes and insights.
The environment of small venues
Smaller venues allow for greater sound and more intimate feel with the performer making it a way better show.
Being Informed
No good way of knowing what artists are performing! Hard to attend and support someone they would like if you don't know about them
Support towards artists
Supporting artists through streaming and sharing with friends but the biggest way is showing up their live shows
Passion to discover music
Discovering new artists and music is an amazing feeling! Spotify makes discovering music easier
Financial Challenges
Don't like the process of buying concert tickets but it's nice smaller shows are cheaper
Music community within cities
Being around everyone that shares the commonality of like that certain artist! The music community makes the city feel smaller
Key Insight
How No good way of knowing what artists are performing! Hard to attend and support an artist an individual would like if they don't know about them.
Define
PERSONA
Empathizing with the user
I created a persona to represent and personify user groups who have similar behaviors. This helped give me a clear picture of different users’ expectations and how they would potentially use a product solution.
EXPERIENCE MAP
Identifying real-life opportunities for design disruption
by putting myself in the shoes of the primary persona, I developed a real-life scenario that a user would go through when trying to discover a concert to attend. This helped me gain clarity on the issue at hand and identity opportunity gaps for design interventions that would make a measurable life impact.
Having a deeper understanding of my persona and her pain points, motivation, and behaviors and then diving into creating an experience map to identify the opportunity gap at hand. It was important for me to revisit my "How Might We" statement and make any necessary revisions to ensure that it still followed the issue I am working to solve.
Revised Design Challenge
How might we develop a way to find immediate local artist entertainment that is targeted to an individual's certain music taste in order to expand their music knowledge and attend more shows
Ideate
USER STORY
With my persona Lucy in mind, I began to author user stories to better understand her behaviors, motivation, and pain points. The goal being, to translate her pain points into feasible solutions that can be developed into features.
I came up with over 30 different user stories using the "As a + I want + So that" method. I then began to sort through similar user stories into epics based on related actions and goals of the user.
Epics
Discovering new shows
Environment of venues
Easy Accesibility
Environment of venues
I chose to focus on discovering new shows as it has the most user stories that go along with it
USER STORY
With my persona Lucy in mind, I began to author user stories to better understand her behaviors, motivation, and pain points. The goal being, to translate her pain points into feasible solutions that can be developed into features.
I came up with over 30 different user stories using the "As a (user) + I want (action) + So that (goal)" method. I then began to sort through similar user stories into epics based on related actions and goals of the user.
Prototype
IDEATION SKETCHES
Initial Interface Design Sketches
Once I completed user stories, epics, and task flows, I was then able to start imagining what this project might look like...
Exploratory Sketches
Solution Sketches
MID FIDELITY WIREFRAMES
Prototyping in low fidelity
Based on the main features and task flow from my low fidelity sketches, I began to create mid-fi wireframes to prototype and test in rapid iterations. The goal was to test out different design components quickly and receive ongoing user feedback early.
Version 1
Test
USABILITY TESTS
Gathering Feedback
During the process, of wireframing, I conducted two rounds of five different tests with ten different users to receive feedback that would help improve the design and deliver a more frictionless experience for the users.
The testers were asked to put themselves in the position of our persona, Lucy. Someone who is trying to discover new local artists' music shows in her area to attend this weekend. We made it very clear to our users that we were testing the app and not them. And to speak freely about their experience.
During the testing process, the users were asked to complete a series of five tasks while navigating through the prototype. Observing the user's interactions with the app allowed me to see if the app's functions and features helped the user achieve their goal easily and efficiently.
User Testing Round 1
The overall user testing of the first round brought forward a clear idea of what worked within prototyping and areas of improvement
User Testing Round 2
I was pleased to see that everyone had an easier process following the flow of this app during the second round of testing. Was also surprised that the majority didn't understand the demoing task when the first user test went so well
FINAL MID-FI PROTOTYPE
After incorporating all of the feedback from the user testing and resolving the most pressing usability issues, I landed on my final grayscale prototype, prototype version 3.
Refine
VISUAL IDENTITY
After completing user testing, I began translating my greyscale final prototype into high-fidelity. To create a visual identity I first had to establish my product's brand. I began writing out a list of keywords that helped embody and define the makeup of my product.
Key Words
Electric
Euphoric
Entertained
Awestruck
Excitement
Logo Typeface
Primary Typeface
Montserrat
abcdefghijklmno
pqrstuvwxyz
APPLICATION ICON
After taking inspiration from our wordmark and our mood board we wanted to create a simple icon that stood out to the user when seeing a variety of apps on their screen. This was the final product of our app icon, Amplify.
HIGH FIDELITY PROTOTYPE
I knew I wanted my app to follow dark mode but the challenge was balancing the right color ratios and type hierarchy all while creating an individual identity, which required countless variations and multiple rounds of testing.
I then began to create my final UI prototype and developed a UI library that uses Brad Frost's Atomic design system.
.
Final Interactive Prototype
Looking at key features Amplify has to to offer:
Feature 1
Allowing access to both location and Spotify, it will then analyze the music you listen to and generate a list of possible shows you might be interested in, all in your specific location.
Feature 2
When finding an artist performing based on your preferences it allows you to demo their music, learn more about the artist themselves, and purchase tickets through an outside source.
Feature 3
While on the app demo the artist's top songs to make sure the user wants to go to their show.
Feature 4
Be able to see important concert details such as location, date, and time. Be able to see ticket prices based on outside sources as well as more information on the venue being attended such as capacity, covid details, and more
Expanding the Brand
Building Marketing Website
To help bring Amplify even fruther, I explored creating a marketing site for his mobile app. To start this proccess I began with UI inspriations, created sketches, designed mid fidelity wireframes, a content flow diagram, and conducted user testing. After all this I then applied my brand's visual identity to create a high-fidelity interactive site for both desktop and mobile devices.
EXPANDING TO OTHER DEVICES
To further my concept explorations, I envisioned what Amplify would look like on an apple watch. The reason I chose this device, is that I wanted to work with the notification system for upcoming concerts. It also is a device that is with the user at all times so they can easily access information of Amplify and never miss out on an upcoming event.
