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 feature​s 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. 
 

Key Learnings

Importance of Content Flow
Being able to condense your mobile site and display the same information is very important. It is not the same as creating an app, so the information and how it works are different 
Understanding the UI Library
Knowing and organizing all our elements and components helps show features to the user you didn't see before as well as space them correctly and visually
Animation of prototype
Certain animations help the user feel and like your webpage and mobile site. Sometimes though, complicated and fun isn't the best way for the user to get around and understand the message of your site
Importance of Setting the  Stage for User Testing
Going through the script and giving out the scenario as well as understanding your user helps create empathy to then create the best product
Using Clear Vocabulary
Going Using precise clear language helps the user understand what they are being asked to give you the most optimal test
Never Enough detail in Annotations of UI board & Sketches
Annotating helps guide the thought process and come up with clear ideas

Wanna Chat?
Now it's your turn to do the talking