Project Overview 📃
Challenge
The Singapore-based startup aimed to create an app for parents to track their children’s behavior. However, the target audience, primarily young and technologically advanced women, did not find the design of the app prototypes appealing enough for daily use.
Objectives
- Review and refresh the brand style
- Develop an interface of an Android application
- Design and develop a landing page to promote the product online
Solutions
Brand Style: To improve the project’s appeal, my focus was on creating a visually pleasing and user-friendly design.
Interface Design: Using the provided user stories, I crafted a set of screens that illustrate all aspects of using the app. Special attention was given to developing the assessment interfaces and the screening results section. However, the most significant contribution to the project was designing the child profile feed. This feature enables users to view all previously taken assessments, track their child’s developmental growth, and identify potential issues at an early stage.
Promotional Website Development: In alignment with the app’s style, I created a responsive website using Bootstrap. This site serves as an informative platform for potential users, offering essential information about children’s behavioral health and introducing the screening app.
Project Type
Android application
Project Scope
- Branding
- Mobile UI/UX
- Promotional website
Tools
- Adobe Illustrator
- Bootstrap
Team
Small (1-5 members)
Country
🇸🇬 Singapore
Brand Transformation 🎨
During the initial stage, a thorough UI analysis was conducted, which involved analyzing feedback and comments from potential users. Based on their input, it was recommended to update the brand style, colors, and fonts.
Users expressed that the original app icon gave the impression of a mobile game rather than a healthcare application. Furthermore, the use of a bright red color in the brand design caused discomfort and created a sense of alarm or distress, which was not conducive to the purpose of assessing a child’s behavior.
The brand palette was changed to incorporate royal blue and its shades as the primary colors. To draw attention to important elements, a bright orange hue was chosen as the accent color.
The cartoonish icon was substituted with a font-based logo, aiming to convey a sense of respectfulness and a closer association with fundamental healthcare research rather than a game-like appearance. This change was made to align the visual representation of the logo with the app’s core purpose and establish a more professional and credible identity.
User Interface 📱
Using the user stories as a foundation, a comprehensive user flow was constructed to outline the typical path a user would take within the app. Additionally, a complete list of app screens, including variations and their respective states, was compiled.
The designed screens encompassed essential functionalities such as user registration and onboarding, adding one or more children, introduction to assessments, tracking assessment progress, a range of question types, assessment results including positive outcomes and warning indicators, and finally, a child dashboard featuring a diverse array of cards within a feed.
Colorful and Inclusive Illustrations 👨👩👧👦
Though the app icon underwent a transformation to adopt a more formal and professional appearance, colorful illustrations were introduced to infuse an element of fun into the app and encourage daily usage.
Considering the app’s potential global reach, the initial promotional campaign was initially focused on Singapore but with the understanding that the app could be utilized in any country. To ensure inclusivity and provide a sense of gender and race diversity, the illustrations were intentionally created to be less personalized.
The incorporation of cartoonish, faceless characters evokes a sense of joyous parenting and a strong emotional bond between parent and child, while avoiding any potential racial or cultural biases.
Promotional Website 💻
The promotional website was skillfully developed, maintaining consistency with the app’s style and utilizing the same illustrations featured in the interface. This website provides visitors with a comprehensive understanding of the app’s purpose and functionality.
Built on the Bootstrap framework, the website incorporates a multitude of captivating visual effects, ensuring an engaging and enjoyable user experience. These effects include parallax scrolling, lively animations, interactive links and buttons, a smooth page loader, and user-friendly contact forms.
The amalgamation of these elements contributes to a visually appealing and dynamic website that seamlessly showcases the app’s features.