UI/UX case study for Kids Content

Lorena Torres

4 min readSep 27, 2018

Brief:

Create new premium usable and funny web for kids with exclusively content, tv series and games from Nickelodeon characters.

My Role:

Ux Designer and visual designer.

I was responsible for creating the skin and the adaptive design of the whole web trying to use existing components but without trying to bias the creativity to create some new ones.
Identify and document new components to amplify our editor tool.
Create a new collection and skin in our design system.
Create all the branding.
Work with a developers team (front and back) to carry out this project.

Frame work

Before thinking a solution or propose any design, I had to learn about the behaviour of the kids environment.

First of all as I made invest about this new kind of user, I read a lot articles to understand their behaviour and their digital content needs. Here are some of them really interesting to take a look:

Know their needs to understand their behaviours

Once the study about the user and what is around is done, we focus on the content that we had available (we had poor content) then, me and my team proposed rapid wireframes (MVP). And, once validated by the PO and the development team, we started with the project.

We proceeded making the sitemap and Userflow.

The challenge

We had a challenge with this project because it was the first time we worked with this user.

While we were creating this new project, the other part of our team were adapting and changing all the breakpoints, so we had to re-adjust the design that was already done, it was a challenge because we didn’t have so much time to adapt the hole site.

The initial brief asked us that we had only 100 content between chapters and games, so we based our design in this characteristics, but then the client asked us for more content, so we had to adapt the design we had already aproved and make quicly decitions to change the design or try to adapt what we already had to the new content to not affect the actual progress of the design.

in the first mobile propose we defined buttons in the bottom so that it would be easier for the child to get to the content in a quick way but with the brand guidelines (a fixed footer with buttons) we had to adapt them in header.

We propose to do friendly interactions like sounds, cool hovers. But because of timing and deadline we couldnd implement in this first Version

It was necessary to dispense with the initial design proposed to reach the player because it complicated and delayed the layout. A new simplified version was proposed that also lost in usability, postponing all interactions for a V2

Como se llevó a cabo el proyecto?

We had daily meetings with all the team (Developers, QA, PO, Conten, UX/UI) to see all the progress of the project, solve doubts, and see all the problems and fixed early.

We worked Agile, with sprints.

We used Jira, invision and confluence to document and interact with all the parts of the team.

Sitemap and userflow were modified and the design was adjusted in a day instead of changing the scope of the project

Fixes were requested for the fixed header of Movistar that initially were not included in the guidelines.

Puntos a destacar

The daily meetings have been very positive in the face of communication between all the teams: the doubts were solved with greater speed. There has been more empathy between the teams, more has been learned from the departments. The communication between the teams has been more personal.

The more you know your team, the more you get involved in the project.

Taking note for the next project:

As a team we should include a validation of the interactive prototype Before starting to develop (Design and Functionality) with PO, Direction, Operations.
Include a demo at the end of each sprint
increase the estimation tasks by 20% more when we work with new components.