top of page

Previous

BATUQUE

batuquemobile.png
Ipad.png
MACBOOKBATUQUE.png
noun_item list_1657837.png

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.

noun_team_1094223.png

Role + Team

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

noun_tools_2149744.png

Tools

  • Sketch

  • InVision

  • Principle

  • Photoshop

Next

RESEARCH

BATUQUE'S OBJECTIVE

Batuque aims to cultivate a community of  audiophiles that fosters musical exploration and constructive collaboration

ThisOne_3x.png
ThisOne_3x.png
Fans2_3x.png
Girl1_3x.png

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. 

AUD1_4x.png
AUD2_4x.png

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

Spotify.png

  • Predominately dark UI

  • Green accent color

  • High contrast

  • Modern feel

  • Image heavy layout 

  • Bright images

TIDAL

TIAL.png

  • Less dense layout

  • Images with blur effect

  • Predominately dark UI

  • Teal accent 

  • Image heavy

  • High contrast

APPLE MUSIC

Apple.png

  • 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

Moodboard1Masked.png

TYPOGRAPHY

TypoMoodboardMasked.png

COLOR

ColorMoodboardMasked.png

LAYOUT

LayoutMoodboardMasked.png

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.

ColorExplorationBLue_4x.png

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. 

ColorExplorationGreen_4x.png
ColorExplorationCopper_4x.png

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.

card1@2x.png

Montserrat + Roboto

card4@2x.png

Monoton + Fira Sans

card2@2x.png

Monoton + Roboto

Group 5@2x.png

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.

Logo@2x.png

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.

Group 3_4x.png

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.  

Group 5_4x.png

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.

MACBOOKBATUQUE.png
Ipad.png
batuquemobile.png

Click to view each experience through InVision

Previous

Next

bottom of page