Home Redesign - Chris Wang

Last updated · 2018

Designed & Coded with Framer

OLD

NEW

Results

The data was collected during the following month after New Home was launched, meantime there’s another project  around Emails and Push Notifications, so that project most likely also contributed to the increase of DAU. While Sessions/Registered User and Session Length on Home had increase, but they were not significant enough to make major impact on the product . 

The important contributions New Home had for the iOS app was that we built an app that people loved more. And by combining recommender system and editorial curation we built a mechanism that’s delivering a more personalized home  experience that people are enjoying .

15%

increase

DAU

6%

increase

Sessions/ 
Registered User

14%

Session Length

increase

5x

increase

Playlist Favorites

From 3.5 to 4.5

iOS App Rating

Scale design to multi-device experience

In a project presentation I did early on during the Design Sprint for new home, I suggested three design problmes to solve for new home: Ontology, Wayfinding and Serving Content. And I put a lot of emphasis on ontology because I knew this would be the key for scaling the design acorss platforms even though the project started as iOS only. As I was finishing new home project, I started collecting the defined ontology(content) and interactions(carousels) into our design system.

Defined ontology and interactions in design system

A few months later I started working on new home for Android and FireTV, this was the time I realized the value of design system, it’s a way more scalable and efficient way to design.

Fire TV, Android and iOS new home that I worked on

What really made me happy about the new home project was the consistency I saw on two projects done by other designers on different platforms. Of course there were unique design challenges on each of those platforms, but the ontologies served as a shared vocabulary that help convey consistent meanings to people who use Vevo products across platforms. 

Apple TV and Web new home

Defined ontology

Playlist visual explorations

The goal of defining the ontology was to create a group of visual representations of the different types of content on Vevo and make them easy to recognize from both usability and branding perspective.

So I started with just laying out some simple geometric shapes.I actually got my inspiration from watching The Pixar Story when I saw that the characters in The Adventures of Andre and Wally B (Released in 1984, while Pixar was still under Lucas Film ) were designed using Mickey Mouse as a reference, which was designed with mostly geometric shapes. When I looked back on Graphic User Interfaces, suddenly I saw squares, rectangles, circles and triangles.

Why Ontology?

The psychology

Using geometric shapes as the foundation

Definging the Ontology

The idea was also based on Gestalt Psychology, specifically the Law of Similarity, which says objects that look similar are perceived as a group. 

Ontology draft

New Home

Vevo iOS App

Vevo Desktop Web

VIDEO

PLAYLIST

CURATOR

GENRE

On desktop the carousels provide a more familar(or intuitive) interaction, but the problem of lack of differentiation of content type is worse because’s more content per screen and there are two more content types, People and Genres. 

The four different content types should be more distinguishable, but the similar rectangle shape ties them together as a group, this can be explained by Gestalt Psychology

It’s not clear what type of content users are seeing as they scroll, is it video or playlist? There’s little visual difference to help users to tell them apart. There’s also no clear affordance how to interact with the content. Should users tap anywhere on the screen or do they have to tap on the play icon? Another usability issue is that it's not clear which direction the content scrolls, or whether it's scrollable at all.

Another problem is that this navigation pattern provides very limited ways to consume content. Music videos are relatively well structured content, they can be organized by Artist, Genre, Time and sometimes even album, but the old design only presents content as either video or playlist. 

Finally, with this design is that the chance of recommender system making an accurate recommendation is lower because there's only one item per screen. 

The problem

Old home experience

Project Goal

Increase DAU/MAU, make people use Vevo more often

Increase watch time people spend on music videos

Surface a deeper playlist catalog and Vevo original content to people

Design Goal

Make Home Dynamic and Personal

Define ontologies that are usable and recognizable

Create navigtaion patterns for efficient way finding 

Project Scope

1 Designer

1 iOS Dev

1 Backend Dev

2 PM

1 Data Platform Engineer

1 Content Editor

1 User Researcher

1 QA

3 Months

Jan 2017 - April 2017

A New Home for Vevo

Home Redesign

Home Redesign

Fan Expressions

And Bring Design Sprint To Vevo

Design System

Vevo Live

Artist Version

Design Tooling

Onboarding

Motion

🎸 Music Projects 🎹

Home Redesign

Chris Wang