*CONCERT
WHEREVER YOU ARE.

PROJECT FOCUS

USER EXPERIENCE // VISUAL DESIGN // ART DIRECTION // CONTENT STRATEGY

TIMEFRAME
‍
5 weeks
ROLE
‍
Interaction Design
Visual Design
User Research
Art Direction
Content Strategy
TOOL
‍
Figma
Anima
After Effects
Premiere Pro
Photoshop
MENTOR
‍
Nathan Shedroff
Entering Venue (Mobile)
Remaining Time (Mobile)
Onboarding Process (Web)
Apply Filter (Mobile)

OVERVIEW

✹ Skip to THE JUCY PART✹
*A REAL CONCERT WHEREVER YOU ARE.
PLAY YOUR MOOD is a virtual concert platform to promote the brand, Beats By Dre.

What makes PLAY YOUR MOOD unique is the way performers interact with the audience. The platform allows audiences to enjoy a concert comfortably in their own room without having to visit a concert hall.

Challenges

*GIFT FROM NEW NORMAL.
We have had to prepare for a ‘new normal’ over the past 3 years. Performance culture that we enjoyed on a daily basis has come to a standstill. In particular, the entertainment industry has entered a slump by closing venues and refraining from gathering people because of COVID 19.

On the positive side, there is a gift the pandemic has brought to the music world- this forced people to come up with the creative solutions. At the same time as virtual concerts began, artists began performing in their personal space.
‍
*APPROACH
  1. How might we build a relationship between customers and Beats?
  2. How might we promote PLAY YOUR MOOD through the Beats website?
  3. How might we develop a new strategy to differentiate the brand and build customer experience?
    How might we give users the chance to re-discover their musical identity

process

01/ Empathize

02/ Define

03/ Ideate

04/ Visual

05/ Prototype

06/ Reflection

01/ EMPATHIZE

generative
Research

*WHAT ARE THE THINGS OUT THERE?
Market research helped me determine the criteria for participants I would recruit for my interviews and start understanding what their pain points are.

Changing user’s behaviors while
online shopping?

*BEHAVIOR PATTERN
Before doing a deep dive into research, I conducted some research on e-commerce and changing consumer behaviors during Covid-19. I found out that some shoppers reported changing their habits due to the pandemic. However, convenience outranked COVID-19 as a key factor- driving a portion of shopping online.
64.3%
Convenience
55.3%
Ability to shop at their own pace
34.1%
Caution due to the Covid-19

Our users need
your attention.

*USER FOCUS
In the existing distribution channel method, each channel is independently operated in terms of efficiency & profitability of channel operation. Whereas in the omni-channel method, the customer is the center & the focus is on enhancing the customer experience, through organic connection between online and offline. Creating synergy is the key.

“The future is already
here – it’s just not very evenly distributed.”
-WILLIAM GIBSON

*VIRTUAL CONCERTS
As the Metaverse environment expands during COVID-19, various performances and events through avatars will increase, and the possibility of expansion in the future is validated through articles. However, the majority of public artists and organizations are excluded in this opportunity, and the reality is that they are still unable to escape from the crisis.

02/ DEFINE

*How might we develop a virtual concert experience for 'Beats by Dre'?

User
Interview

*UNDERSTANDING THE PAIN POINTS
I conducted an interview with music lovers who care about culture and brands to understand their pain points and determine where we can contribute. I specifically asked about their perception of the brand and about experience of going to a concert.

KEY INSIGHTS
BEATS BY DRE

BEATS BY DRE - BRAND

Culture & Value
✦ "We ask, what do we think the consumer should learn about?"

‍- Luke Wood, Beats President
Belief & vision
✦ "We wanted to recreate that excitement of being in the studio. That's why people listen.”
‍
- Jimmy Iovine, Beats Co-Founder
BEATS BY DRE - CUSTOMER
Culture & Value
✦ “Beats are well known for design enthusiasts who wish to pursue a certain image or look.”

✦ "I care about the brand but I bought it through Best Buy. Cause it’s cheaper.”
PRODUCT & SERVICE
✦ "Fun to read through ‘Discover’ page. You can see their recent news and collaboration news.”
‍
✦ "Fun to watch their collaboration products.”

✦ "I would rather buy it on Amazon.”

KEY INSIGHTS
CONCERT EXPERIENCE

CONCERT EXPERIENCE- AUDIENCE

WAITING IN LINE
✦ “Waiting to enter the venue is an exciting moment but definitely not a fun experience.”

