UI/UX DESIGN - 5 MIN READ

Increased the signup rate
for AI generated subtitles

THE PROCESS
FINAL DESIGN
OVERVIEW

The Client

Subly is a SaaS video editing platform that uses artificial intelligence to make it easy for anyone to add subtitles and transcribe conversations in any language to their videos.

The Challenge

To further differentiate their platform, increase the sign-up rates on their website, and build brand awareness, my team has been asked for a full rebrand and redesign of Subly’s existing website.

My Role

Help with the research, ideation, prototyping and testing phases. I also designed the logo, Icons, and UI elements for the website. In addition, i prepared the deliverables handoff for the client.

THE TEAM

Chris Haines
Bijan Sherifi
Emi Bulai
Xavier King

TOOLS

Figma
Sketch
Adobe Illustrator
Adobe Photoshop

DELIVERABLE

Persona
Moodboards
Style Tiles
Logo
Wireframes
High Fidelity Screens (Mobile & Desktop)
Brand Design System

The Approach

We had four weeks to rebrand and redesign the existing website. Our team decided to split the timeframe into 4 sprints and adopt the double diamond method.

DISCOVER

COMPETITIVE ANALYSIS

Market research

We conducted an in-depth competitive analysis to see what the competitors has to offer and if there are any opportunities to improve upon the look and experience.

Offers Multiple Language Transcription

91% Accuracy

Offers 10 minutes on free plan

Minimal design, simple and reserved

Focused on business as "Best Solution for Enterprises"

Has multiple offering & price plans

Modern design with sectioned content, minimal colours

Offers editing of video and audio clips

Targeted towards creators/podcasters

Has a USP with collaboration feature

Has a fun and relaxed brand/style.

USER INTERVIEWS

Survey

With this survey we wanted to identify what users would consider to be the main selling point for this type of platform. ( 52 Responses )

ANALYSIS OF THE PREVIOUS SITE

What service does this website provide?

We conducted 7 in person interviews with potential users for 30 minutes. We asked them about the previous website and what service they think it provides.

The users were confused by the main headline, as they felt it wasn't clear about what the website was offering.

The automatically scrolling carousel was distracting the users and didn't allow them enough time to absorb what was there.

The footer was too big and felt cramped. It also took up 1/3 of the screen space.

One thing that users did like was the use of the word "FREE" for the sign up CTA.

DEFINE

SORTING CARDS WITH USERS

Users know best

Following on from the previous site analysis, we broke down the main components of the website into cards and asked people to arrange the components in order of importance.

DEFINING THE AUDIENCE

Persona

The client already had a strong idea of the type of audience they wanted to attract with the rebrand. They gave us descriptions like “content creator”, “millennial” and “young professional”, which we combined with our market research findings to create the persona.

DEVELOP & TEST

THE BRAND VOICE

Mood-boards

To rebrand Subly we first ran a workshop with our client,  brainstormed adjectives to represent the future of the Subly brand. We then created moodboards which reflected these adjectives: Bold, Vibrant, Retro and Exciting.

INITIAL SCREEN MOCKUPS

Second survey

We created 4 different screen mockups based on the mood boards, and then tested these in a survey of 86 responses to see which one appeals more to the user.

Survey Key Insights

Out of 86 respondents, 37% preferred the 4th screen design mockup. The common positive feedback was:

“It clearly shows what service you are going to receive and the price you’re going to pay”

“The content is easy to read and it’s well organised. I love the colour palette as it’s fresh!”

“It follows a theme consistently, has nice graphics and conveys the message about the product clearly”

Logo

Re-thinking the Logo

We were also given the option of rebranding the logo as well as the overall company design. We wanted to explore the theme of sounds and the S from the brand name, and incorporate into a logo design. Below are the initial concept ideas we came up with.

SUBLY

FINAL DESIGN

Logo

From the testing and feedback, we identified that the speechmark logo was the favourite and users appreciated the visual reference to sound. The client liked it as well, but they felt it was a bit too angular, so we iterated on it and settled on the below finalised version.

Below is a visual comparison of the old Subly logo with our new refined Logo where we have also addressed the issues like accessibility and contrast issues.

SCREENS

Responsive Website

Old vs New

FINAL TESTS

11 Interviews

We conducted a final round of user testing of our high fidelity designs to find out if we had effectively addressed the issues raised with the previous website design.

Key Findings

82% of our users found the design clear & interesting and they loved the colour scheme.

We also found that 73% of the users found the Iconography caught their attention and helped them engage with the Key Selling Points of the product.

All of the users we interviewed described the product being marketed towards a young, millennial demographic.

NEXT PROJECT

HMI DESIGN - CLUSTER CONCEPT

Volvo V60 - A better use of the digital screen

READ THE CASE STUDY