Le briefing
OSN is very famous in the Middle East for their OSN Play Product that allows their customers to browse and watch VOD (video on demand). This time around we jumped into a boat to take us to a kids version of their product.
That’s been said, our main brief was to design a Bilingual Native App for Kids in the Middle East. This would be app Tablet and Mobile | iOS and Android.
Process
The OSN Kids App was planned to be delivered as a Minimum Viable Product, so the client could then use our Prototype to test with the 3 types of users in Arabic.
My Role
I joined the team during the Concept Phase. Many decisions were made throughout the MVP. I worked closely with the Visual Designers, Development Team, Business Analysts in order to find design solutions and maintain the consistency throughout the Process of the Project.
Things I’ve done: Wireframes, Research (Material Design and other materials to apply to Right to Left Design, cover edge cases, co-leaded this UX project.
Designing for kids is already a challenge itself. But let’s talk about the TRUE CHALLENGES here.
The Challenges
Designing for kids is already a challenge itself. But let’s talk about the true challenge here. There are always many sub-challenges. With no further ado, let’s name these design problems:
Relearn usability good practices!
Our first group of users was Young Kids (2-5 years old). And they don’t read. And they do not have the same mindmap as adults.
Parents
The app is restricted to OSN clients, they can only register or On Board if they already have an OSN account. And these people have to be Adults (also known as Parents).
PRE-Teen InteractioN
Our second group was Teenagers (6-12 years old). They read, therefore they should have a Search Field and other / different interaction from the first group.
RIght-to-left
In the Middle East, the writing is from Left-to-Right and design should follow that rule (in the Arabic version).
Concept
Young Kids
(2-5 years old)
Pre-Teens
(6-12 years old)
Parents
(Adults)
For the Hompage, user should be given context and sense of familiarity. Housing all the TV Show characters in one interface, giving them context and sense of familiarity. Second Leve (aka Page Detail), a room with the character poster. plus video. And an interface with no letters.
A long background a city look and feel. And rows adjustable accordingly to elements in the city.
Straightforward look as a native mobile app. On-boarding has a different approach, as in a narrative, it a threshold to lead the user into a kid’s app.
Detailed Design
UX + UI
As a UX Designer, I worked closely (literally side by side) with the Visual Designers, which was a very important decision for a project like this one: where ALL the visual elements would affect the UX.
When UX decisions meet UI/Visual Decisions
YOUNG KIDS UI
Le Windows &
Other Edge Cases
As above, in cases when a tile is not available, we close that window. In case of both tiles in the row are unavailable, remove the row. EXCEPT the top of the house, then we have 2 closed windows.
The main reason behind this edge case is because the house has a vertical structure and if you remove it at the top and/or bottom, it would break the Visual Structure.
So solve edge cases, but don’t break the VISUAL STRUCTURE
Locking Screen Feature
One of the features to be raised here would be the Locking Screen, so PARENTS would be able to lock the screen and the Young Kids would be watching a serie in autoplay, without being able to touch ok tap anything by accident.
As a mechanism to effectively insert this button, it had to be a way that kids wouldn’t tap by accident and lock or unlock.
That’s been said, a way to be done was by encouraging the user (the parent, in that case) to PRESS AND HOLD for 3s.
In that sense, all the interactions and the decisions made around this app were around concerning who would be the user and using.
RIGHT TO LEFT
As placeholder and wireframes we flipped the assets as they would override in Arabic. Most of digs into the Right-to-Left were based on the Material Design - Bidirectionally and native Arabic websites, such as real state website.
Prototyping for Test
The prototypes were built to be tested with: Parents, Young Kids, Teens. And interactions between one handing to another. From that journey, we created User Stories to be covered in the test.
You can find the Prototype in this link for iPad: OSN Kids Prototypes