<p>Published on <a href="https://blog.prototypr.io/grems-adventures-4e12c938586c?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Amparo Ubierna Cortes </p>
<p>Children app to improve creativity in early childhood</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eG2PmyZUQhuw0LFQ2yz9Ow.jpeg"></p>
<p>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.</p>
<blockquote><p>I see technology as being an extension of the human body — David Gronenberg</p></blockquote>
<h3>Final UX/UI IronHack Bootcamp Project</h3>
<p>As the final project from <a href="https://www.ironhack.com/en/courses/ux-ui-design-bootcamp-learn-ux-design">UX/UI Design Ironhack Bootcamp</a>, 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 — <a href="https://www.whoishostingthis.com/blog/2016/08/29/kid-friendly-website/">target age range</a> — 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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*esMT9ZwEaXQSWk7dZ-1y-A.jpeg"></p>
<p><strong>This app is intended to solve a specific problem regarding the use of screen time in kids,</strong> 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&amp;writing skills and the time the spend on it.</p>
<h3><strong>How?</strong></h3>
<p>UX Design — Design Thinking</p>
<ul>
<li>Lean Survery UX / Customers Interview</li>
<li>Affinity Map</li>
<li>User Persona</li>
<li>User Journey</li>
<li>Site Map</li>
<li>Mind Mapping</li>
<li>Prototype / Lo Fi Wireframes</li>
<li>Testing / Mind Fi Wireframes</li>
<li>MVP / High Fi Wireframes</li>
</ul>
<p>UI Design</p>
<ul>
<li>Mood-board</li>
<li>Design guideline</li>
<li>Sketch</li>
<li>Adobe Illustrator</li>
<li>Adobe Photoshop</li>
<li>Flinto</li>
<li>Invision</li>
</ul>
<h3>Step 1 — Research</h3>
<p>Applying the <strong>Design Thinking</strong> 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.</p>
<p>Ones we knew our target group, it was time for the Lean Survery</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1002/1*5eBiuWUztWPsP585utIEHg.jpeg"></p>
<p>In this face of the project, we know our customers and their needs. We ask them specific questions through an online Survey — Survey link → <a href="https://indralw.typeform.com/to/LfC6nm">https://indralw.typeform.com/to/LfC6nm</a> — and we prepare some interviews with teachers, parents and their kids in order to know them.</p>
<p>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.</p>
<h3>Affinity Diagram</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*D4R4stE5F6slbowZ1Jue7Q.jpeg"></p>
<h3>Step 2— Ideation</h3>
<p>With all these findings and insights in mind, we move deeper to learn more about our users by building personas, and a user journey.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1002/1*IJpS8xkIkMKE6dnlm36k_Q.jpeg"></p>
<h3>Low Fi Wireframes</h3>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*k85b3Sj-ftoXuCeD6Z4HFA.jpeg"></p>
<h3>Step 3: Design</h3>
<p>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.</p>
<h3>Moodboard / Design Guideline</h3>
<p>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).</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6zfi5F6Nr1yQ28oPPTUp8w.jpeg"></p>
<p>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.</p>
<h3>High Fi Wireframes</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eG2PmyZUQhuw0LFQ2yz9Ow.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XXF9RnImxMmur-2oNGdznA.jpeg"></p>
<h3>Demo</h3>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FIBzo9IC1ItI%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DIBzo9IC1ItI&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FIBzo9IC1ItI%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/65baf6a330f5938029a5deacb007241f/href">https://medium.com/media/65baf6a330f5938029a5deacb007241f/href</a></iframe></p>
<p>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 <strong>MVP</strong>! There is a lot more to discover!</p>
<blockquote><p>Our design proposal for <strong>Grem´s Adventures </strong>won the <strong>UX/UI Design Hackshow at Ironhack</strong>, Barcelona.</p></blockquote>
<p>Thank you for reading the whole history and hopefully you enjoy the result 😉</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4e12c938586c" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/grems-adventures-4e12c938586c">Grem’s Adventures</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Grem’s Adventures

Top Stories