All workCase study 10 / 10

YooHoo

A streaming platform for power-packed, action-filled shows and films, with a brand built on the sound of excitement.

My role
Brand, mobile & web app design
Year
Add the year
Platforms
Mobile-first website + web app
Status
Designed up to beta
Outcome
Add your headline result
Reading
TL;DR

Think happy, be happy.

The briefBecome the #1 place for power-packed, action-filled, emotion-inducing TV shows and film series, then the biggest streaming platform globally.
What I didBuilt the YooHoo brand from a mind map of feelings, then designed a mobile-first website and the web app.
Where it got toThe next step was beta development and rounds of testing. I'd moved on by then, so there are no launch numbers yet.
Brief & my role

A name that sounds like excitement.

YooHoo began with one goal: to be the #1 home for power-packed, action-filled, emotion-inducing TV shows and film series. “YooHoo!” is the sound of excitement, happiness and hope, and the sound of families having the best time ever.

The job was to make a brand that sounds and looks like that, then carry it into a product people could get into from any phone.

The journey, illustrated

  1. 01Another evening of scrolling, and nothing worth watching.

  2. 02YooHoo opens on her phone: “Enjoy clean content. All day, everyday.”

  3. 03One tap on Join now. The site was designed for phones first, so getting in is easy.

  4. 04Trending, Popular on YooHoo, Comedy: a row for every mood.

  5. 05Live shows, cracks and memes: the boredom’s gone.

  6. 06And the best nights are shared: “the sound of families having the best time ever.”

Illustrative, drawn for this case study from the brand story and screens described here.

What I owned
  • Brand discovery: the mind map of feelings the brand had to carry
  • Identity: logo, tagline, colour, type and photography treatment
  • Brand in use: app icons and merchandise mockups
  • Mobile-first website, from landing page to sign-up
  • Web app: Home, Discover and the browsing experience
How the work ran
  1. 01 · DiscoverBrand feelings
    Mind map
  2. 02 · BrandIdentity
    LogoColourType
  3. 03 · ApplyIn use
    App iconMerch
  4. 04 · DesignWebsite & app
    Mobile firstWeb app
  5. 05 · NextBeta & testing
    After my time
Brand discovery

Four feelings, one name.

Before any logo, I mapped what “YooHoo” should make people feel. Four branches came out of it, each with the words that keep the brand honest.

3 Excitement
Passion
Warmth
Activity
3 Happiness
Joyful
Delight
Glad
2 Playfulness
Lively
Jolly
3 Friendship
Togetherness
Fellowship
Affection

Rebuilt from the original mind map.

BrandMind mapThe feelings behind the name, grouped into four themes.
BrandColour psychologyWhat yellow and orange say, and how they sit on photography.
AddAudience researchAny interviews, surveys or tests with viewers, and how many.
AddCompetitor reviewWhich streaming platforms you looked at, and what you took from them.
Insights

What shaped the brand.

01

YooHoo sells a feeling, not a catalogue.

The name is “the sound of excitement, happiness and hope”.

So webuilt the identity on the four feelings from the mind map.
02

Watching is better together.

Friendship is a whole branch of the map, and the story ends on families having the best time.

So wedrew the two o’s as two happy friends.
03

Getting in has to be easy for everyone.

The aim was ease of use and democratised entry points.

So wedesigned the website mobile first.
Key decisions

Warm, friendly and easy to get into.

1A logo that is two happy friendsEvidence · Insight 02
Options

A plain wordmark, or a mark that carries the brand’s meaning on its own.

Decision

The two o’s double as two smiling faces, “Happy Friends”, with the tagline “…think happy, be happy”.

Why

Friendship and happiness sit at the heart of the mind map, and the faces work alone as an app icon.

Trade-off

A playful mark sets a light tone, so the action and drama in the catalogue have to come through in the imagery.

2Yellow and orange, laid over photographyEvidence · Insight 01
Options

A neutral, content-first palette, or colour that does the emotional work.

Decision

