OVERVIEW
Our aim was to re-design the parent facing application for a kid's smart companion robot that understands and responds to the child's world by enhancing its engagement with parents and personalisation to ensure parents stay connected to their children’s daily activities.
TARGET AUDIENCE
The users of this platform would be working middle aged parents with kids
DISCOVERY
Learnings from the discovery workshop
We facilitated remote discovery workshop with the stakeholders to gather and understand their challenges of parents using the existing app. Workshop helped us map and document the insights, set goals and understand their brand's design language.
Project Goals
Provide a seamless login experience for multiple users, such as parents and grandparents
To help parents set goals / tasks and instil habits in their children and gamify the whole experience.
Simplify navigation throughout the application
To personalise the content and use animation, colours and engaging visuals to help parents stay engaged
COLOURS
Enhancing brand colours
The combination is inherently aesthetically playful with red’s representation of life and energy, and blue’s representation of trust and calmness. The vibrant usage of secondary colours act as a support in accentuating the content of the application. While Dark green and black are standard for text usage throughout the app.
TYPOGRAPHY
Playing with typography
Degular is an Adobe font that enhances the personality of Miko with it's playful nature through unconventional letterforms, rounded shapes, and varying stroke widths. It also has multiple font weights making it a good type to promote visual hierarchy in typography yet maintain its uniqueness.
Degular also supports multiple languages which was a key requirement since the application is in use in over 5+ non-english speaking countries.
UI DESIGN
Visual Design Approach
Taking into account the brand guidelines and the fact that we’re designing this application for the parents of kids aged 4-10 years old, we propose a Bold, Playful and Fun approach for the app, while bringing in a sense of uniqueness as well as making it interactive and engaging.
Widget based homepage
The homepage showcases different widgets which are personalised based on the characteristics of the users and their needs, like recommended content, timely nudges and visually interactive widgets.
Dynamic and engaging visuals
We introduced challenges or levels to help visualise users' progression through different stages or levels, creating a sense of accomplishment. We also introduced game elements like badges, points and coupons to signify accomplishments.
Gamifying habit formation
We introduced challenges or levels to help visualise users' progression through different stages or levels, creating a sense of accomplishment. We also introduced game elements like badges, points and coupons to signify accomplishments.
Colourful data visualisation
We used visual progress bars, charts with high contrast colours to make analytics more easy to consume. This also helps break down larger insights according to a child's behavior.
Over to the dark side
We introduced a secondary palette specifically for dark mode that helps transition from light to dark mode in a modular manner and made development a lot faster.
Micro interactions and engagement
Using animations in the application, helped it become highly engaging and personalised, focusing on success & failure messaging, mascot communication. We also focused on sound interactions for certain animations to help with positive reinforcement of actions.
DEVELOPMENT
Using Flutter for development
Flutter transforms the app development process by helping to build, test, and deploy the app from a single codebase. Thus, while designing we adhered to the documentation and specs provided.
CONCLUSION
Impact and user testing
The product team provided us with app analytics based on UAT with their United Kingdom users, and we understood that over 32% users found it hard to navigate between analytics for different behaviours and we understood that it would be better to keep them upfront.
UI TEAM
Pradhiksha
Udaykumar
UX TEAM
Arun Mathew
Doris Santhus
ILLUSTRATION TEAM
Varsha S
Jithin Prasad
ANIMATION TEAM
Mohamed Jaabir
Naseer Ahmed