MusicBuilder Header

Client Presentation 

Live Website


  • Initial Research
  • Information Architecture
  • Content Development
  • Branding
  • Visual Design
  • User Interface Design (Large and Small Screen)
  • Development


MusicBuilder is a new and exciting startup that offers curated music playlists to their users. MusicBuilder is a music exploration and playlist creation application that caters to music lovers that want to discover new options based on their personality and likes, not reviews and friend recommendations.

Project Goal

Musicbuilder’s client is looking for a single “long-scroll” style landing webpage for large and small screens.

Design Considerations 

The client wanted to ensure that customers see them as modern, very knowledgeable with “in the know” access, hip and trendy but not fad-focused, knowledgeable, accessible, and relatable.

Visually, the project tone would go in two directions: cool colors for the color scheme and grunge for the design style.

Target Audience

The primary audience is young, socially-active and loves to discover new music to share with friends. They enjoy exploration and discovery and love to be the first in their peer group to be in-the-know about new music. Musicbuilder is looking to give them a service that tailors to their likes and lifestyle.

Final Target Audience: Men and Women  Ages 18-25


This company’s service comes into direct competition with some familiar music companies:




Mood board

The client requested that several mood boards were created to show the design considerations. Boards were based on color (color), main keywords (i.e: open, growth, modern), and design style (grunge).

Musicbuilder Moodboard

The final choice mood board presented to the client was the one pictured above. I wanted to represent the grunge style choice in the theme of darkness and light. I choose to have a dark, barely lit theme to be the general idea of the grunge style while have the light source come from bright, neon light based spots.

The main color in the theme and representing the idea is the blue. I wanted a cool that was both welcoming (open) to the users of the website as well as jarring with how bight it was to light the dark theme visually. It was used as the bright neon to give the cool, modern look to the site.

I also included spots of common grunge music visuals as a reminder of where the design direction was heading.


Colors and Type

Using cool colors as the palette to design the site, I narrowed down the variations down to a monochromatic version for the product. With the dark visuals for the theme, I picked mainly darker blue color variations to highlight the neon blue color as the light source.

Musicbuilder Color Palette
Final Color Palette


The type was based on the Evil Dead image above (besides being one of my favorite horror movies) as it was a large, bold, font with straight lines and well-rounded curves. That would make it easy to read while blending in with the grunge feeling of the design.

Type Choices
For the type, Hind Bold is used for the headline and Roboto Regular for the body. Hind Bold gives the headline the large, bold look with the rounded curves while Roboto Regular give the straight lines that are easy to read and fit in with the theme.

Sitemap and Wireframes

Being a single long-scroll style landing page website, organization of the site is straight forward and simple. The client requested the following information:

  • Landing (Home) page
  • Mission Page
  • How It Works Page
  • Try It/ Testimonial Page
  • Get Started Page

Final Sitemap delivers the breakdown of the webpage.

MusicBuilder sitemap and wireframes
MusicBuilder Sitemap and wireframes



Website Wireframe
Wireframe of a one-page scroll site with the color representing main images.

Final Design 


MusicBuilder Desktop Version
MusicBuilder Desktop Version


Home Screen Mobile
Home Screen Mobile