The Violin Channel Livestream
Elevating UI for the future of most important feature of the Classical Music News Platform, from research to shipping.
Role
Lead UX/UI Designer
Client
Geoffrey Davies
-9%
bounce rates on homepage (from 52%)
The Problem

The classical music news platform wanted to improve the Live-Stream Experience in an effort to gain brand trust, increase user-base and industry partnerships. I redesigned the pages for responsive web and built a stronger brand hierarchy and UI systems within the product, and oversaw the shipping to development.

Mockups of the Full Live Stream Experience Design
Research

I conducted research by interviewing the audiences affected by our goal metrics: users and client partners.

Users
Classical musicians and fans
Client Partners
Usually other classical institutions
Pain Points
Goals & Limitations
Design

My design process utilizes many different techniques, from developing systems to breaking down the project into sections and iterating on those pieces to build up to a full experience. Creating a constant feedback loop on deliverables is essential to iterating fast and solving user problems.

Touch Points
The elements of the experience in which users interact and consequently need redesigning.

Adjusting Colors

The original color palette was far too bright, by softening these to more subtle reds and yellows we could maintain the brand without burning users eyes.

As far as brand hierarchy goes, with The Violin Channel using a Red/White for articles and most of it’s content, to create some separation and communicate a change in space within the experience, we continued to use the Yellow/Black that had been commonplace for many years prior. While the Red/White contrast was be improved, the already high contrast of the Yellow/Black could afford a lower ratio.

Live Stream Cards

Shape
Here's why I decided to use a unique shape to the link blocks: selective round corners.
Typography
My reasoning behind one of the biggest changes to the UI
Explorations in modernizing the Live Stream Cards
Sizes
I designed for cards for multiple variations dictated by their placement within the experience
Live Stream Status
Variations dictated by placement within experience
Final Live Stream Card Designs & their states
*Hover to see state change
Hovers

Page Layouts

Live Streams Page
Live Streams List Page
Impact

Though recent, The Violin Channel is already seeing reduced bounce rates from the site, reducing from 52% from 43%. The update is already improving brand trust: consistent users have been expressing pleasure and relief for the new changes.