Published on | Prototyping: From UX to Front End — Medium Amparo Ubierna Cortes

Children app to improve creativity in early childhood

Nowadays, kids are surrounded by technology and use touch screen devices on a daily bases. Somehow it can be and look dangerous what the future brings to new generations (security, privacy, time consuming, losing social skills…). We would turn blind if we cannot see that these changes are happening and technology is in our daily life. It is in our hands to use it in a proper and useful way.

I see technology as being an extension of the human body — David Gronenberg

Final UX/UI IronHack Bootcamp Project

As the final project from UX/UI Design Ironhack Bootcamp, taking into consideration all that we have learnt in these weeks, we (Indra Gonzalez and I) decided to building an app for kids between 5 and 8 years old — target age range — that they can use to learn, improve their creativity and enjoy animate histories, where they can personalize characters and decide the direction of the history.

This app is intended to solve a specific problem regarding the use of screen time in kids, and be a tool to improve creativity in early age. At the same time, parents have got a full control of the privacy, monitoring the progress in reading&writing skills and the time the spend on it.

How?

UX Design — Design Thinking

Lean Survery UX / Customers Interview
Affinity Map
User Persona
User Journey
Site Map
Mind Mapping
Prototype / Lo Fi Wireframes
Testing / Mind Fi Wireframes
MVP / High Fi Wireframes

UI Design

Mood-board
Design guideline
Sketch
Adobe Illustrator
Adobe Photoshop
Flinto
Invision

Step 1 — Research

Applying the Design Thinking method, we started the project scoping the age that we would focus to built the project. So we collected documentation and research for all the information that we could find to see which it should be the right age to focus in our project. So we understood that the right age to focus should be kids between 5 and 8 years old because of their behaive in this stage and their interests.

Ones we knew our target group, it was time for the Lean Survery

In this face of the project, we know our customers and their needs. We ask them specific questions through an online Survey — Survey link → https://indralw.typeform.com/to/LfC6nm — and we prepare some interviews with teachers, parents and their kids in order to know them.

This survey is helping us to understand kids and parents behave and built something more precise to their needs. It is the basis of a successful project — Design Thinking — put the customers in the center and know them.

Affinity Diagram

Step 2— Ideation

With all these findings and insights in mind, we move deeper to learn more about our users by building personas, and a user journey.

Low Fi Wireframes

Making an early user testing with this low fi prototype, allowed us to further refine our idea and direction that we are going to follow. Taking into consideration all the feedbacks from teachers, parents and kids, we started detecting new pain points and things we need to improve. Afterwards, we started making the mood-board and hi-fi wire-framing for the final design.

Step 3: Design

After a exhaustive research of kids´ behave between 5–8 years old, download and trying different games and online books applications, we found out that there are a lot of educational tools, games, and books but nothing that combine all of it in ones. So there is place for this project and it can help our potencial customers, parents and kids, to develop the skills that they are looking for.

Moodboard / Design Guideline

We decided to design a kids friendly interface, with a lot of colors and animations, 3D characters in a 2D world (after interviewing our target group, kids between 5–8 years old, we found out that they think that 2D — flat cartoons are more for babies).

When selecting a typeface for a children’s text, look for a warm, friendly design with simple, generous letter shapes. The counters (the enclosed shapes within characters) should be rounded and open, not angular or rectangular. Avoid non-traditional letterforms. A good example of a typeface with these attributes is Sassoon Primary, designed specifically for children, which we chose for our project.

High Fi Wireframes

Demo

<a href="https://medium.com/media/65baf6a330f5938029a5deacb007241f/href">https://medium.com/media/65baf6a330f5938029a5deacb007241f/href</a>

Thanks to usability testing and feedback we found many improvements to make to our initial designs, and also plenty of additional features that could be developed in future iterations. Conducting early usability tests throughout the process gave us a final product that fitted seamlessly into the application This is only an MVP! There is a lot more to discover!

Our design proposal for Grem´s Adventures won the UX/UI Design Hackshow at Ironhack, Barcelona.

Thank you for reading the whole history and hopefully you enjoy the result 😉

Grem’s Adventures was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Grem’s Adventures

Cool stuff, every week

More Articles