LVD

WIREWAX is the world's leading interactive online video and content management platform, their flagship SaaS product 'The Studio' was due an upgrade.

UX/UI Design

WEB APP DESIGN

VISUAL DESIGN

Role

Freelance Product Designer.

Set up

I worked alongside a UX Designer and UI Designer, in collaboration with the Product Manager, Founder and Creative Director.

Duration

One week (one-off consultation).

The tasks

The challenge

1. Audit and evaluate the current site to identify Healthspan's audience, their pain points and uncover disengagement areas across the site.

2. Identify and demonstrate quick wins and longer term improvements, across navigation, language used, integrating imagery and enhancing key landing pages.

Incorporate a number of new features and functions to help improve the product and attract new subscribers, while also updating the brand aesthetic.

Results

A comprehensive guide of recommendations that were integrated into a roadmap.

Implementing a new dark theme, modernised The Studio and overall branding.

After applying changes, Healthspan experienced a 15% rise in converting casual browsers into repeat customers.

The new look and features helped to attract new users and increased subscriptions by 25% following relaunch.

Not everything went to plan…

The implementation of advanced analytics features initially faced challenges due to user adaptation issues. Despite this, user feedback and continuous iterations helped us to pivot and adapt.

The challenge

Incorporate a number of new features and functions to help improve the product and attract new subscribers, while also updating the brand aesthetic.

Results

Implementing a new dark theme, modernised The Studio and overall branding.

The new look and features helped to attract new users and increased subscriptions by 25% following relaunch.

Not everything went to plan…

The implementation of advanced analytics features initially faced challenges due to user adaptation issues. Despite this, user feedback and continuous iterations helped us to pivot and adapt.

Set up

I worked alongside a UX Designer and UI Designer, in collaboration with the Product Manager, Founder and Creative Director.

Principles

To start with, I held a quick brainstorming workshop with stakeholders to pull together the new studio’s positioning and a set of principles.

These principles would not only help steer decisions but also maintain focus and consistency throughout the project.

Interviews

I conducted user interviews with 10 participants to gather insights into how typical users might interact with digital asset management platforms, specifically focusing in on pain points and workflow.

From these interviews I was able to gather key insights and identify opportunities.

User types…

There are lot's of different types of users that use WIREWAX, however, there are two types that cover the majority of usage and overlap with other variants. These personas helped keep design ideas on track and avoided feature creep from trying to please everyone.

… and their journeys

First time user

Utilising the key principles of simplicity, accessibility and clarity, the first time user experiences a curated journey the first time they use the studio. This is to avoid any overwhelm and help them maximise their experience.

Media asset handler

To help the media asset handler use the studio efficiently a 'surf & immerse' I took a approach, to allow them to access everything they need at a basic level and immerse themselves into the details e.g. analysis, if required.

Wireframes

Wireframes are often seen as a waste of time, however, for this project they were a necessary tool to get the new features and functionality clear with the rest of the team, without being distracted by colours and imagery.

Welcome to the dark age

Previous iterations of The Studio UI had difficulty drawing users' attention to key information.

I created a sleek, modern dark UI that not only looked great, but also addresses these previous issues with past iterations.

Here are a few aspects from the rebrand.

Colour palette

Primary

Red highlight

Dark base

Dark elevation

Light

Secondary / highlights

Teracotta

Yellow

Blue

Green

Shades

Shadow

Storm

Ash

Cloud

Behaviour

Navigation

Card

Video player

Transition experimentation

A rebrand meant that I had free reign with transitions, which I had a lot of fun testing out to see what could work best.

Foundation and form

Through the tried and tested process of elimination and iteration, the new Studio designs morphed and took shape from the rudimentary wireframes, to hi-fidelity concepts that were ready to be built.