KLIC Interactive

Client: KLiC
Industry: Gaming
Role: UI / UX Designer
Services: Logo Update, Wireframes, & Multi-device Designs

DISCOVERY

Problem:

The client’s concept was innovative and complex and unlike anything currently on the market. The challenge was to craft a tool to watch and edit multiple live-streaming videos making it user-friendly for non-professional broadcast editors.

Goals:

Create a user experience on par with the leading live streaming gaming services—the added ability to edit live gamers and sporting events and share clips on a user’s channel.

RESEARCH

Live Streaming

I signed up for the top five live streaming services and began using each application. Testing what they could and couldn’t do. Noting details I specifically liked and disliked about each user experience. 

Broadcast Editors

Owning one editor, I went through the app to refresh my memory of its use. For two of the top expensive apps, I watch tutorial videos on how the pros use them to understand better how an editor performs specific tasks. My client, who is an ESPN broadcast editor, supplied me with plenty of screenshots of his process.

Setting the Mood:

With the Brand’s font set at Montserrat ExtraBold, I used Montserrat Reg for the body copy pairing it nicely with Roboto Slab for callouts and quotes.
I complimented the brand teal with a rich magenta and bright yellow, all set on a dark background. All colors were used minimally to not compete with the rows of videos a user might be experiencing.

Desktop:

The Desktop layout required working on everything from a gaming monitor to a smart TV. While the addition of TVs created several technical obstacles, the design is responsive and adjusts to whatever size screen the user chooses.

Mobile:

For users on the go, the site had to work on phones and tablets. We went with a tiny toolbar but added a save-project functionality enabling users to edit and publish in the field or opening up their project later on a desktop to finish with the full suite of options. 

THE DESIGN PROCESS

Logo:

I elevated the client’s logo updating the font to Montserrat ExtraBold, removing the dot over the i, and changing its color to a more refined deeper teal. The K fit nicely into a perfect square, creating a nice icon for social media or a mobile app.

KLIC-01
KLIC-02

Setting the Mood:

With the Brand’s font set at Montserrat ExtraBold, I used Montserrat Reg for the body copy pairing it nicely with Roboto Slab for callouts and quotes.
I complimented the brand teal with a rich magenta and bright yellow, all set on a dark background. All colors were used minimally to not compete with the rows of videos a user might be experiencing.

Desktop:

The Desktop layout required working on everything from a gaming monitor to a smart TV. While the addition of TVs created several technical obstacles, the design is responsive and adjusts to whatever size screen the user chooses.

Mobile:

For users on the go, the site had to work on phones and tablets. We went with a tiny toolbar but added a save-project functionality enabling users to edit and publish in the field or opening up their project later on a desktop to finish with the full suite of options.

THE FINAL DESIGN

The project was a great success. The mockups, demos, and pitch deck were all used for the client to secure funding. He is now in development.