UI Case Study: Boss Level

Luke Yin
6 min readApr 5, 2019

Introduction

This is a concept for a music festival that revolves around video games. The purpose of this project is to show how the website for such a festival might look if it were to exist in real life.

Domain Research

I started by researching other music festivals, especially those that feature video game music. In particular, I focused on the layout and aesthetics of each website.

Game Music Festival features video game music performed by an orchestra.
Contact has a reasonably detailed website and an intuitive layout, though it’s hindered greatly by its buggy info page that doesn’t scroll to the bottom.
Seasons has a website that looks clean but lacks information.

In addition to the above, I also looked at festivals and concerts such as Video Games Live, Coachella, FVDED In The Park, and PLAY. Insomniac’s PLAY Festival is the only direct competitor, though its website has very little content at the time of writing, due to the fact that 2019 is its inaugural year and no details have been announced.

User Persona

I created a user persona based on the domain research above, which showed that there is a gap in the market. The user needs to be interested in both video games and music in order to enjoy a festival about video game music, and the music must also be performed by a live cover band or a DJ rather than an orchestra.

Meet Kimberly, a game designer, streamer, and concert-goer from Vancouver who totally isn’t a Frag Doll.

Design Inception

The Why

From the start, the Why was quite clear: it was to create a music festival for gamers. This split into 2 different directions, which led to 2 slightly different Whys:

Modern: To create a music festival for gamers and to celebrate music from modern video games

Retro: To create a music festival for gamers and to celebrate nostalgia for retro games

Mood and the 4 Elements of the Visual Language

The different Whys led to differences in both mood and visual language. Although there are still similarities, a festival about music from modern games should look sleek, while a festival about music from retro games should look retro.

Mood Boards

The design inceptions led to 2 different mood boards:

The Modern mood board features modern imagery, with lots of sleek designs and sparkling energy.
The Retro mood board features imagery from retro-style games, with brighter colours and blockier graphics.

I decided to go with the Retro mood board because it appears to be something that really hasn’t been done before. The PLAY Festival mentioned earlier appears to have a more modern feel to it. Besides, the Retro mood board seems more welcoming and friendly, which our user, Kimberly, would appreciate.

Logo Design

From fairly early on, I decided to use a typography-based logo for the festival. This keeps it in line with most other music festivals and ensures that the name of the festival is immediately obvious to anyone who sees the logo.

I looked at various different options for the logo. I knew that I wanted a pixelated typeface, but did I want ArcadeClassic or Pixelar? Did I want to call it Music Mode or Press Start? Or perhaps Sound Test, as a reference to Sonic the Hedgehog? Perhaps Bass Level, since it’s a music festival?

In the end I decided on Boss Level. The festival doesn’t revolve around bass players, and calling it Boss Level ensures that people would immediately associate it with video games.

Style Tile

I decided to use ArcadeClassic for page titles and nav bars, since it’s a bold arcade-style typeface that’s easy enough to read for shorter pieces of text. For text that’s potentially longer or smaller, I chose Pixelar. For the longest pieces of text, I chose Rubik, since it’s often associated with video games.

For iconography, I decided to make 8-bit renditions of social media icons. This helps them fit in with the theme while still allowing them to be easily identifiable via shape and colour scheme.

I also drew the concert-goers by hand in Illustrator. These figures would help the website look less bland. To achieve the 8-bit style, I turned gridlines on and had everything snap to grid. Rectangles are what give the figures the 8-bit look and feel.

Merchandise

Like many other festivals, Boss Level needs to have merchandise available. I decided on items like t-shirts, mugs, etc. with the logo on a background of a colour found in the colour scheme above.

Campaign

These days, no music festival is complete without an ad campaign, so I made ads of varying (but standard) sizes for use on websites, social media, etc. Each ad has a black variant and a blue variant, which are meant to showcase the look and feel of the website.

This is an example of an ad on a website. Click the button to buy a pass.
This is an example of a Facebook ad. Due to how Facebook ads work, there is no need for a “buy passes” button in the image.

Wireframes

In order to figure out the website’s layout, I drew up some wireframes on paper:

This is the initial version of the desktop site. Note the single-page layout.

My initial design had a single-page layout, much like the one that Contact Festival uses (except it would not get cut off near the bottom). However, it soon became apparent that having separate pages would be much simpler, since there’s just so much information.

The final version of the Lineup page

It also became apparent that there was no need to separate the Lineup from the Artists page, since the same artists would be displayed anyway.

I created prototypes on InVision for both desktop and mobile to show how the website works.

Desktop:

Mobile:

Conclusion

Through this project, I learned to design a responsive website from beginning to end all by myself. I also honed my skills with Illustrator, since I created the dancing figures by hand.

Future Considerations

The next step of the project, were it to continue, would be to flesh out every page on the website. For example, the info page could have all its segments fleshed out so that visitors can find out all the details about the website. There could also be more things to do at the festival — some arcade machines or a gaming tournament could make things even more interesting, as well as attract a bigger audience. Finally, it would be great if this became a festival in real life…

Thank you for reading this UI case study for my proposed music festival, Boss Level!

--

--