The Violin Channel Livestream
Elevating UI for the most important feature of the classical music news platform, from research to shipping.
Role
Lead UX/UI Designer
-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.
Research
I conducted research by interviewing the audiences affected by our goal metrics: users and client partners.
Users
Classical musicians and fans
UI was a glaring problem. Much of the current functions were robust (Set Reminders, Countdowns), though no one felt any enjoyment out of using it and wouldn't return.
Client Partners
Usually other classical institutions
Desired more traffic to the Livestreams, often sponsored by the clients. We noted that there wasn't a place to find livestreams on article pages — a bulk of the website.
Pain Points
Colors were too bright and clashing within the whole experience
No Hover States: unclear if elements are interactive
Unclear Live Stream status
Goals & Limitations
Maintain brand philosophy: Elevated, Intellectual, Fun
Create a clearer hierarchy of the LiveStream within The Violin Channel's brand
Clearly communicate the function of the Livestreams
Strategy
To account for varied user needs, I prioritized these two pieces of the experience:
Property Search
The most important part of the Customers experience needed to be simplified, more informative and enjoyable. This would also help accomplish the brokerage's goals of generating new leads.
Property Details
Creating a more intertwined experience for Customers by adding links to similar properties and the areas, improving SEO for the brokerage site.
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.
Live Stream Cards: Informs most of the aesthetics and layouts.
Livestream Page Layout
Livestreams List Page
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 red/white for articles and most of its content, we continued to use the yellow/black that had been commonplace for many years prior to create separation and communicate a change in space. While the red/white contrast was 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 for the link blocks: selective round corners.
Rounded top corners create a visceral impression of a theater, the main setting of the Live-Streams
Implementing this in the cards and other brand assets creates a "theater" space in the layouts
Differentiates the function from other links, such as articles with hard corners
Rounding right corners creates motion within the full experience, e.g. next page
Typography
My reasoning behind one of the biggest changes to the UI
Placing typography lower to allow space for the image
Typeface change to Avenir, the postmodern classic that better communicates brand philosophy
Changes in size created the hierarchy of information: Title > Countdown (Numbers > unit) > Date.
Explorations in modernizing the Live Stream Cards
Sizes
I designed cards for multiple variations dictated by their placement within the experience.
Homepage, other page links: The first touchpoint, chosen because of its median size. (Upcoming & Current)
Link to other LiveStreams, Tiles: Taller with top round corners (All States)
Condensed Thumbnails: Smaller, cut Date based on information hierarchy (All states)
Featured Stream: Shared anatomy of Featured Article with large headline, adjusted countdown for a more interesting layout. (Upcoming)
Live Stream Status
Variations dictated by placement within the experience.
Upcoming: The baseline, most common state — the first state designed, and it informed much of the entire experience
Currently Active: An opportunity to add a fun handwriting label to accentuate and catch users' attention
Past Streams: Indicating this stream is no longer live by replacing Set Reminder (obsolete) with a play button
Final Live Stream Card Designs & their states
Page Layouts
Live Streams Page
I began with the Livestream Page itself, keeping in mind the goal was to help create a visual space differentiated from the articles and to emulate a concert hall. For an easy win I adjusted the image to more black, with subtle imagery. Other fixes include the label at the top changed to the Livestream micro-brand, and functions surrounding the player such as "Set Reminder" moved to the top left to stay consistent with the buttons. I also implemented a more detailed form in the CMS for the content team to better outline the programs and ensure clarity for the reader.
Live Streams List Page
This page didn't need much in the way of card placement, yet the contrast between the background image and the buttons was too muddled, so I changed it to simply black. I also realized that a section for upcoming streams was redundant, as those should be the first ones on the page. The past streams section, though, is still very necessary as it's a permanent collection of content that helps advertise the quality of the partner organizations.
More Brand Development
The Violin Channel had numerous activations to keep audience members engaged.
Live Stream Assets
A full suite of promotional assets for each stream — save-the-dates, web tiles, headline posts, and social stories — all built on the softened palette and theater-inspired card system.
Giveaways
VC Artists
Impact
Though recent, The Violin Channel is already seeing reduced bounce rates from the site, dropping from 52% to 43%. The update is already improving brand trust: consistent users have been expressing pleasure and relief for the new changes.
