BATUQUE




Summary
I completed this responsive design project for my visual design course through General Assembly. I was given a creative brief and copy deck to leverage to craft this digital experience.

Role + Team
I spearheaded this project individually and participated in several feedback sessions with my instructor to iterate and improve my design.

Tools
-
Sketch
-
InVision
-
Principle
-
Photoshop
RESEARCH
BATUQUE'S OBJECTIVE
Batuque aims to cultivate a community of audiophiles that fosters musical exploration and constructive collaboration




BATUQUE'S DESIGN STRATEGY
Through modern design, a unique color palette and a nod to global music culture, Batuque will attract users looking for a deeper streaming experience.
AUDIENCE ANALYSIS
Batuque aims to attract a primary audience of young men who are socially active and consider music a huge part of their identity.
​
Secondarily, Batuque woos a non gender specific audience who enjoys music but has more mutable and impressionable taste.


COMPETITIVE ANALYSIS
The streaming space is notoriously competitive, and to better understand how the competition distinguishes themselves, I analyzed Spotify, Tidal and Apple Music's UI patterns.
SPOTIFY

-
Predominately dark UI
-
Green accent color
-
High contrast
-
Modern feel
-
Image heavy layout
-
Bright images
TIDAL

-
Less dense layout
-
Images with blur effect
-
Predominately dark UI
-
Teal accent
-
Image heavy
-
High contrast
APPLE MUSIC

-
Lightest UI
-
Bright, pastel colors
-
Modern gradients.
-
Image heavy
-
Varied image sizes
-
More complex IA with tabs
VISUAL DESIGN
MOODBOARDS
Centering my search around the keywords trendy, modern and social, I created moodboards for imagery, typography, color and layout.
IMAGERY

TYPOGRAPHY

COLOR

LAYOUT

COLOR EXPLORATION
After the competitive analysis, I realized a common theme with streaming sites was a minimal color palette with a strong accent color, which I wanted to echo. To do this, I created monochromatic color palettes leveraging colors from the moodboards that stood out. I then created tiles to preview what these colors would look like.

BATUQUE BLUE
Leveraging blue as Batuque's accent color created a modern and cool aesthetic, but since blue is such a gendered color, I thought it might alienate Batuque's secondary audience.
BATUQUE GREEN
Green stood out as a front runner due to its high contrast and edgy feel. It's also a color that doesn't elicit gender bias, but Spotify also features green as its accent color so it felt too close to competitors.


BATUQUE COPPER
I loved Batuque copper because of its uniqueness and inclusive feel. The gradients I created with it also gave the color nice dimension, and this color wasn't used much by competitors. I settled on this color as Batuque's accent color.
TYPOGRAPHY
I wanted to keep the body content modern and legible, so I was mainly between Roboto and Montserrat. I wanted to leverage the logo as an opportunity to create a brand around Batuque, so I chose Monoton, which I though evoked a bit of a retro feel and also mimicked sound waves with the lines. Below is some of the exploration I did.

Montserrat + Roboto

Monoton + Fira Sans

Monoton + Roboto

Montserrat + Fira Sans
LOGO DEVELOPMENT
In Portuguese, Batuque means a drum beat. I wanted to evoke a feeling of movement reminiscent of sound waves and also pay homage to the meaning of the word Batuque through the logo.
​
I found the font Monoton, which features several lines to create letters, and I thought to manipulate these letters to achieve my design goals.
I also leveraged the copper monochromatic palette to fade the lines as they got farther out from the center of the Q also mimicking the physical properties of sound waves.

MOBILE APP LOGO
I created a mobile app icon using Batuque's Q as the logo. The copper really stands out here, because there aren't many apps in the app store that have copper or orange as the primary color.

STYLE GUIDE
I composed a desktop style guide to influence the visual design. For the fonts, I had a base of size 20 with a ratio of 1.25 to influence the font sizes across the experience and create a sense of order amongst the different font hierarchies.

A RESPONSIVE EXPERIENCE
I created landing page mockups for desktop, tablet and mobile devices.
Although these aren't fully functional prototypes, feel free to take a look a the visual design through InVision for a more native experience by clicking on the images.
Click to view each experience through InVision