Industry: Entertainment
Year: 2020
Role: UX, UI designer
the goal
The light switched on when I decided to design 2.0 version of “Mangiafiabe”, that tales were told by cassette tapes and little books and you were able to follow the story sliding the page when a bell rang.
The project aim is to design an app that tells story to kids, with no repetitions and some interactions. It would be a helpful instrument for parents, but kids could play it alone. It’s for preschooler kids.
MACRO FUNCTIONALITIES
- reading aloud tales;
- user can choose characters and backgrounds, so there is a huge possibility of tale variations;
- user can choose options during the narration
- images with little interactions to back up the tale. No video because listening should be more important than seein
SURVEYS
I gave a survey to some parents in order to know the habits of their kids with books, reading, digital devices… Here the aggregation of results.
COMPETITORS ANALYSIS (EXPERIENCE AND DESIGN)
In order to understand what already exists in the market, I studied the competitors’ behaviours, both experience and design. I collected most important results in a InVision board: competitor board
TECHNOLOGICAL ANALYSIS
I would like to design an application for a portable device, but with easy accessibility for kids. So I decided to design an tablet-first app
PERSONAS
Based upon my research and the previous survey I created some personas in order to represent the different user types that might use the tales app. Personas were designed by Uxpressia tools.
JOURNEY
Based upon the previous personas I designed, I visualized the journey maps that each user personas goes through in order to accomplish the goal: listen a tale. Journeys were designed by Uxpressia tools.
MOODBOARD
I collected suggestions in a moodboard to give the atmosphere and the style of the project. I designed it by InVision: moodboard
ENTITY MAP
Here I focused on tree navigation: global navigation, descendent navigation (sister pages, pages collection, modals) and punctual navigation. After that, I analyzed the flow for kid-alone-user and the flow for parents-user.
WIREFRAME, PALETTE AND MOCKUP
I approached with a hi-def wireframe in order to collect precise feedback from the client about each screen, its functionalities, its interactions, and its copy. Once approved, wireframes became mockup. I decided to proceed with mockups in sketch and every time I had to design a new component, I upgraded the style guide. So style guide grew little by little and it helped me to maintain visual coherence into the project.
CHARACTERS AND BACKGROUNDS
In this app, the client asked me to design both UX/UI of the application and the content. So I realize several characters and backgrounds based on the tales the client gave me.
