FG USA

Bringing the party online

Role

UX/Art Director / Developer / Intern supervisor

FG USA is the american counterpart of FG DJ France, which was historically the first house radio broadcast in Paris, France. As innovative broadcasters, and efficient party planners, they have also launched international DJs like David Guetta, and Martin Solveig. They needed a redesign of their CMS-designed blog in order to reach out to the US market, and promote their web-based radio.

We reorganized the content, amplified the experience around party planning, and improved it with social media strategies. After researching, wireframing, designing, and prototyping, we designed a live, vivid, social party website, and a live radio player, one of the first using the HTML 5 audio API.

Highlights

  • Sector / Type

    Entertainment / Website, iOS & Android apps / Redesign

  • UX Focus

    Decision paralysis, third party validation, Fear Of Missing Out

  • 1st radio to brodcast HTML5 stream

    still in use on the French website

  • 10k Twitter followers

    in only 3 months

  • National

    New York City, Miami, Los Angeles, Washington DC

  • International DJs

    Bob Sinclar, David Guetta, Avicii, Van Buuren

Research

Competitive analysis

CMS Design and Flash-based radios

In 2011, 80% of DJ websites are coded in Flash. 40% use a fixed design on only one page. All radio brodcasters are using a CMS, but due to CMS limitations, they usually look alike. 83% of them are displaying News, dates of the upcoming events/shows, and live radio. However, all only offer a Flash-based live radio. 4 only display artist biography. 7 don't share photos or videos about the past events, or media related to an artist. If Facebook, and Twitter are used by all of them, Instagram is the third preferred social platform, followed by Youtube (40%), Soundcloud (30%), Google+ and Spotify (both 20%).

Percentages
  1. 30 No Media
  2. 40 Fixed design
  3. 100 No HTML5 radio
  4. 40 Artist bio
  5. 28 Alt social
Highlights of the market analysis regarding DJ websites and radio brodcast competitors, such as: Carl Cox, David Guetta, Laidback Luke, Martin Solveig, Joachim Garraud, Sirius XM, Clear Channel Radio, Fun Radio, NRJ Radio, and Goom.

Personae

Shane Marshall, 24

Apparel Worker
Beginner

Has a pay-the-bill occupation, that requires to stay on his feet all day long, helping customers in the store. He likes to take the pressure off go by hanging out with his coworkers.

  1. Tasks

    Browses multiples social sites to find a party to attend to during the weekend.

  2. Wants

    A platform that lists all the good parties in his area, and being able to book easily.

  3. Asks

    Dude, where is the party I saw on this flyer?

Lamar J. Lee, 27

DJ
Intermediate

Just started a few gigs as a debut DJ. He is eagerly looking to expand his network to make a name for himself in the DJ industry.

  1. Tasks

    Browses the web looking for new sets, new sounds, and follows DJs on Soundcloud. Also listens to some online radio.

  2. Wants

    A website to find all the information about the DJ he is following, including sets and where they are going to perform next.

  3. Asks

    What is the address of this DJ website?

Janet Wood, 25

Community manager
Advanced

Spends her days reviewing and writing about brands on social media. Single, she usually hangs out with her BFFs during the weekend.

  1. Tasks

    Always looking for the next party to go, taking selfies, and sharing it with the world.

  2. Wants

    A website that displays next events, previews of the sets, and pictures of the last party.

  3. Asks

    Where are the pictures of us that this photograph shot at the party?

User flows

Moodboard

Art Direction

Fresh Colors

As a 2003 study suggested, a drink feels more refreshing inside a blue glass. Starting from this, and according to the client wishes to appeal to a young adult crowd, we advocated for fresh colors. Thus, an electric cyan, complemented by a bright and vivid yellow, are accenting and contrasting shades of blue, dark blue, white smoke and metal black.

Color pyramid
FG USA Color scheme

Airport numbers

FG markets their events as dancefloor experiences across the globe. To support this view and stress on the hype of the events, we suggested using split flap display numbers. It also acts as a reminder of the journey, and of the party captain, as FG shares responsible ethic about not driving drunk.

This is your captain speaking
Split Flap style numbers used for the dates of the events

Flyer style

FG USA design is inspired by the compelling art of party flyers: high contrast, flashy colors, grunge background, dynamic shapes, glassy borders, and patterned separators. The cut-edge label shape is a reminder of the silk strip on invitation cards, and acts as a call to action through the entire website.

Flyer, alive in a browser
Details of the website slider

Font pairing

In order to emphasize on the limited time of the events, we used Bebas, condensed sans serif created in 2004 by Ryoichi Tsunekawa, for the headings. Body text is in PT Sans Regular and Bold, a traditional conservative sans serif, characterized by its enhanced legibility. Created in 2009 by ParaType, PT Sans is broadly used in direction and guide signs, schemes, screens of information kiosks and other objects of urban visual communications.

Specimens
Specimens of Bebas and PT Sans fonts

At the cutting-edge of technology

FG USA wanted to be able to broadcast their radios and resident DJs on mobile, without having to deal with approval of app platforms. We strategically advised to take advantage of the brand new HTML 5 Audio API, which was already implemented by major browsers, but not broadly used yet. Chris Drayton integrally coded one of the very 1st live broadcast HTML 5 radio, on par with an XML Parser to retrieve artists information from French servers. In 2016, the very same script is used across all FG websites in France.

HTML 5 Radio Live brodcast apps
Radio FG USA tablet and smartphone app

Renderings