ROLES: UX Writer & Designer
DURATION: March 1st to April 1st, 2020; 4 weeks
KEY SKILLS: UX Content Strategy, UX Research & Design, Visual Design, Prototyping
TOOLS: G Suite, iWork, Useberry, Google Forms, Balsamic, Adobe XD
KidZoom is a fun iOS and android app that teaches kids about the harmful bacteria found around them.
Good ideas come from good problems. And, with the current developments in the world, there is a pressing need to have a healthy and hygienic lifestyle.
Starting young, it’s important that our children are aware about the harmful bacteria around us and know how to stay healthy.
Bacteria are tiny organisms that are everywhere around us. Most are very helpful and play an important role in the planet’s ecosystem and in human survival. Some are harmful, though, and can make us sick. Once these bacteria, called pathogens, invade our bodies, they eat up our nutrients and energy and produce toxins. They can cause common infections, like fevers, sniffles, rashes, coughing, vomiting, and diarrhea.
Before detailing out the app, I researched my content and competition to know if something similar existed.
I also broadened my circle of investigation, and looked at apps that were content adjacent. I noted similarities, that I wanted to avoid, and inspirations. I looked at 15+ apps and found all of them to be games. The exceptions:
1) Dr Bug: Microbe Mayhem – The free android game is for 7-12 year old kids and takes them on a journey about bacteria, viruses and the use of antibiotics. It then talks about reactive measures after the disease hits.
2) Bacteria Identification Made Easy – This free mobile game is for adults. It tells about the bacteria found in laboratories. It tells about the differentiation between gram positive and negative bacteria. Its highly technical language, though, is hard to understand for a layman.
3) Germs Scanner Simulator – Bacteria Checker Prank – This free mobile app scans anything and checks bacteria inside. The results are a prank, though, and are always similar.
Scope & constraints
Researching the competition showed that because the bacteria is a technical subject, there are no comprehensive apps educating kids about them. The subject is used in many games though, which are fiction.
So, the challenge was to create an entertaining and educative-yet-fun app which would engage kids and encourage them to live a hygienic and healthy lifestyle.
Kids need to differentiate between the friendly and malicious bacteria. Once the awareness comes, it’s easier for them to live a hygienic and healthy life.
After the research, I came up with the app’s main goals:
1) Be unique for kids (most of the apps are games and the few educative ones are highly technical)
2) Promote health and hygiene in kids
3) Attract the attention of parents with the educative-yet-entertaining content
4) Build and engage with community
USERS & AUDIENCE
I decided the age group of my targeted audience to be 5-13 year olds, with the following traits:
2) Technically savvy
3) Health-conscious parents/ caretakers
Based on the competitive research, I decided on the following functions of the app:
1) Sees, captures and educates about harmful bacteria.
2) Offers an animated game capturing and dodging the bacteria.
3) Teaches ways to avoid them.
4) Shares the caught bacteria with friends.
TESTING the functions
At every step, I measured and validated my process. The world was reeling with the coronavirus pandemic so I had to switch to remote testing because of the shelter-in-place restrictions and social distancing.
Since it proved difficult to recruit kids for remote testing, I could use them only for the usability testing of the app. I also tested the app-making process with 5 anonymous designers from a UX community.
This first feedback was positive with the testers supporting the functions and idea of the app:
IDEA & ARTICULATION
I started out with the larger questions of content, context, and audience that frame any UI/UX project. The below short description answers the following preliminary questions: what is it, who is it for, and where does it live:
A fun digital microscope for kids, that turns the camera on your phone into a playful microscope and describes the concept of harmful bacterias to kids.
The user can do the following main activity/function from the app’s home screen:
On positioning the app as a microscope, it will detect the common places where bacterias are found, such as a bed, sofa, floor, bathroom, etc., and show an animated bacteria which the kids can capture by clicking the camera icon. After capturing the bacteria, kids will learn about its harmful effects and ways to avoid it. The narration will be in text and audio format.
NAMING & BRANDING
Language, shape, color, imagery, typography, and icons were the formal building blocks I used, to create the more complex visual structure of a user interface.
Using language as a design tool, I played with words, did some linguistic research, and gave the app its name. It aligned with the overall tone and attitude of the app:
I then created the following tagline for the project. Its light-hearted, fun language aligned with my intended audience – the kids:
Zoom in and capture the hiding bacteria monsters!
Validating the idea
I tested the above with 5 anonymous designers from a UX community, who found it to be fun for kids.
One tester suggested to include plant and animal cells…. I toyed with the idea for a while, but realized that adding cells might be too much a cognitive load on kids. So, I decided to focus on the bacteria itself. What I did add, was information on good bacteria as well.
Working with design
I’m not a UX/UI designer but for the purpose of this case study, I dabbled in the entire exercise of the design process to show my thought process and methodology. I apologize, in advance, for any shortfall.
…. The next step was to think about the visual aesthetics of my content, navigation and interface design. At this early stage, I tried to create the experience of the finished app.
STYLE & MOOD: I created a mood board to begin the visual process. I sourced these sample images from Google Images and Pixabay. Although some visual design decisions took a different turn later on, the characteristics remained the same.
I used friendly, playful, and fun images, color and typeface. I searched the shapes of bacteria – rods, spheres and spirals – and gave them cute appearances. These illustrations explain the technical subject of bacteria in an entertaining way:
VISUAL DESIGN & STYLE GUIDE
I planned the app to have the following characteristics:
🔻 Vibrant Color Scheme
🔻 Minimalistic Layout
🔻 Easy on the Eye
🔻 Smooth Interactions
🔻 Sans-Serif Typefaces
🔻 Cute Illustrations
🔻 High-Quality Pictures with a Light Background
I decided on legible handwriting fonts to bring a comic touch to the app. Kept the interface smooth and clutter-free for kids.
I, next, created a small pattern library of interface elements of the app, to develop a consistent look-and-feel over the entire set of elements. It was an extension of the mood board:
🔻A button with text label in four states (normal, hover, pressed, inactive);
🔻Four image-based icons;
🔻Four other interface elements.
When I tested the pattern library with the 5 anonymous designers from a UX community, I realized that I needed to work more on the cohesiveness of the elements….
I needed to have uniform drop shadow colors, and needed work on the different states of buttons.
INTEGRATING THE FEEDBACK
I took this opportunity to spend more time on the buttons and chose more bright and vivid colors for each state. I also modified the button typefaces to be more kid-friendly. Changed the drop shadow colors of icons to a uniform-and-pleasing gray:
I iterated the above again with 5 anonymous designers from a UX community. The testers’ feedback was positive this time and I could move on to the next step!
SKETCHING THE STATIC INTERFACE
Next, I sketched the static interface of two screens of the app and organized content within the interface. I took care of the following:
🔻how shape, color, words, imagery, and icons imply a specific function and affect the user’s interaction
🔻each element has an appropriate relationship to the user’s finger
🔻each element has an appropriate placement within the screen
🔻how the two screens work as a set
The user feedback came back affirmative and it was time I could focus on the next process.
In the user flow, I visualized the hierarchy of the functions and the needed steps throughout the app. Captured all 4 functions:
In the sign-in section, I offered the users a sign-in from Google Play Games and Game Center for Android and iOS devices. Since kids usually don’t have their own social media account, it’s easier for parents to link them up with these alternate accounts and let kids track their games and share with friends.
The testing came back positive, though a couple of testers found the map to be overwhelming…. As all the functions were crucial to the app, I couldn’t possibly let go of any. I blamed it on the visual overload of the sitemap, and hoped that I would know better with the feedback on wireframes.
The mid-fidelity wireframes helped me commit to the structure and design with a consistent logic:
This time, the user feedback came out positive and they didn’t find any feature as redundant.
In the final prototype, users were prompted to complete the following functions:
🔻Create an account
🔻Connect to Facebook
🔻Find bacteria monsters around them
🔻Capture the bacteria with camera; play game
🔻Read about the bacteria’s properties
🔻See the leaderboard
🔻Share the bacteria with friends
This testing with 5 anonymous designers from the UX community was positive.
I used Useberry and Google Forms for testing the clickable prototype. I tested in two batches with ten and twelve 5-13 year-old kids, the actual users.
First batch of the user sessions was from Belgium, Netherlands and across USA. The second batch had 7 users from India and 5 from the US.
Most of the users journeyed across the screens.
92% of the kids found the idea of the app perfect.
83% of the kids said it was perfect to use and figure out the app.
92% of the kids said they will come back for more.
The heatmaps showed errors encountered on the splash, home screen, leaderboard and sharing screen. Considering this, on the splash and home screen, I made the areas around the buttons responsive for the users.
On the leaderboard page, the heatmap suggested that the users wanted to see the user profile. I, then, decided to build a separate screen for it.
Since the last screen, ‘sharing to friends’, didn’t have an onward path, the users felt a dead-end. I then modified the app to have additional screens to show sharing options in the user community.
The heatmaps included all the main buttons – so all of them attracted attention.
The kids’ responses were heartening! They liked Mr. Bubbles.
One kid had a concern of not having a social media account…. As explained earlier, as an alternative, kids can easily link to Game Center or Google Play Games.
Kids love technology and they aren’t afraid to explore and discover new elements on a screen. I just needed to make sure that the interface felt right for them.
🔻There is a legal aspect and privacy protection of kids that says we can’t ask for email and personal details of children under 13. So I gave the parents options to connect to Google Play Games and Game Center.
🔻From my researches, I realized that the app needed to be as simple as possible. I included all screens as an access point to all the features in place of menus.
🔻All throughout the app, I used non-complex gestures such as tap. Since kids are still developing their motor skills, increasing the buttons’ hotspots helped to reduce action failures.
🔻I directed the sign-up, onboarding, and help processes at the parents too, as they would be involved with the kids.