musictivity
M FA G R A P H I C D E S I G N T H E S I S BY H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
2017 1
2
H A R I N I V E N K ATA R A M A N
H A R I N I V E N K ATA R A M A N
“ M U S I C T I V I T Y—
M FA T H E S I S
M A K E YO U R M U S I C W O R K ”
SCHOOL OF GRAPHIC DESIGN &
PROCESS BOOK
D I G I TA L M E D I A FA L L 2 0 1 7
01
the background
pg 04
02
the conceptual development
03
the deliverables
pg 44
pg 94
6
H A R I N I V E N K ATA R A M A N
01
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
the background
7
8
H A R I N I V E N K ATA R A M A N
THE STORY
Music is more than a form of art, more than entertainment, and definitely more than just expression. Music is a lot more to me, especially.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
In my household, music was like language; my father sang, my mother played a string instrument, and my brother played the flute, sometimes even to communicate a frame of mind, or to relax, to relieve stress, and generally, as a habit. I have been a habitual stage performer myself, since I was 8, gradually transitioning from singing music to interpreting it with gestures and movements. As a classical dancer, one would naturally assume that music is a consistent part of my repertoire. In reality, it’s much more: when you learn classical music for classical dance, you learn the history, the math and the science of it as preached by musicians who lived centuries ago. It becomes mandatory to be aware that the octave system traveled from China, to the Coromandel Coast, and then to Hellenistic Egypt before becoming embedded in European culture as a symbol of the elite class, and evolved into music as t is today. It was textbook knowledge to us that the very first kind of music that there was, was inspired by and mimics the sounds of our bodies, and natural, ambient phenomena. It was, to us students of music, a meticulous base of aural science that involved 72 base permutations of 15 sub-frequencies, and a million combinations.
9
Harini Venkataraman (me), aged 6, singing in a themed tableau in Sharjah, United Arab Emirates (UAE). At this point, I had already been singing for over 2 years, and music had become part of my talent showcase everywhere I went.
10
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
Music is more than entertainment, surely, when you think of the way we musicians learn it, and when we start learning. At 4, it became a part of my life; at 24, it is truly inseparable. Which led to me to this topic for my design thesis, with a primary question:
What exactly is music — when it’s not entertainment — to others? And how can I translate that idea through graphic design? Because, evidently, the problem here was a lack of knowledge. Or so, I thought.
A LT E R N A T E U S E S F O R M U S I C Levitation
Worship
Therapy
Info-frequencies
Productivity
Narration
Botany
Echolocation
Medicine Language aid
11
12
H A R I N I V E N K ATA R A M A N
San Francisco’s Haight-Ashbury district is a popular shopping destination. Several street musicians find this an opportunity to get exposure and earn a little by livening the days of the shoppers passing by. P C : B AY N E W S N O W, O C T O B E R 2 0 1 7
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
13
14
H A R I N I V E N K ATA R A M A N
When I put forward this question to others, through surveys and interviews, I received a great many different answers from over 50 different people. However, I noticed a unique use for music that was common for people who lived and worked in San Francisco, and were roughly in their late twenties to mid-thirties:
Music helped them focus at work. And thus, began my interest in researching about how music specifically interacted with the human brain to increase concentration and productivity.
O T H E R R E A S O N S S TAT E D B Y S U R V E Y E E S Party
Entertainment
Stress relief
Studying for exams
Cooking
Nostalgia
Mood reinforcement
Exercising beats
Relaxation
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
15
H1 A 6R I N I V E N K ATA R A M A N
:: 04025935
I NOI RVKE SN K A T A R A M A N A N T H O L O G Y O F S E L E C T D E S IHGANR W
MUSICT AI N TH R IEVBIRTAYN: D GE S I S A B O U T M U S I C F O R P R O D U C T I V I T Y
TA HV E EBLAS CTKOG T RH O EU N WA N D E R L U S T: R OYA L E N F I E L D T R UD SA
› 17
18
H A R I N I V E N K ATA R A M A N
THE RESEARCH
It isn’t the music itself, but rather the improved mood your favorite music brings that is the source of this bump in productivity.
SOURCE How Music Affects Your Productivity Gregory Ciotti - https://www.helpscout.net/blog/music-productivity/
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
We all listen to music—some of us quite frequently, and some of us occasionally, and at one point of time or the other, we have found it stimulating motivation and clarity of thought. Music’s effectiveness is dependent on how “immersive” a task is, referring to the creative demand of the work. When a task is clearly defined and repetitive in nature, research suggests that music is consistently helpful. Hearing what we like stimulates a shift in our mental energies, which can be channeled usefully into our physical work, whether it be chopping up vegetables or getting that eyelash stroke right in a tricky painting, or even adding up those annoying taxes at the end of the year. I even conducted a few social experiments and events to try and gather information on the kind of work that people used music to be productive for, to try really define the problem through insights.
19
20
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
21
22
H A R I N I V E N K ATA R A M A N
INSIG HT 01
William Craig // Forbes Magazine, Feature: Entrepreneur
celebration of individuality* KEY INSIG HT
Open office layouts—a technique for “deforestation of productivity” The new, trendy open-office cultures have reduced privacy and individuality, but have drastically increased exposure and vulnerability. Rather than focusing on their own work, workers involuntarily focus on other workers, others’ conversations and activities. Usage of smart, noise-cancelling headphones, for example, can bring back this all-important sense of working privacy, help assert control over one’s aural environment and, therefore, improve determination, security, resourcefulness and focus.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
INSIG HT 02
THE BACKGROUND
Chinese University of Hong Kong, circa 2012
multitasking, productivity “hack” The mileage may vary, but there is a sure difference in acceleration Music while working activates the part of our brains that is also involved in multitasking, because it stimulates multiple centers of the brain associated with organization and recogniton at once. Those who favor multitasking may be better at absorbing and integrating information from several senses at once. Imagine this in an office that is dedicated to provide creative solutions by analyzing several resources at once—like designers or project managers working on the creation of something new.
23
24
H A R I N I V E N K ATA R A M A N
INSIG HT 03
Dr. Kimberly Sena Moore // Ph. D. in Neuroscience
music, silence, science, health
Too much of something great may not be good all at once, including work speed There are studies to prove the correlation between how the tempo of particular kinds of music can increase or decrease pulse rates in the human body (circadian harmony), but there are moments in which you don’t want to get your rhythm going—no matter whether or not you’re listening to Bach vs. Pitbull. Silence is a kind of music. The best way to make sound a truly productive aid is to pepper our playlist with the right amount of “musical breaks” to help our brain reconcile with our thoughts in quiet clarity.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
INSIG HT 04
THE BACKGROUND
Tim Einsenhauer, Axero Solutions
aim to combat boredom
When work is monotonous, it is physically impossible to not notice There are three main reasons that workers listen to music: to drown out background noise, to stay focused on what they’re doing, and to combat boredom. In fact, this is the main reason new mails are more interesting than a current assignment. Boredom is a productivity-killer like no other, and yet it’s difficult to avoid sometimes. With music in the background, however, the mind has something interesting to keep it occupied aside from what is being focused on work-wise. This helps to reduce boredom and increase one’s ability to properly tackle whatever task may be at hand.
25
26
H A R I N I V E N K ATA R A M A N
INSIG HT 05
A Study on General Workplace Productivity // Cornell University, Florida
the ambience of confusion
Noise, temperature and light affect creativity more than we think it does While the open space encourages more collaboration, the noise can be too much for some people to handle when engaging in deep work. Even with ambient noise, the volume at which one strikes a creative balance differs from person to person. Working in an optimal temperature can be a huge difference in inducing creativity. Substantially cold or hot environments distract workers and draw on the energy that needs to be focused on the creative work. As in any work environment, productivity has as much to do with feeling comfortable in one’s environment as it does with dedication to the job at hand. Bright lights are just as distracting as loud noises, as are “cold”, artificial sources of lighting.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
INSIG HT 06
THE BACKGROUND
Dr. Ronny Enk // Neurocognition Expert
immunity by soundwaves
This is the only endless cycle of cause and effect that has long term benefits In an email correspondence with a researcher from the Max Planck Institute, UK, based on The Telegraph’s article “Music can boost your immune system”, some significant insights were revealed. Music has scientifically proven to bolster moods, which helps improve motivation, which in return reduces the production of the stress hormone (cortisol) and instead increases the production of antibodies.
27
28
H A R I N I V E N K ATA R A M A N
INSIG HT 07
Dr. Teresa Lesuik // THe Psychology of Music
the adverse effects of new
listening to new music
New music requires focus and, in reality, isn’t the good kind of surprise to work with New music—or anything new to attack our senses occupies a large part of the working memory—or the active part of the brain that involved in task management and organization. On the other hand, old, familiar songs remove the function of the brain that is active when new stimuli (like new songs) is encountered, and only filters the positive effects of dopamine release in the brain.
listening to familiar music
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
INSIG HT 08
THE BACKGROUND
Dr. Teresa Lesuik // The Psychology of Music
the dopamine generation* KEY INSIG HT
There are medical benefits to liking any kind of music
Music that we don’t dislike basically releases dopamine—the wonder hormone that relieves stress, raises energy levels and increases focus. In other words, it is Adderall without side effects or pills. Just changing moods to activate creative productivity sounds like a superpower, but with extensive scientific research, it has been proven that your favorite kind of music isn’t just good on your ears—it’s also good for your brain! Especially with upbeat music and Brian Eno. Or the Beatles, if that’s what you’d prefer. The dopamine pathway activates the frontal lobes of the brain and allows the person to be use more than one part of the brain at a time to make creative connections and decisions.
29
30
H A R I N I V E N K ATA R A M A N
INSIG HT 09
Survey // “Listening to Music”
mood state response
maybe...
not really
yes!
“Knowing what what I want isn’t the same as knowing what I need” 70% of participants who were in the professional fields responded that they knew exactly why they listened to certain songs. 25% of them weren’t sure, but they were sure that they needed certain songs to help them out at certain places—especially at work or in home while working on something big, alone.
Do you listen to anything in particular when you’re doing something very specific? For example, pop music while driving.
The 5% that listened to anything without knowing why, or didn’t listen to music at all, were the ones who took more time to complete tasks compared to the others.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
INSIG HT 10
31
THE BACKGROUND
NAMM Foundation // Why Music Matters
depression = expensive and unproductive The economy needs some music in the office to keep spirits up Employee stress is expensive for companies and, sadly, widespread. Research shows that the gross economic impact is estimated at a dramatic $300 billion each year, including doctor visits. In fact, the gross economic impact of just depression in the work place is estimated at a whopping $34 billion annually—treatments, loss in productivity, absenteeism, etc. included. A major form of successful treatment in this field involves music therapy in the offices of the company psychologist. Can you imagine the prevention of depression if the music moved into the offices of the employees, instead of mitigative therapy?
The cost of depression at the workplace:
$12 BILLION ABSENTEEISM
$11 BILLION TREATMENTS
$11 BILLION DECREASED PRODUCTIVITY
32
H A R I N I V E N K ATA R A M A N
INSIG HT 11
Joanne Lipman // Is Music the Key to Success, TNYT, 2013
a classic enroute to sucess
“You’ll find musicians at the top of almost any industry”
Multiple studies directly link music study to academic achievement. But what is it about serious music training that seems to correlate with outsize success in other fields? The phenomenon extends beyond the math-music association. Many high achievers say that music opened up the pathways to creative thinking. And their experiences suggest that music training sharpens other qualities: Collaboration. The ability to listen. A way of thinking that weaves together disparate ideas. The power to focus on the present and the future simultaneously. Who knew just learning how to drum with your fingers or hum along with songs can open your mind?
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
INSIG HT 04
THE BACKGROUND
Mini-Experiment: Daily Life Music
unpredictable circadian soundtracks “It is surprising how unnoticeable it is when the music works.” On a slightly controlled range of 3 participants, I was able to track their responses to having a playlist set up for them for an entire day’s schedule. On the first day, the playlist was moderately successful. The participants noticed every time their favorites popped up, especially if they were doing a particularly boring activity. The second day was a little better, as the workload occupied more of their mind than the songs themselves. By the third day, they hardly noticed what was playing, as long as the day started and ended with their favorites. At the end of a week, however, the same day-long playlist completely bored them, and had a reversal of productive effect on them.
productivity music preference time vs. task completion
33
34
H A R I N I V E N K ATA R A M A N
INSIG HT 13
Mikael Cho // A Medium Inc.
Sangeetha Sampath // Music Therapist
colossal classical ignorance * KEY INSIG HT
Classical music has benefits, but is it only for those who trained as in it as children?
Classical music is the result of several years of hard work, dedication, acoustic math and science. Over the past few decades, there has been a growing split in understanding music as a whole. The current generation’s averse preferences to classical music as a co-curriculur pursuit has taken away basic knowledge that could potentially be applied to several other fields outside of arts and humanities. Even today, there isn’t a potential source that can distill the advantageous effects of classical music and translate it for the modern listener and music-lover.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
INSIG HT 14
THE BACKGROUND
Music by Mood // Music Production Company
importance of productive differences Music for productivity can only by defined by the nature of the output There are 3 kinds of productivity based on brain activity involved: input, creative digestion and output. Input productivity is the process of learning something new, involving activities like reading textbooks, listening to directions through a GPS system, memorizing phone numbers, etc. Creative digestion is the productivity that is based on creative tasks like organization, synthesis of ideas, translation, visualization, etc. Output productivity is the result of doing something that one is already well-versed in, like walking, running, dusting, etc. Obviously, no two categories have even remotely similar genres of music to be aided with.
35
36
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
After speaking with over 50 people through surveys, interviews and events, I was able to narrow down my research into music and productivity to address a very specific problem that was growing larger every day:
noisy, counterproductive open offices.
37
38
H A R I N I V E N K ATA R A M A N
THE PROBLEM
Open offices decrease productivity because of increased noise levels, insecurity and distraction.
SOURCE Capital - Why open offices are bad for us Bryan Borzykowski - http://www.bbc.com/capital/story/20170105-openoffices-are-damaging-our-memories How to Make Your Open-Plan Office Slightly Less Terrible L.V. Anderson - http://www.slate.com/articles/business/the_ ladder/2016/05/open_plan_offices_add_distraction
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
39
40
H A R I N I V E N K ATA R A M A N
Numerous companies have embraced the open office — about 70% of US offices are open concept. But research has shown that we’re 15% less productive, we have immense trouble concentrating and we’re twice as likely to get sick in open working spaces, which has contributed to a growing backlash against open offices. Common culprits of distraction include coffee machines, colleagues, smartphone notifications, social media alerts, sudden sounds—like jangling keys—and it can keep us distracted for a good 2 hours every day.
However, building closed, private offices are extremely time and money consuming, especially in cities like San Francisco, where start-ups begin with a small team, often in open working spaces or co-working spaces. Even then, getting real estate for a small office with multiple cubicles is extremely hard to accomodate in small business budgets.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
41
42
H A R I N I V E N K ATA R A M A N
THE SOLUTION
Music can reduce distraction and maintain a productive mindset by creating neurally responsive moods.
SOURCES Music as a Multitasking Productivity Hack Study published by Chinese University of Hong Kong, circa 2012 Boredom is a Productivity Killer Tim Eisenhauer, Axero Solutions
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
Several recent researches indicate that music as a productive aide is much healthier than drugs like adderall and can reduce undue stress and depression that are found in hardworking multi-taskers in the technology sector, especially after long days of looking at computer screens and taxing their minds. Combining this scientific knowledge with classical music theories, this thesis aims to position customized music playlists as successfull productive aides for those long hours of work by increasing focus, cutting down distraction and reducing stress.
43
44
H A R I N I V E N K ATA R A M A N
AT WO R K W ITH OUT M US I C
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
AT WO R K W ITH M US I C
45
46
H A R I N I V E N K ATA R A M A N
02
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
the conceptual development
47
48
H A R I N I V E N K ATA R A M A N
THE OVERVIEW
Productivity through music is truly achieved by reducing noise, increasing confidence and personalizing the listening experience for the modern worker
SOURCE The Science Backed Ways Music Affects Your Brain and Productivity Chad Grills - https://medium.com/the-mission/the-science-backed-waysmusic-affects-your-brain-and-productivity-e11145079305
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
OBJECTIVE
to increase productivity through means of music
SUMMARY
Multiple researches have proven that music can be a reliable productivity “hack� or aide when it comes to concentrating for prolonged hours. Yet, the trick is to actually maintain a careful balance between sound and silence to keep your brain from overworking. By introducing classical music-based algorithms into selecting music playlists, science can finally be used properly to connect music and productivity in a healthy way. As a designer, I found an opportunity to create the visual space for these algorithms to exist and be applied in this industry, and contribute towards a more productive and less stressful working system. And now, Musictivity has your back on this with handcrafted algorithms and intuitive products.
49
50
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
51
52
H A R I N I V E N K ATA R A M A N
THE PEOPLE
My target audience:
Are 25–40 year old professionals hailing from various careers and backgrounds Listen to music for more than 4 hours a day while working on official things Are actively engaged in either higher academic pursuits or in a mentally demanding job Use Spotify, Pandora, iTunes or any other musicproviding software or service.
But why? People between the ages of 25-40 are the highest percentage of start-up owners and employees. Furthermore, in cities like San Francisco and New York, this is the age range on whom most responsibilities are stacked on, making them easy targets for a slow spiral into stress-related health issues in the long term. I chose to work with this specific age range because it also contains the highest percentage of multitaskers in today’s competitive world. They need more focus than most other age ranges due to the multi-faceted nature of their jobs, which can easily overwhelming in open workspaces: like an open office, an internet cafÊ, a coworking building, or even open public spaces.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
53
54
H A R I N I V E N K ATA R A M A N
THE BRAND
Musictivity means Music + Productivity The visual language of Musictivity is about movement and music, both within the listener’s mind as well in production at work. The keywords are simple: harmony, concentration & energy.
“Musictivity” is also the official term used to describe the unique expression of musical creativity influenced by emotion, imagination and improvisation
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
55
56
H A R I N I V E N K ATA R A M A N
LOGO DEVELOPMENT
The name of the brand is “Musictivity”, as a simple fusion of the words ‘music’ and ‘productivity’. The current icon depicts a concentric semi-circle fused with a musical clef symbol, and appears with the brand name in the general usage.
ICON MARK
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The typeform logo is based on the rounded, open, screen-friendly typeface, Proxima Nova, into a tight visual lock-up of 2 different type weights, symbolizing the combination of Music & Productivity, and can also be interpreted as music + activity, which is the ideology used in constructing the deliverables.
I C O N - LO G OT Y P E M A R K W I T H TA G L I N E
57
58
H A R I N I V E N K ATA R A M A N
L O G O A N AT O M Y
1x
space between letter blocks becomes = x/2 when the height of the logo = between 1.5" to 36"
6x
1x 5x
2x
2x
7x/4
2x
space between logo letter blocks becomes = x when the height of the logo = less than 1"
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
59
THE BACKGROUND
1x 2x 1x 1x
x/2
7x
x/2
2x
2x
TA G L I N E
Appears only when logo height = more than 36" For marketing deliverables only space between tagline letters = 1x space between tagline words = 2x
60
H A R I N I V E N K ATA R A M A N
LOGO USAGE
Clear Space: measurement of the logo (type+mark lockup) height on all sides
x/3 x
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
Clear Space: measurement of the iconmark height on all sides
61
62
H A R I N I V E N K ATA R A M A N
LOGO USAGE
DARK BACKGROUND:
LIGHT BACKGROUND:
VARIED/ MIDTONE BACKGROUND:
ICONMARK USAGE
Interactive symbol, product logo screen and on-product logo icon.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
CHANGING COLOR OUT OF BRAND COLORS
DISTORTION
63
THE BACKGROUND
TYPEMARK ONLY
REARRANGEMENT OF LOGO PARTS
OUTLINES
64
H A R I N I V E N K ATA R A M A N
COLORS
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
PRIMARY USAGE
65
THE BACKGROUND
SECONDARY USAGE
MIDNIGHT NAV Y (main)
Lilac
C80 M75 Y50 K70
C56 M44 Y22 K0-22
CORAL (accent)
Passive Green
C11 M76 Y62 K1-35
C94 M0 Y100 K0-25
Active Blue C100 M26 Y0 K0-35 TERTIARY USAGE
Bluish Tones
Creative Yellow
C60-75 M50-70 Y25-45 K40-65
C11 M33 Y95 K0-35
Calm Tints C0-20 M0-7 Y0-12 K0
66
H A R I N I V E N K ATA R A M A N
GRAPHIC STYLES: CIRCLES AND CONCENTRISM
Concentric circles are symbols of movement and concentration. In this system, dotted and outlined circles form concentric patterns to be used as an element of emphasis when combined with photographs or other illustrations. In general, concentric shapes are reminiscent of focus and reinforcement. However, depth can be percieved in even linear shapes by use of line weight or thickness.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
67
THE BACKGROUND
Linear shapes can be anything from lines, to circles, squares, rectangles, etc. that fit into the visual system’s guidelines concerning illustration, data visualization and other applicable instances.
68
H A R I N I V E N K ATA R A M A N
GRAPHIC STYLES: ROUNDED EDGES
Since the central mood of the brand is centered on a circular movement, any shape or icon that needs to be included (on account of material affordances or surface restraints) has to be rounded at the corners. Similarly, all the icons that appear in the system have rounded edges and a softer outline to provide clarity and a pleasant experience overall.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
GRAPHIC SHAPES
ICONOGRAPHY
THE BACKGROUND
69
70
H A R I N I V E N K ATA R A M A N
I L L U S T R AT I O N S
The brand is about music, movement and the alignment of concentration and productive activities by harmony. This can be best represented by static and animated illustration. Just like the graphic shapes in the system, the illustrations will also be focused on being bright, simple and aesthetically harmonious. They will be applied on marketing, promotional material, merchandize, and the brand website.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
71
72
H A R I N I V E N K ATA R A M A N
I L L U S T R AT I O N S
Brain (main)
Designing
Work
Writing
Reading
Programming
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
Budgeting
Creating Presentation
73
THE BACKGROUND
Strategy
Archiving
Brainstorming
Checklisting
74
H A R I N I V E N K ATA R A M A N
I L L U S T R AT I O N S : D ATA V I S U A L I Z AT I O N
Most the infographic data comes from combining music and work, so they will be created by combining illustrative shapes with linear graphics to make meaningful compositions for the web pages, videos, GIFs and tutorials that will be part of each of the final deliverables.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
75
THE BACKGROUND
PRODUCTIVIT Y PIE GRAPH
C
WRITING SESSION
Dm
EF
Em
FG
m
76
H A R I N I V E N K ATA R A M A N
I L L U S T R AT I O N S : S C I E N T I F I C V I D E O
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
YouTube Link https://youtu.be/WnicU-oUg_s
THE BACKGROUND
77
78
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
79
80
H A R I N I V E N K ATA R A M A N
TYPOGRAPHY
4x
Proxima Nova Bold
HEADING
2x
Proxima Nova Bold
Subheading
2x
Proxima Nova Bold
Tutorial Titles
1.2x
Proxima Nova SemiBold, Proxima Nova Regular
Current Song Name Other Song Name
1.2x
Proxima Nova Thin
ARTIST / ALBUM
1x
Proxima Nova Regular
Body content
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
1.5x
Proxima Nova Bold
ROU N D BUT TO N CO NTE NT
1.2x
Proxima Nova Light Italic
link button
81
82
H A R I N I V E N K ATA R A M A N
PHOTOGRAPHY
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
F E AT U R E S :
soft depth of focus, objective concentration, warm – neutral hues, candid and commerical subjects, represents focused clarity.
83
84
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
85
86
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
87
88
H A R I N I V E N K ATA R A M A N
PHOTO -APPLIQUE (BRAND)
COLOR BLANKET OVERLAY:
Used for a few important web pages: the landing home page, about, contact, etc. to break monotony of pages in sections without focused color images. The main purpose of this overlaid color is to provide a harmonious transition from fullcolor pages to the more serious, plain pages in the website, as well as increase the focus on the brand. It is also an essential player in the marketing design for the brand, and has the potential to develop into a template for presentation and infographics.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
89
THE BACKGROUND
EDM Electronic Pop Gaming themes
6 hours of Electronic Pop
5 hours of EDM
5 hours of Gaming themes
Movie Soundtracks Classical Country Rock
90
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
91
92
H A R I N I V E N K ATA R A M A N
PHOTO -APPLIQUE (MUSIC)
ALBUM COVER BACKGROUNDS: While playing music, the album/song covers can be modified to appear in duller clarity or exposure in the background. This, however, is not the only version of the externally sourced imagery to be displayed; the original image needs to accompany the complete song information at all times. Inside the actual song dashboard, however, the original picture appears in a huge circle with the productive zone color disappears into the text below. This does not apply for any brand imagery in the app or any other brand deliverable.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
93
94
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
95
96
H A R I N I V E N K ATA R A M A N
03
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
the deliverables
97
98
H A R I N I V E N K ATA R A M A N
D E L I V E R A B L E S S T R AT E G Y C H A R T
T OP IC A R E A
I N S IG H T 01
Music & Productivity
Open-office cultures have reduced privacy and individuality, increased exposure and vulnerability.
OU T C OM E
Headphones can help assert control over aural environment — improve determination and focus.
Increase (general/creative) productivity through music
William Craig, Forbes/Entrepreneurs
AU DI E NC E
S T R AT E G Y 01
25+ year olds who work more than 12 hours a day in creative and managerial positions and live stressful, tiring lifestyles that require tools to improve focus & concentration.
Create personalized audio-visual environments for listener to assert control over.
DELIV ER A BLE 01
SMART WEAR
HiFi tech-based headphones that work with the app to monitor the flow of music accordig to the biometric reading of the user and to provide acoustic barriers.
Product Packaging
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
I N S IG H T 0 2
I N S IG H T 0 3
The value of music while working is in the positive mood change it incites and an enhanced perception on design that successfully leads to improved productivity of the worker.
Classical music has a close connection with productive brain activity,even if you’re not a classical musician or fan. Applications of this have only been for experimental purposes, not with the intention of keeping brains healthy on a regular basis.
Dr. Teresa Lesiuk, The Psychology of Music
S T R AT E G Y 0 2
S T R AT E G Y 0 3
Manage the moods of a listenerworker according to the kind of work or productivity they are working towards.
Inform listeners about the benefits of learning or listening to certain streams and systems of music and how it can be synthesized into their daily lives.
DELIV ER A BLE 02
DELIV ER A BLE 03
INTUITIVE API
AWA R E N E S S P O R TA L
Digital interactive app that gears the mood of the listener and enhance receptive perception to work effectively towards a defined goal.
Extensive brand website that exists as a portal for spreading awareness, educating users and providing access to download the application and buy the headphones.
Interface Design Iconography
Website Marketplace
99
100
H A R I N I V E N K ATA R A M A N
M AT E R I A L S M AT R I X
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
101
102
H A R I N I V E N K ATA R A M A N
S T R AT E G Y 0 1
Create an audio-visual environment for the listening worker to assert control over
BASED ON THE INSIGHT Open-office cultures have reduced privacy and individuality, increased exposure and vulnerability. Headphones can help assert control over aural environment — improve determination and focus. William Craig, Forbes // Entrepreneurs
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
I M P L E M E N TAT I O N
smart headphones with biometric sensors
PR O D U C T & PAC K AG I N G
This strategy initially focused on building just the packaging design within with a highly detailed product mock-up would exist. Thus, I began designing the headphone box before designing the headphones themselves. However, through multiple user-testing sessions, the final user requirements on this deliverable expanded, and I was able to create multiple headphone renders with highly details box, case and contents for these.
103
104
H A R I N I V E N K ATA R A M A N
P R OTOT Y P E 0 1 The initial mockup was based on existing headphone packaging sizes, and I wanted to explore circular shapes on cubic surfaces, but it tended to be more boring.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
105
106
H A R I N I V E N K ATA R A M A N
P R OTOT Y P E 02 To counter the boring, everyday usage of a square or rectangular box to package headphones, I began to explore circular/cylindrical options. The cylindrical box mock-up was better received by test users, promptimg further refinement in this direction.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
107
108
H A R I N I V E N K ATA R A M A N
P R OTOT Y P E 03 : H A R D M O C K U P For the third round of user-testing, I built a hard-mock-up of a cylindrical package out of a papier mache box, with a complete set up of 2 compartments, an actual wireless heaphone, a manual, AUX cable, and charging cord. The 3-d prototype was received with initial surprise, but the users seemed to quickly find it fascinating to consider as headphone packaging. It was a productive set of 2 weeks to go back and forth about how the box worked for them. The finished box was round, with a diameter of 8�, and stands about 4� tall. There are 2 levels: the headphone bowl and the compartmented space for all other parts and pieces below. in a different layer. The feedback for this is charted in the following pages of this user testing report.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
109
110
H A R I N I V E N K ATA R A M A N
A N OV E R A L L I N S I G H T
Jean-Philippe, a software engineer, pondered over what he really wanted in headphones, and if it was reflected in the packaging prototype
User testing, especially user scouting, was a process I had thought I could expect some specific results, but if there was one thing that I had guessed right before the testing, there were about 5 things I had guessed wrong.
THE PROCESS The users were presented with the prototype and a quick summary of the core idea of the project as well as a mock-up of how the finished packaging will look like on flat pieces of paper, like product images.
The voice feedback of a few users can be found at https://drive.google.comfolderview?id=0B6FEpKlqzxnaa 2tBTmdNMFFSZ0k&usp=sharingfolderview?id=0B6FEpKl qzxnaa2tBTmdNMFFSZ0k&usp=sharing
Krishna, a data scientist at Lyft, was somewhat unsure if the box was as important as the headphones inside
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
Aishwarya, a data architect, thought that the colors were too snazzy for using in her office
Eugene, a designer, obsessed over the typography and the alignment of elements across the cap and the body of the packaging box
Cece, a graphic designer, wondered how the outside of the box could look like a big button, and if it was maybe, too extra-ordinary to be on a shop shelf
Vitaly, a UI/UX developer, discussed about the project, and the need for biometric sensors in headphones and other smart interfaces/devices
111
112
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
113
114
H A R I N I V E N K ATA R A M A N
T E S T R E S U LT S : B R A N D E L E M E N T S
The prototype used about 6 of the system colors in different places. The box was dark, and its components were bright, to keep the energetic vibe and still offer a premium, luxurious perception.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The icon logo had a more prominent placement whereas the logotype was placed on the side rather than the top.
A L R E A DY W O R K I N G
C A N I M P R OV E O N
The quote, the colors and the illustrated icons: all felt sleek and modern to atleast 3 of the users.
The salmon-ish color was too pink, and one user offhandedly commented that she’d never go for a pink headphone to take to work.
The midnight blue was a favorite in how it had a classic, yet digital perspective, along with the multiple concentric circles on several parts of the brand. The logotype was easy to understand, compared to the one that was concurrent during week 8, and it felt more playful in a controlled manner.
The idea that the logotype didn’t need to be on the top of the box was well-received, but it was confusing to not know the name of the headphones on top of the box either. The awareness brochure was interesting, but there needed to be a more cohesive structure of what to expect after the steps are undertaken, i.e., after connecting the app to the headphone.
115
116
H A R I N I V E N K ATA R A M A N
T E S T R E S U LT S : C O N T R A S T
The typeface used on the packaging was Proxima Nova, the existing brand typeface that was visibly friendly on screen. While it still felt trendy in print, the type anatomy allowed little room for delicate or detailed knock-out layout formation.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The idea that outlines are more harmonious and focused than solid circles was implemented in the box as well as the mock-up of the headphones.
A L R E A DY W O R K I N G
C A N I M P R OV E O N
The cap/lid of the box was successful in being intriguing.
The small text: it was too small to read.
One of the users thought that the round box, the concentric circles and the dark color reminded him of vintage/retro packaging for vinyl disks. The large text on the sides of the lid and the the quotes looked contemporary and added a “hipster�-like quality to the brand and the box.
The box itself was too obscure. The large dark cyclinder was premium, but some of the content was too generic. The contrast between text and the background was unintelligible in the user manual and the awareness brochure/leaflet. The overall perspective was too dark, some light colored elements would help make it look more eco-friendly and cleaner, as well as realistic.
1 17
118
H A R I N I V E N K ATA R A M A N
T E S T R E S U LT S : I N F O G R A P H I C S
The box and its components were filled with information were both familiar as well as new to almost all of the testing users. For this reason, I included an awareness leaflet with the box, explaining the process and the science behind
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
listening to music for productivity, which also somewhat brought more clarity to the project. Including the user manual and the leaflet, the box also contained infographic elements about the headphones themselves.
A L R E A DY W O R K I N G
C A N I M P R OV E O N
The illustrations were simple and clean, and easy to follow.
The user manual doesn’t need borders around diagrams; that’s too generic
The color coding of information was especially easy to follow from beginning to finish.
There needs to be more segregation of headings within the user manual and the awareness manual... it was difficult to make sense of a few spreads and of the grouping of some information.
The user manual was standard, but felt somewhat friendlier because of the big, rounded heading. The box infographics were interesting, and the brand connection was strong because of the rounded frames The layout of information—the process of explanation—was consistent, and logical in most places, which made a couple of users ask more follow up questions about the project’s more scientific motivations.
A legend would be useful for some of the icons used in the system.
119
120
H A R I N I V E N K ATA R A M A N
T E S T R E S U LT S : S T R U C T U R E & C O M P O S I T I O N
The prototype was built from a standard 8� diameter cyclindrical box, and the inner components were built out of foam and paper mache. The outer area was completely covered with printed Red River Paper matte, to reduce reflectivity and instill quietness.
A L R E A DY W O R K I N G
C A N I M P R OV E O N
The round box. Definitely should be round, because of the brand elements. The size felt sturdy and standardized.
A user shook the box and then asked if I could hear the headphones rattling inside. The space inside was too loose and could be further compacted
The compartments were new, and made more sense than pockets for each part/ piece involved.
The main interest for most of the users was visually seeing the heaphones in the package itself. The idea that you could walk into a store, look at the box and see the actual headphones (on it, or through a diecut hole) was a must for at least 2 users. The box itself felt a little generic; more interesting tactile elements like seals and rip-off tags were suggested to make it feel more interesting to touch.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The headphones used and the other pieces were all separately collected and mocked-up into the prototype to help guide the users to explore through the box.
121
122
H A R I N I V E N K ATA R A M A N
T E S T R E S U LT S : L A N G UAG E
The physical prototype was a deviant from the other digital deliverables in the thesis system, which made it both unique and tricky. While there were generic pieces of information that were necessary to be included on the package, I had a long, slow-moving struggle
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
when it came to claiming the design for the system verbally, i.e., through more than just colors or brand-related words. There needed to be a clear, friendly voice that was also smart and crisp, to guide the user throughout the deliverable.
A L R E A DY W O R K I N G
The big quote on the side of the box was extremely legible, and felt contemporary and trendy in usage, almost like a review on the box itself. The description of the features of the headphones on the box The information/awareness leaflet with all the brain diagrams and lists had nice color coded phrases to help isolate the important components, like verbal formulae to follow. The grammar, directions, and follow-up text were all easy to follow, and used simple phrases to explain even where the logic was more complex than layman terms.
C A N I M P R OV E O N
“Be Musictive?� was a question that was whispered a few times, as the word was definitely something new to the users. They thought it was the name of the product, not the tagline, and understood better when provided with alternative taglines to compare and contrast.
123
124
H A R I N I V E N K ATA R A M A N
T E S T R E S U LT S : FA M I L I A R I T Y
The prototype was the major step taken towards producing a realistic deliverable that could occupy shelf-space in a retail store, or on an online shopping portal, and be compelling enough to buy.
A L R E A DY W O R K I N G
A few users opened the box and interacted with the headphones, as they would in a store. This helped keep their interactions with the design continuous. The prototype on a mockup was especially useful in reducing the visual focus of the box itself and instead direct users to talk about walking through the package and dissassemble/reassemble the components easily. A user tried rolling the box on its side and read around, and laughed when a couple of details became more prominent in this perspective The box was somewhat distinctive already because of its shape, and would have stood out to the users in a store because of the different shape.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
It had to have all the compulsory parts and pieces, and it had to feel comparable to other packages in terms of quality, transparency, personalization and ease of setting up/usability.
C A N I M P R OV E O N
The prototype was constructed on the premise that standard round boxes would be different enough, but it was not. The box opened like a biscuit tin, not like a fancy pair of headphones. The soft outlook of the design wasn’t much reflected in the inside of the prototype inself, especially because the compartmentalization could use more thought in terms of more interesting shapes than the current Mondrian divisions. The box a good shape, but the overall experience of opening it had to be more unique, in terms of the actions involved; there were opportunities to add a second structure inside to help make this possible, and completely push the design forward .
125
126
H A R I N I V E N K ATA R A M A N
T E S T R E S U LT S : OV E R A L L S U M M A RY
The circular shape of the box was interesting enough to draw the user’s eye towards it. The dark box looked premium on the outside, and the idea of a faux leather puch to carry the headphones in seemed reasonable. The big green quote was fun to read; the round box was itself fun to rotate and read The informational awareness flyer in the instructible pocket was successful in getting users to understand the brand The illusrtrations were easy to follow and understand The box was a tad large, which added to its interest
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
There was no way to see the actual headphone. The color of the headphone wasn’t all that attractive, and the fact that it was only one color seemed to make it less interesting than anticipated The only fun thing about the box seemed that it was round; I needed to add at lease one more tactical point of interest to interacting with the box There was a need to explain more after reading the flyer to make the product more meaningful Unnecessary elements had to be removed because the manual looked more like a brochure than an instruction document The contents weren’t as tightly packed as the users thought they should be
127
128
H A R I N I V E N K ATA R A M A N
P R OTOT Y P E 0 4 The best way to showcase the headphones was to show them off through a clear lid, which also helped visualizing different colors for the same. Going forward, it is a visually motivated decision to head for a bigger box, of 10� diameter, to house the open heaphone on a layer atop the other components in the box. The separating layer, therefore, can be modified to the color of the headphone, making it most obvious from a distance as to what the headphone really looks like while also being attractive on a display.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
129
130
H A R I N I V E N K ATA R A M A N
The first choice in the product design was to color the headphones in the accent coral/flamingo light red, and highlight the navy blue.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
131
132
H A R I N I V E N K ATA R A M A N
FINAL However, the headphone design compelled the colors to be more user-friendly and remind the users about the productive zones, and therefore, the end packaging adopted the colors of the headphones.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
133
134
H A R I N I V E N K ATA R A M A N
The components included: SMART HEADPHONES, USB CABLE, U S E R M A N UA L , AU X C A B L E , B R A N D I N F O G R A P H I C F LY E R C A R RY O N C A S E
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
135
136
H A R I N I V E N K ATA R A M A N
HEADPHONES I was able to talk with hardware engineers and product designers at Alloy Product Development, a San Franciscobased product design agency who also designed one of the iconic Beats by Dr. Dre headphones, to understand the design flexibility of a potential headphone design.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
137
138
H A R I N I V E N K ATA R A M A N
3 D S K E TC H E S Created in Autodesk 3D Max, a product design software
EEG Sensors to measure brain waves and heart rate to calculate concentration
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
Headphone design is not graphic design, but it is about strategy, when it comes to Musictivity. Thus, the Musictivity headphone is a part of the deliverables, and focuses on the features that make heaphones productive, intuitive and user-centered to increase focus based on biometric readings.
UI Touchscreen & Rotary Display Surface enables one-touch button for connecting to the Musictivity App, volume control by rotation and playback control on the sides of the display
Light Guides to display parallel synchrony between music feed, heart rate and highly focused brain waves
139
14 0
H A R I N I V E N K ATA R A M A N
FINAL HEADPHONES
A visual Photo-realistic 3D render
bina ura l
UI Display surface ba ss
Display can be set to show music characteristics, brain wave monitor or nothing, depending on the user’s settings in the Musictivity app
string s
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
141
THE BACKGROUND
Color Characteristics The main headphone is the same calming navy as is consistent in the brand. However, depending on the user, the headphones come in 3-4 colors based on the productive zones they embody.
Smart Power The UI display shows the user (after removing the headphones) how productive the session was in a histogram fashion and allows user to save a session for future use
142
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
14 3
14 4
H A R I N I V E N K ATA R A M A N
All Kinds of Productivity The Navy Headphones are the classic Play-It-All version, which makes them the most expensive pair of Musictivity headphones, especially since they handle studying brain patterns for all kinds of activities at work.
The Passive Mind Productivity Passive productivity is the zone in which there is very little physical work, but a lot of mental work going on, like reading, or reviewing, or understanding complex information.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
Active Hands Productivity Being active, is being stuck in a monotonous or repetitive action while your mind does very little work and tends to wander. Ever filled out a bunch of copies of the same document? Maybe youcan forget about it being boring again with the help of Musictivity headphones.
Creative Energy Productivity As a creator, the mind is involved in the highest amount of multitasking possible. There’s so much going on at the same time as you try to make connections as fast as possible, and you need an understanding environment where your creative trance will not be broken.
145
146
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
147
148
H A R I N I V E N K ATA R A M A N
S T R AT E G Y 0 2
Stimulate productivity by matching music to activity performed
BASED ON THE INSIGHT The value of music while working is in the positive mood change it incites and an enhanced perception on design that successfully leads to improved productivity of the worker. Dr. Teresa Lesuik, The Psychology of Music
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
I M P L E M E N TAT I O N
intuitive application to make custom playlists
INTE RFACE DESIG N
Chronologically, this was the first deliverable knocked out, which built the base for all the others to be built upon. The application itself was a challenge in terms of understanding the first set of user wants and needs and then making design descisions that shaped the visuals of the entire thesis itself.
149
150
H A R I N I V E N K ATA R A M A N
VERSION 01 The application, like the headphone packaging, went through multiple design phases before the final one came into existence. The first version was the most complex, and confused a lot of the initial users who tested it out. The consecutive pages detail the user report that led to the biggest changes in the app design.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
151
152
User walking around and using it, testing if it was travel-friendly and quick to understand
User explaining how the heading was too distracting from performing the intended action on the screen
H A R I N I V E N K ATA R A M A N
One user’s typical working station/dock at the Lyft office, Berry Street, San Francisco
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
A N OV E R A L L I N S I G H T User testing, especially user scouting, was a process I had thought I could expect some specific results, but if there was one thing that I had guessed right before the testing, there were about 5 things I had guessed wrong.
THE PROCESS The users were presented with the prototype and a quick summary of the core idea of the project as well as a brief list of what the fully-fledged app will do. They were told to move through the app as they wished and to voice their feedback as they moved along.
THE RECORDS The voice feedback of a few users can be found at https:// drive.google.comfolderview?id=0B6FEpKlqzxnaa2tBTmdN MFFSZ0k&usp=sharingfolderview?id=0B6FEpKlqzxnaa2tB TmdNMFFSZ0k&usp=sharing
153
154
H A R I N I V E N K ATA R A M A N
USER TESTING RUBRIC
What does the prototype do?
Screen split-up according to specific function:
Major feedback sections:
Basic functions include: connecting other music services, setting up an account, gearing the user’s profile to the productivity settings, simulating the playing of music, offer playlist choices.
05 screens : Introduction 02 screens : Set up account 09 screens : Compulsory first-time use 03 screens : Simulated play 03 screens : Alternate screens w/ play 02 screens : Tabulated menu 02 screens : Returning user dashboard
Color choices Element contrast (size & color) Navigation (buttons & links) Accessibility (internal connectivity) Language (vocabulary, usage) Familiarity (conceptual, visual & verbal)
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
Who?
THE BACKGROUND
The users whose results (in quotes, images, voice) I have documented in this report ranged between designers to data scientists, decision analyst and even a start-up app developer/coder. The jobs make up for the handles, since they are more universally relative to the workspace and the work culture than culturally-influenced factors like names.
When?
Where?
July 20th – 29th, 2016
This user testing was done only in San Francisco, CA, at various locations, including Vega Coffee, Studio Anomalous, Lyft SF Offices, WeWork (8th & Mission St), and at a work-from-home user’s home office.
155
156
H A R I N I V E N K ATA R A M A N
“It’s not black, it’s not orange; it’s interesting.”
“Why do I have to get no option on the home page to get to the last played list?”
““Hi There!’ That’s makes this thing much better.”
C O LO R C H O I C E S
ACCESSI B I LIT Y
L A NG UAG E
CONTR AST
“It gets so dark and plain—why can I not have a photo here in the background?”
“Ooh, a toggle! I love this toggle, it makes me wanna swipe it again and again.”
FA M I L I A R I T Y
“This ‘Boost’ mode thing—it’s too complicated to go to and change. What if I want to change it in literally one step?”
U S E R F E E D B AC K M A S T E R C H A R T
PIE CHART KEY
N AV I G AT I O N
T H I S A C T U A L LY W O R K S !
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
C O LO R C H O I C E S
CONTR AST
THE BACKGROUND
“The grayish-blue was dull, like, you know, bland”
“Somehow, so many colors makes it seem bright and friendly.”
N AV I G AT I O N
FA M I L I A R I T Y
“You know, this wheel thing is fun.”
“Scales? What scales are these? Am I to be weighed or something?”
ACCESSI B I LIT Y
“Ah, the 3-line menu thing and the settings button—they’re were they’re supposed to be, so that’s good.”
L A NG UAG E
“‘Pro...duct...ivity meter;’ what does ‘input’ or ‘output’ mean? They sound sort of computer-y, don’t they?”
THIS DOESN’T WORK...
J UST A N ACCENT
157
158
H A R I N I V E N K ATA R A M A N
CO LO R C H O I C E S
The prototype used about 5 of the system colors in their overall purpose: Navy for the background, Light navy for body content, green and fuchsia for buttons, yellow for subheadings, etc.
Wow, this page looks nice—look at all those colors in here! START-UP DEVELOPER
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The overall positive feedback was that the dark background interacted and highlighted the fuchsia and green colors. The choice of colors were referred to as bright and easy to follow with.
The average negative feedback was that the tutorial screens had dull, unattractive screen colors that discouraged from reading the content altogether.
This is boring—do I have to read through all of this? INDUSTRIAL DESIGNER
This sort of looks more interesting than the entire page. DATA SCIENTIST
159
160
H A R I N I V E N K ATA R A M A N
E LE M E N T C O N T R A S T
The general appearance of the prototype was dark with bright foreground elements in terms of graphic and type.
This is a good screen—see how you have so many different font sizes here and the grey (blue) actually works nice with the orange line? Probably your best screen, too. UX DESIGN RESEARCHER
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The positive feedback included the ease of button access and the usage of multiple bright colors to indicate different functions.
The negative verve of this topic leaned towards the really small size of type in a few screens and lack of differentiation between entirely different actions.
What’s happening? If the music’s playing, why is background so blank? INDUSTRIAL DESIGNER
This is nice. I know what song I’m listening to, because, well, it’s from my music provider, but it still needs to be there, small and tidy. DECISION ANALYST
161
162
H A R I N I V E N K ATA R A M A N
N AV I G AT I O N
The prototype had functions in it that most other existing apps do not combine in a single app. Hence, I logically arranged the screens in the order I intended the outcome to function.
There’s no way those icons are sophisticated. Too big and bulky to match your overall feel. UX DESIGN RESEARCHER
Great, it’s like I can go in and change anything that I want once I’m a seasoned user. I like that level of detail is tucked into one corner instead of cluttering anywhere else. DECISION ANALYST
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The basic pointers of navigation: buttons, icons, menus—they were straightforward and clearly indicated the action to be performed and could be accessed from almost all screens, so it was easy to track into a specific portion of the app if needed.
There was no indication of the section or action being persormed until the action was completed. Also, the users prefered smaller navigation buttons and more graphical inclusions to separate headers from headings.
How do I get back to the previous screen? Or cancel this? DECISION ANALYST
That would be an interesting animation to look at while waiting for something to happen. START-UP DEVELOPER
163
164
H A R I N I V E N K ATA R A M A N
AC C E S S I B I L I T Y
Accessibility within an app is generated by having menus and indicative fields. These provide more control to the user in terms of information and aids navigation.
Bleh. [actually quits prototype to look at Spotify] INDUSTRIAL DESIGNER
This page looks like you designed it for old people who have eyesight problems and colorblindness. The words are too big and childish. UX DESIGN RESEARCHER
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The negative verve of this topic leaned towards the really small size of type in a few screens and lack of differentiation between entirely different actions.
The positive feedback included the ease of button access and the usage of multiple bright colors to indicate different functions.
Where am I, again? I feel like it’s a different screen but also the same as the one with the playing circle. DECISION ANALYST
Nice touch! This is exactly what I’d wanna see if I’d quit and re-entered the app. Gives me props to continue a session if I’d stopped it accidentally. INDUSTRIAL DESIGNER
165
166
H A R I N I V E N K ATA R A M A N
L A N G UAG E
The prototype had slightly higher levels of corporate language than I thought would be easy to understand for new users. The intention was to deliver a crisp and sophisticated message using technical vocabulary.
Simple. Easy. Takes me about a minute to do this. See? INDUSTRIAL DESIGNER
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The overall positive feedback was that the screens with the words “boost” or “Hi” or simple headings worked well in conveying a friendly interface that motivated the user to explore more and click faster.
Most of the screens involved with the technical functions: tutorials, gears, etc., had more misleading and aversive qualities in the words used to describe them.
Too much. Can I not simply get a drop down menu or a place to enter what I’m doing and let the app figure out what kind of work it is? DATA SCIENTIST
Blah, blah, blah? START-UP DEVELOPER
Input, output, starts to sound like machinery. DECISION ANALYST
167
168
H A R I N I V E N K ATA R A M A N
FA M I L I A R I T Y
The general appearance of the prototype was dark with bright foreground elements in terms of graphic and type.
This is standard, awesome. Most apps use now insist that I have a social profile on them What if I don’t want FB or LinkedIn here? I need this option. DECISION ANALYST
If I can login with Facebook, should I also be able to sign up with it? Should this be under Login, or Sign up? DATA SCIENTIST
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
The positive feedback included the ease of button access and the usage of multiple bright colors to indicate different functions.
The negative verve of this topic leaned towards the really small size of type in a few screens and lack of differentiation between entirely different actions.
Swipe, swipe. Yeah, I recognise those dots. DECISION ANALYST
Bold button. This is what they always want us to choose. INDUSTRIAL DESIGNER
Wait, what is “attune”? If they’re headphones, make it more obvious? INDUSTRIAL DESIGNER
169
17 0
H A R I N I V E N K ATA R A M A N
V E R S I O N 02 The mobile app is designed for fast and easy use. The buttons are huge, the colors are highly in contrast to each other and the suble elements are pushed out of the regular usage screens.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
17 1
17 2
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
17 3
174
H A R I N I V E N K ATA R A M A N
FINAL VERSION The second version of the app invited virtually very little negative user comments, except for the fact that it had glaring contrasts. Coupled with a few more user feedback, I made the final shift of the app from flat to subtle gradients. In the final application, the multicolor gradients only occur at the overall branding screens, but single shade/tone gradients mainly act on buttons, overlays and icons
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
NEED FOR GRADIENT SHIFT
Testing users didn’t like the heavy contrast The keyword: Harmony, needed more presence The visual merge of 2 colors were metaphoric to the synchronization of mind and activity Testing users found the flat, highly contrasting layouts visually similar to Spotify Gradients can open up the existing color palette Gradients also focus on the realistic depth and aid the visual values in productivity Gradients immediately add colorful playfulness to the brand in simple ways Subtle gradients are like raising a song to a soft pitch shift that sort of adds to the magic
17 5
17 6
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
17 7
17 8
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
17 9
180
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
181
182
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
I N V I S I O N P R OTOT Y P E
https://invis.io/9NDY5CKQY
183
184
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
185
186
H A R I N I V E N K ATA R A M A N
T H E D E S K TO P C O U N T E R PA R T The desktop version of the app uses the same screens and drops down from the task bar on an Apple computer, like MacBook, or iMac, for the ease of usage and accessibility. It follows the same user journey, except it can be minimized from the desktop and can add to the visual experience of listening in a persistent manner.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
187
188
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
189
190
H A R I N I V E N K ATA R A M A N
S T R AT E G Y 0 3
Inform listeners about multiple benefits of music based on science and classical theories
BASED ON THE INSIGHT Classical music has a close connection with productive brain activity,even if you’re not a classical musician or fan. Applications of this have only been for experimental purposes, not with the intention of keeping brains healthy on a regular basis.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
I M P L E M E N TAT I O N
a website as an awareness portal and marketplace WEBSITE DESIGN
The website, being the first manifest of the user experience, had to be the last thing to be completed. As part of the process, I spoke to users about the science behind Musictivity’s major deliverables: the headphones and the application, and created storylines to display the information necessary.
191
192
H A R I N I V E N K ATA R A M A N
T H E F I R S T N A R R ATI O N I created cards and short videos explaining my thesis project to users, to try and outline to them the best way to present complex information in interesting ways.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
193
194
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
195
196
H A R I N I V E N K ATA R A M A N
P R OTOT Y P E 0 1 The website prototype as it was in its early stages was very straightforward and flashy, but subsequently, it felt too playful for such a serious topic in discussion.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
197
198
H A R I N I V E N K ATA R A M A N
P R OTOT Y P E 02 This version was loaded with too many images and less educative, but substantially more branded than the previous version.
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
199
200
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
NEAR-FINAL RENDER This contains the final website pages, with the old exploration of the thesis logo, but lays out the information in its current, simplified state and direct tone.
201
202
H A R I N I V E N K ATA R A M A N
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
203
204
H A R I N I V E N K ATA R A M A N
T H E F I N A L W E B S IT E Once I had simplified the information pathways to exhibit the science, I was able to deploy the website, now found under the URL:
bemusictive.com
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
THE BACKGROUND
205
206
H A R I N I V E N K ATA R A M A N
RESEARCH INSIGHTS
Open office layouts— a technique for “deforestation of productivity” William Craig, Forbes Magazine, 2014 Music as a Multitasking Productivity Hack Study published by Chinese University of Hong Kong, circa 2012 The Creative Balance Between Music and moments of Silence Dr. Kimberly Sena Moore, Ph. D. Boredom is a Productivity Killer Tim Eisenhauer, Axero Solutions Effective Intuition: why Spotify’s Discover Weekly is a step in the Right Direction David Pierce, Wired Magazine, 2015 Music can boost your immune system Dr. Ronny Enk, Neurocognition expert Listening to your favorite music is good for your brain (without long-term side effects) Dr. Teresa Lesuik, The Psychology of Music The Preference for Mood Management = 70% Observed and recorded through multiple surveys and listening sessions The Economy needs some Jammin’! NAMM Foundation, Why Music Matters
Is Music the Key to Success? Joanne Lipman, The New York Times, 2013 A Colossal Lack of Classical Theories Interviews with music therapist, San geetha Sampath Sairam Different Kinds of Productivity Music by Mood A Study on General Workplace Productivity Cornell University, Florida Unpredictable Circadian Soundtracks User Experiment: listening everyday to the same playlist for different activities Control is Key Dr. Anneli Haake, Ph. D. in Music Psychology Multitasking for Better Creative Judgments Alejandra Ruani, The Health Sciences Academy New Music is Not the Good kind of new to work with Dr. Teresa Lesuik, The Psychology of Music
MUSICTIVITY: A THESIS ABOUT MUSIC FOR PRODUCTIVITY
207
THE BACKGROUND
REAL USERS IN TESTING
target age
control users
age
22-35 years old
Data Scientist Industrial Designer Start-up Owner Financial Analyst UI/UX Designer Web Designer Financial Auditor Retired Banker High School Student College Student Data Engineer Big Data Analyst Data Architect Software Developer Home-maker Web / CSS Developer Non Profit Owner Small Business Owner Graphic Designer
27 26 31 25 28 26 43 69 16 21 26 25 24 30 39 31 33 52 23
user occupations Information Technician UX Designer Graduate Student Engineer Graphic Designer Programmer Data Analyst/Scientist criteria music enthusiast 10-12 hour workdays open offices computerised work multi-taskers
C O LO P H O N
This book layout was created and managed in Adobe InDesign CC. The designs in the layout were created in Adobe Illustrator, Photoshop, After Effects CC and Sketch, excluding screenshots from Google Wix, Wordpress, and Adobe Premier Pro.
resources Unsplash Adobe Stock Plotnet, Inc. Red River Paper Co. Facebook Google Books Epson, Inc.
typefaces design
Proxima Nova Std Proxima Nova Alt
Harini Venkataraman C O P Y R IG H T Š 2 0 17
course
MFA Thesis
print 32 lb RedRiver 24 lb Presentation Matte 64 lb RedRiver 75 lb Ultra Premium Matte Epson 3880
instructor
Phil Hamlett, Carolina de Bartolo, Jeremy Stout, Wioleta Kaminska department chair
Phil Hamlett language supervision
Hilaire Fong Krishna Kumar Selvam
web Wix by Google Wordpress Google Fonts Instagram Adobe Typekit Twitter
category masters thesis UI/UX infographics keywords harmony concentration energy
skills photography interface design web design motion graphics concept design information architecture
deliverables mobile application packaging smar t headphones website promotional materials
210
H A R I N I V E N K ATA R A M A N
musictivity SYNOPSIS
S P E C I A LT Y
Several researches indicate that music as a productive aide is healthier than drugs like adderall and can reduce stress and depression that are found in hardworking multi-taskers in the technology sector, especially after long hours of looking at computer screens and taxing their minds heavily.
MFA Thesis
SKILLS
DEPARTMENT
Graphic Design and Digital Media
WEBSITE
Adobe Creative Cloud, Lightroom; Sketch, Invision, Wix, Autodesk 3DS Max, DSLR Photography
bemusictive.com
DELIVERABLES
musictivitythesis@gmail.com +1 925 206 0443
CONTACT
Activity Playlisting Application Bio-smart Headphones Ultra-Informative Website
INSTAG R AM
@musictivity