Yellow for happiness, positivity and optimism; orange for creativity, adventure and enthusiasm, used as tints over photos.

Why

Orange adds a bit of fun to any picture used on the brand, so even stock imagery feels like YooHoo.

Trade-off

Strong tints need care so faces and posters still read.

3Mobile first, with Join now up frontEvidence · Insight 03
Options

Design the desktop site and shrink it, or start from the phone.

Decision

The website was designed mobile first: headline, one line of copy and a Join now button, then Popular below.

Why

To allow ease of use and democratise entry points.

Trade-off

The richer browsing layouts moved into the web app instead of the website.

Final design

Our logo is our flag.

It represents who YooHoo is and what it stands for: a symbol of identity, and of trust in the process.

Logo anatomy: the yellow and orange YooHoo wordmark with the tagline “…think happy, be happy”; the two o’s with dots above them highlighted as “Happy Friends”; notes on colour psychology and the meaning of the name
Yellow revolves around sunshine: happiness, positivity, optimism. Orange represents creativity, adventure, enthusiasm, success and balance.
YooHoo wordmark in black with the tagline “…think happy, be happy”
YooHoo wordmark in white on black with the tagline
Colour
  • Yellow#F6C101
  • Orange#F79E16
  • Black#000000
  • White#FFFFFF

The colour orange adds a bit of fun to any picture used on the brand.

App icon, standard colour: the two-friends mark in yellow and orange
Standard colour
App icon, monotone white: the mark in white on a black tile
Monotone white
App icon, monotone black: the mark in black
Monotone black
Type

Clarity and hierarchy come first in the brand’s communication. Neue Machina and DM Sans are the brand fonts.

Photography & merch
A group of friends laughing, split into four vertical bands tinted olive, coral, yellow and green
Black takeaway coffee cup with the yellow YooHoo wordmark
Silicone wristbands in white, orange and black with the YooHoo mark and wordmark
Website · mobile first

To allow ease of use and democratise entry points, the website was designed mobile first.

Landing page“Enjoy clean content. All day, everyday.” One line of copy and Join now.
PopularA taste of what’s on, straight under the fold.
HomeTrending movies, Popular on YooHoo and Comedy / TV shows, with a sidebar for Discover, YooHoo Live, Movies and Categories.
DiscoverRows such as Action / Adventures and Recently Added.
Mobile landing page: YooHoo logo, “Enjoy Clean Content. All day, everyday”, Join now button, and a Popular row below
The landing page on a tablet: “Enjoy Clean Content. All day, everyday.” over a photo of friends, with Join now and app store badges
Web app
Web app home: sidebar with Home, Discover, YooHoo Live, Movies and Categories; rows for Trending Movies, Popular on YooHoo and Comedy / TV Show
Web app Discover page: rows for Action / Adventures and Recently Added
Impact

Ready for beta.

Designed up to betaBrand, website and web app were designed; beta development and testing came next.
—Add a result: e.g. sign-ups at beta, if you know them
—Add a result: e.g. where YooHoo is today
How I’d measure success · proposed
  • Insight 03Landing to sign-upConversion rate: visitors who tap Join now and finish signing up, on mobile and desktop.
  • Insight 03Time to first playTime on task: from sign-up to the first show started.
  • Insight 01Coming back for moreRetention rate: viewers who watch again within a week.
  • Insight 02Watching togetherShare of sessions on shared screens, or shows shared with friends.
  • Insight 01Does it feel like YooHoo?Desirability test: do people pick “exciting”, “happy”, “playful”, “friendly” to describe it?
  • Insight 02Brand recallFive-second test: can people recall the name and the two-friends mark?
Reflection

A full-range stretch.

  • One of my most stimulating projects. This is by far one of the most interesting and mentally stimulating projects I’ve worked on.
  • Brand and product, end to end. It helped me develop my capacity as a full-range professional.
  • What came next. The next step was beta development and rounds of testing, but I’m no longer involved with this project.

Jump anywhere

Go to a section, a case study or a chapter