ONE618

OVERVIEW

ONE618 is a multimedia entertainment company that specializes in the conception and production of events that include video, lighting, architecture, sound and special effects.  They have worked with big name clients such as John Legend, the NFL, Chi-Town Rising, and Kelly Clarkson. ONE618 asked us to create a responsive website that would easily allow their clients to learn about and request their services.

Project Objectives

To begin, we needed to drill down into who ONE618 is at their core – who they are and what they believe in. Luckily, ONE618 provided us with a plethora of documents explaining their vision, mission, and likes/dislikes.  My takeaways from this information were as follows:

• They want their website to mimic what they do – design and creative development of large live event “spectacle” projects.
• Their current color scheme is Black, White and Gray (62%) with some gold.
• Words to describe what they do: awe-inspiring, storytelling, excitement, collaboration, immersive, spectacle, innovative
• They want the website to be simple while making a bold, visual statement.

UX Deliverables

• Competitor research and analysis
• Design exploration
• Style tiles
• Wireframes
• Branding
• Style guide/UI kit

Research

Competitive Analysis

We did a visual competitive analysis – both in and out of scope.  We discovered that much of the competition also used muted colors such as black and gray. Competitors also put a large emphasis on photography, ensuring their photographs were professionally taken and edited.  From this, we recommended to the client that they should take the leap to try out a new color scheme but to include visually appealing photographs.

Visual Exploration

Style Tiles

Each team member developed 3 different style directions for the clients to pick from.

Style 1: My first style followed the clients requested color scheme of gold, black and gray.  I wanted to give the feel of luxury, high scale, and excitement.

Style 2:  My second style went really bold with the vibrant red color. I felt this color complimented the excitement that the photography conveyed.  With the side navigation bar, I gave them a different way to display their creation process.

Style 3:  Style 3 had more of a light feel, moving away from the competition.  It played off of the minimal feel they requested while focusing on the fun atmosphere that accompanies their events.

The client chose my second style tile as they wanted to give the bold red a try and liked the idea of a side navigation bar to display their process.  

Ideation

The next step was to create a wireframe of the website off of the sitemap that the client provided.  Their current website was only one page (see below) so I had to start from scratch.

Wireframes

High Fidelity Designs

From there, I began to create a fluid design that would translate well to mobile devices.  As I designed, I continued to keep the client’s mantra and vision in mind, really focusing on portraying a spectacle and minimal feel. I used color and motion in small, concentrated doses, to engage the viewer and to keep the site easy to navigate.

I worked closely with ONE618 to iterate designs to ensure our final output was fully informative and inspiring.  In the end, I made a website for them that highlighted their unmistakable style with the work at the forefront of the design and a seamless responsive interface that catered to all screens.

Final Design

BRANDING

ONE618’s company name comes from the golden ratio so using that as inspiration along with the “spectacle feel” they were looking for, I created a style guide, UI kit, and logo. I stuck with bold colors and strong typography to finish out the look.

Logo Exploration

Style Guide Examples

Lesson Learned

All work will be seen as final design

One thing I learned from using style tiles is how literal others see them.  My goal for the tiles was to give viewers an overall “feel” for how the website can look and not the actual website result.  What I found was the clients had more literal questions regarding the tiles such as “Is that where the navigation bar would be?" or "Is that how the words will be displayed on the homepage?”.  This process was very insightful and will definitely help me direct my style layout in the future.