Past Project

BATUQUE

Next Project

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 USED

  • 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. 

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.

MACBOOKBATUQUE.png
Ipad.png
batuquemobile.png

Click to view each experience through InVision

Past Project

Top of Page

Next Project