UI / UX for Kids/Tweens Streaming App
iOS/Android Application
2 weeks
Product Designer
Competitive Analysis, Lo + Hi- Def Wireframes, Interactive Prototypes, Design Research, Visual Design, Content Strategy, Prototyping, Front-End Coding
Figma
Lead
UI / UX Designer
As the product designer, I led the project from research and wireframes to interactive prototypes and final design.
THE
PROBLEM
Heuristic research led us to conduct a full visual and content site audit, which showed us various areas that needed improvement.
THE
GOAL
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
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.
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
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.
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;
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
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.