✦ “Miss the feeling of entering the venue and the excitements."
CONCERT EXPERIENCE- PERFORMER
SELF REFLECTION
✦ "Recently, I have been uploading my songs on Youtube."

✦ "More time making songs in my room... can't wait to perform on the stage. Instagram live is pretty helpful though."
Loss
✦ Damage caused by the cancellation or postponement of the event is the highest.

✦ Difficulties in preparing for performances, a decrease in audiences for performances, and suspension or reduction of public subsidies also appear to be causes of difficulties.

*Key InSIGHTS
beats by dre

BEATS BY DRE

SECONDARY RESEARCH

KEY
INSIGHTS*

We categorized in to two separate section to Brand & Concert Experience. In these two categories, focused in two different areas.

BRAND

Culture & Value

✦ "We ask, 'What do we think the consumer should learn about?'“
- Beats President Luke Wood

Belief & vision

✦ "We wanted to recreate that excitement of being in the studio. That's why people listen.”
- Beats Co-Founders Jimmy Lovine

CUSTOMER

Culture & Value

✦ “Nice and cool.. but thats all.”

✦ “Beats are well known for design enthusiasts who wish to pursue a certain image or look.”

✦ "I care about the brand but I bought it through Best Buy. Cause it’s cheaper.”

Product & services

✦ "Fun to read through ‘Discover’ section.”
‍
✦ "Fun too watch their collaborations products.”

✦ "Websites are super clean but I would rather buy it on Amazon.”

*Key InSIGHTS
CONCERT EXPERIENCE

Audience

WAITING IN LINE

✦ “Waiting to enter the venue is an exciting moment but definitely not a fun experience.”

Unexpected

✦ “Due to the pandemic, or weather conditions..I sold my tickets several times.”

PERFORMER

Loss

✦ Damage caused by the cancellation or postponement of the event is the highest.

✦ Difficulties in preparing for performances, a decrease in audiences for performances, and suspension or reduction of public subsidies also appear to be causes of difficulties.

BEATS BY DRE

RESEARCH

What are they facing?

*UNDERSTAND THE PAIN POINT
With a primary research, I created stakeholder map and competitive analysis to understand more about Beats By Dre’s culture, brand personality and potential area.

User
Persona

I created a user persona based on my insights that concisely represented who I am designing for.

User journey map

After creating user personas, we created a user journey map to see what is missing or needs to be improved, and find opportunities, where I could intervene.

Stakeholder map

In order to understand the Beats ecosystem, I created stakeholder map that helped me identify relationships and understand the gaps. I recognised that most of the flow was going in to media, collaboration, and endorsement.

Competitive Analysis

Through my market research, I identified some top direct competitors- BOSE and SONY.

In comparison to its competitors, Beats is in a position of fashion with a high prices. Their differentiator is in storytelling and communication with consumers.

IDEATION

I used personas, customer journey map and stakeholder map to ideate around the revealed/presented opportunity space. I presented the following touch points to the interviewees and survey participants to generate feedback.

SKETCH

???

STORY
BOARD

???

Evaluative
Research

*Some key nuggets from the brain
*CONSIDERATIONS
  • 1. What differentiates this service from the existing platforms (Instagram Live, Youtube, and Meta)?
  • 2. How can the service be sustainable for Beats By Dre?
  • 3. What are the benefits for both, users and performers?

03/ IDEATE

Sitemap & Wireframes

Attending a concert online, users should easily enter and switch between a venue to another. A personal goal is to design a seamless flow to augment their concert experience.

*MOBILE VERSION

*WEB VERSION

Updated
insights*

*LOADING + ONBOARDING PROCESS
After we finished our first round prototype, I received constructive feedback and suggestions. In order for users to understand how the interaction would work, I needed to incorporate an on-boarding flow. This would help lower the learning curve.

04/ Visual

visual design

I redesigned the entire brand system for BEATS BY DRE. I explored and added on top of the original brand attributes (Self-image, Personality, and Culture).

Brand attributes

Design system

Thoughtfully designed the reusable UI components. Also, with SF Pro text for better legibility and using Great Vibes + Six Caps to graphically differentiate the names of the performers.

Brand elements

05/ PROTOTYPE

WE INTRODUCE YOU
“play your mood”
a VIRTUAL MUSIC
performance.

RESULT SCREENS

* TOUCH POINT 01

Remaining
time

*BUILD EXCITEMENT

To create a realistic experience in an exciting way, the audience can check remaining time of an event and a line up of the artists from wherever they are.

