Emily Veras | Teli Streaming Application

DURATION

2 weeks

TEAM

Product Designer

KEY SKILLS + DELIVERABLES

Competitive Analysis, Lo + Hi- Def Wireframes, Interactive Prototypes, Design Research, Visual Design, Content Strategy, Prototyping, Front-End Coding

Tools

Figma

My role

Lead
‍UI / UX Designer

As the product designer, I led the project from research and wireframes to interactive prototypes and final design.

RESEARCH + DESIGN PROCESS

THE
PROBLEM

Our client's customer base online and at retail was growing - therefore, so was the need for improving the user experience.

Heuristic research led us to conduct a full visual and content site audit, which showed us various areas that needed improvement.

THE
GOAL

The goal was to increase our clients' brand awareness, grow their eCommerce business, and drive retail traffic.

personas

RESEARCH +
COMPETITIVE
ANALYSIS

There are two main bucket categories for the targeted age groups.

Research shows in terms of usability, you should distinguish between young (3–5), mid-range (6–8), and older (9–12) children. Since this app is intended for 6-14 age range, we will use the mid-range and older range.

I used a variety of resources and articles to gather more information on these two ranges of groups which I then created personas for as shown above.

Asynchronously, I also began researching and analyzing a multitude of kids streaming apps available on both iOS and Android, mixed age ranges similar to the 6-14 age range Teli is targeting.

There were also two bucket categories of streaming apps;
‍
‍Original Content Streaming Apps
‍Dedicated streaming mainly established and well known entertainment companies i.e. Nickelodeon, Disney etc.

Multi-Content Streaming Apps
Mix of original and other shows not directly related to the streaming app itself i.e Youtube
Kids, Netflix Kids

The audit helped us determine what features needed to be added or replaced to be at parity with their competitors and capture market space.

COMPETITIVE ANALYSIS

I then analyzed the visuals of popular kids streaming apps. I created a chart analyzing the logo and overall styling of the top apps to look for an opportunity to be disruptive.

The results showed an open opportunity where designing “simple and colorful” logo could be disruptive.

Example of competitor screenshots

CATEGORY PAGE

I also began analyzing the competitor's visuals, content, and flows.In the following few pages, you will see a couple of breakdowns of essential elements within the competitor's applications and a table breakdown.

Example of competitor analysis

PRODUCT PAGE

I analyzed the contents and features for the selected applications to make sure that “Teli” would be at or beyond parity with their current competitors.

There are a number of white space opportunities including live streaming, education based categories, parental blocking and content appropriate selections.

Other opportunities such as games, and live streaming are also disruptive.

INFORMATION
ARCHITECTURE

I then began to create the Information Architecture, which is where I specified the main pages, modules, content, flows, and actions.I had two main flows, the main flow and onboarding flow.

There are a number of white space opportunities including live streaming, education based categories, parental blocking and content appropriate selections.

Other opportunities such as games, and live streaming are also disruptive.

The main flow breaks down various categories including main pages, modules, actions, and flows.

‍Based on the received brief I adjusted the architecture to only include the content called out in the scope - TV & Movies.

Main IA

ONBOARDING FLOW

The onboarding flow is essential for any new user as it walks them through the parental control guides, helps them add and set profiles and also select content categories.

Main Flow + Onboarding Flow

After conducting the research and completing some discovery analysis, I developed the design at high-def using the data analyzed including user and competitor.
‍
I chose to go the high-def wireframe route based on several variables, including;‍

Scope
Timing
Architecture

Teli's main target ages vary which also means the design between the older and younger audience will vary.

A younger audience might prefer something colorful, and animated vs a more modern look and feel.

I wanted to have a foundational base visually that can be customized based on the users age range.

HIGH-LEVEL WALKTHROUGH

New user installs app (Adult)

New user selects “Create Account”

New User enters their name

User selects “Next”
‍

User enters age

User selects "Next"

(Parent Age Gate) User selects correct meaning
‍
User selects “Next”
‍

User selects profile avatar

User selects "Next"

User enters profile name + age
‍
User selects “Next”
‍

User recieves suggested content
‍
User selects "Next"

Users account creation was succesfull.

‍User selects “Start Watching”
‍

User reaches main feed screen

RESULTS

Teli incorporates the needs of both parent and child by making sure the content is both age appropriate + interactive.

In the future I would conduct A/B testing and conduct user interviews.
I would also incorporate the white space opportunities i.e live streaming, games, and parental blocked content parameters.