Apple TV Mockup.png

Case study, UX/UI

HBO Max

KID (1).png

Redesigned the HBO Max Kids design system across all platforms, and helped establish a visual brand language and identity for it
 

Type

Graduate Project, Visual Design Strategy, Product Thinking

My Role

UX/Interaction Designer, Visual Designer

Tools

Figma

Time

6-Weeks (2021)

Privacy Setting and Onboarding

  • Using elements like colors and forms that aligned with the parents’ nostalgia to bring more viewers alongside the kids​​

  • Instill the sense of childhood in the interface and bring this sense to the parents when they are watching and interacting with HBO MAX Kids

TV-1.png
TV-2.png
TV.png

Final Solutions to Increase Sign up family plan

Home Screen

Focus on simplicity, use sharper colors and move away from dark themes and backgrounds to make the interactions enjoyable and memorable

Onboarding

Add more motion in the onboarding process to make the experience more fun, and make better parental controls and TV programming interface

TV-4.png
TV-1.png
TV-2.png
TV-3.png
TV.png
TV-5.png
TV.png
TV-1.png

Research to Further Investigate Problems & Opportunities

Currently, the app is highly rated, but it is underutilized by the general public compared to YouTube kids. To find out why this might be the case, I analyzed their mission statement and found out the current app design and services do not fully reflect their mission statement of including “young and diverse audiences”.


Also, based on the competitive analysis I noticed Google is a great example that has a brand Identity that applies to different products including Youtube kids, you can see this identity lay down in different contexts and still maintain the brand language. In HBO max kids we can’t see this. The lack of identity in this system is noticeable. You can not differentiate the kid’s design system from the general audience design system.


When further investigating, I found out from reviews that 80% of the users are willing to use YouTube kids instead of HBO Max kid, because it has privacy settings for different age groups.


These findings state that while the app is resourceful for users, it falls short of reaching its target audience.

Screen Shot 2021-04-20 at 4.25 1.png
Screen Shot 2021-04-20 at 4.26 1.png
Screen Shot 2021-04-20 at 4.26 2.png
Screen Shot 2021-04-17 at 11.01 1.png

Define MVP

For the MVP, I decided to Redesign the kid’s design system to leverage that on all different platforms and help HBO max kids to have and keep their visual language brand identity. To apply it to different platforms across connected devices mobile and web.

User Persona

Based on the insights from research, I synthesized and developed a user profile highlighting user needs and goals and created user stories to understand major scenarios.

Portfolio Presentation (1).png

Jimmy's Family

"Love to watch with our kids"

Goals:

Having the quality of time together when watching TV together.

Pain Points:

  • Parents are worried about privacy settings based on different age group

  • Parents want to feel nostalgic when watching kids' movies.

  • They don't feel connected

Problem Statement

Every streaming company has two versions of the design system, the general audience design system and the kid’s design system. How might we
help HBO MAX KID establish a visual brand language and identity?

Business Goals

Considering both our target user, Jimmy's family, and the business side of the app currently underutilized by the general public, I identified 3 goals:

  1. Amplify the brand’s visuals to increase the adult audience’s curiosity.

  2. Enhance ease of use with simplified content to bring more viewers alongside the kids.

  3. Increase user engagement with improved features.

Moodboard for New Visual Strategy

Keeping my first goal in mind, amplifying the brand’s visuals to increase the young audience’s curiosity. I deliberately chose colors and graphic elements that help create stronger stylistic choices as a way to amplify the brand’s visuals and interactivity.

Moodboard-Final.png
Moodboard3.png
Moodboard1 (1).png
Moodboard2.png
aaan.jpg

Final Moodboard

Style Guide

Style Guide.png
Style Guide-white.png

Final Design

Other Execution for Future App Development

To add business value to the company I thought healthy popcorn would be a good match while kids are watching TV.

Zip Bag Mockup 1.png
Group 256.png

Lesson Learned

  1. An effective way to build a design strategy by understanding the business objectives and user goals and translating these needs into meaningful design solutions.

  2. How to create a cohesive Design Language across multiple media types

  3. How to analyze and critique design work across multiple media types.