Action Kids
App
1 Mar – 27 May 2021
This study sought to design and test a digital version of the Action Kids product. Action Kids is a product used in kindergartens to motivate kids to exercise through carefully constructed programmes, however at the time of the project Action Kids was only available through A3 posters that were sent to each kindergarten. The business therefore had a wish to create a digital version of their product. The project then researched Action Kids and analysed its current product, before designing and developing an application for Android and iOS that could be used in kindergartens instead of the posters. The application also allowed for new interactions to be implemented in Action Kids, such as animated figures showing the kids how to do each exercise, as well as more control for the pedagogues in how each Action Kids course progressed.
Process
In order to form a basis for the understanding of the analogue Action Kids product, theory was found in three areas related to the product: motivation, experience and digital storytelling.
In terms of understanding the users of Action Kids and their use case for the product, four interviews were carried out with four different pedagogues from three different institutions. Furthermore two separate observations took place, at one kindergarten, where the use of Action Kids was seen in a real setting. The data from the interviews and observations were analysed through an affinity diagram, and a how-might-we question was formed based on the diagram. The how-might-we question formed the beginning of the design process which started with generating various ideas and ended with the development of a prototype.
The prototype was evaluated through a usability study with a pedagogue and an observation of the system in use with kids in a kindergarten setting. The usability study was carried out through a within-subject design, where each test users was given every task. The test was conducted synchronously as a concurrent think-aloud test with a testmonitor to guide the test user as well as predefined tasks that covered the primary functions of the application. From the results of the usability test and the observation of the system, a second iteration of the prototype was developed, which aimed at fixing critical usability problems and expanded upon the initial design of the first iteration of the prototype.
Design
Based on the how-might-we question and the understanding gained from the affinity diagram, a sketching proces was initialised the design proces with the intention of exploring various concepts and possible interface designs. The Crazy 8’s method was used in the sketching proces, in order to promote creativity and prevent design fixation. The concepts and functions visualised through the sketches were evaluated using NAF, where each sketch was judged based on how new it was, the appeal of it, and the feasibility of implementing it. From the NAF evaluation a wireframe was constructed to collect each concept and function in a unified interface design.
In order to create a framework for the development of the prototype and a consistent system image that could support the users' interpretation of the interface, including the creation of an appropriate mental model for it, a design language was developed. The developed design language defined guidelines for the use of typography, buttons, colours, layout, and interactivity. The elements were based on Action Kids' existing branding, gestalt laws and design principles from the book Universal Principles of Design.
The wireframe was converted into a functional prototype by applying the rules from the design language and programming it in Flutter. By programming the prototype it was possible to create a more thorough prototype that could cover some of the more advanced concepts and functions of the design, which a prototype created in Figma or Adobe XD wouldn’t be able to. The prototype was evaluated through a usability study and based on the findings a second iteration of the prototype was designed and developed, which intended to fix the usability problems and improve upon the design of the first prototype based on the use of the application in the tests.
Gallery
This section provides images related to this project, such as sketches, wireframes, screenshots and similar. Click on an image to view the full size.