onboarding

*LEARN HOW TO CONTROL

Our goal is to make our users control everything with a touch of a button.

Instead of using a mouse or buttons for each interaction, we decided to map out all the possible gestures and actions that users can easily learn and control.

Entering
Venue

*WELCOME & ENJOY

After the logo animation, the first thing you will see is black & white venues. I made it interactive so you can hear sound and color once you hover over a venue. The intention behind dynamic and high contrast is to build a realistic experience of a concert environment.

*ENTERING VENUE

BEST EXPERIENCE WITH SOUND

Discover
& Continue.

*LIKE, SAVE & COMMENT

It was essential that there must be an experience to express people's passion. Through COMMENTS, users will build connections with people who share similar musical interests.

By LIKING, people can keep track of artists they listen to and discover. SAVE TO PLAYLIST allows users to continue the experience after the event through an Apple Music integration.

Change
venue

*POWER OF SOUND

While designing, I thought about the differentiator of this platform. I considered what we feel, see and hear while we physically walk into another venue. By applying a delay between the transition with a muffled sound, it amplified the reality.

*CHANGING VENUE

BEST EXPERIENCED WITH SOUND

*FULL SCREEN MODE

©2021

Change By
Your Mood.

*COLOR FILTER

Color plays an important role in depicting emotion. Juxtaposing color with music can be very powerful and create new feelings. This feature allows users to create their mood by customizing the color.

*FILTER MODE

SLIDE TO SEE THE PROTOTYPE

INTERACTIVE
PROMOTION

* TOUCH POINT 02
Call to action from the official website should generate curiosity and seamlessly draw users to the play your mood website.
‍

How might we promote PLAY YOUR MOOD through the Beats website?

Stimulate Curiosity

Interaction is the key. As users move around with the cursor they will notice something happening. As the cursor gets closer to the Beats logo the volume will increase, and decrease when it’s further away.

Draw Attention

Incase the user’s device is muted, I decided to make micro-interaction using beat visualizer to draw user’s attention to the logo.

Interact & Preview

When cursor is hovering over the logo, a preview will be opened. Inspired by Apple MacBook touch bar, I created a compressed preview of an event. By scrolling through the bar users can preview what they will experience through PLAY YOUR MOOD.

We Invite You

After interacting with this feature, an invitation will be sent using pop-up(CTA).

Thinking about the marketing of a platform is as important as creating the platform. An experience is useless if people don't know about it. That is why this touchpoint was a crucial part of the entire experience.

Stimulate
Curiosity.

Interaction is the key. As users move around with the cursor they will notice that something happening. As the cursor get closer to the Beats logo the volume will increase, and decrease when it’s opposite.

Draw
Attention.

xxx

Interact
& Preview.

When cursor is hovering over the logo, preview will be opened. Inspired by Apple Macbook touch bar, I created a compressed preview of an event. By scrolling through the bar users can preview what they will experience through PLAY YOUR MOOD.

We Invite You.

After 30sec of interaction, an invitation will be sent using a pop-up(CTA).

*INTERACTIVE PROMOTION

SOUND ON

05/ reflection

VISION 1

VALIDATING RESEARCH

The focus of this project was on the concept and visual design. To validate and measure the impact, it would be effective to spend more time on generative research to understand the market more deeply.

VISION 2

UNIVERSAL ACCESSIBLE DESIGN

Music is for everyone and I also thought about how this experience can be used for visually impaired people. I am curious what the best way to make the service accessible for all would mean.

VISION 3

SUPPORT LOCAL ARTISTS

This version of the concept was to understand and find a potential area in the entertainment industry. The next step will be focused on promoting local artists who are struggling during Pandemic.

TAKEAWAY 1

CONTEXT IS KING

No design lives in a vacuum, neither will the designed solution.
‍
Understanding culture and movement ensures the solution will have real-world value.

TAKEAWAY 2

WHAT IS YOUR DESIRE

The future of performance culture will eventually merge the digital and physical.

But whatever changes, some things will remain constant. The human desire to make experiences convenient, enjoyable, and meaningful.

TAKEAWAY 3

POWER OF PHYSICAL SYSTEM

I always start by thinking about the physical experience first before going in to a digital.

By thinking about what we are used to, and applying it into digital will give an illusion of realism.

☜ ST.AR.T

iii ☞

CONTACT
dennisbaekdesign@gmail.com
LINKEDIN
INSTAGRAM
VIMEO
LAST UPDATED
08. 20. 2024

BAEK-©2024