ROLES: UX Writer
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 found around us and the steps needed 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, however, 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 did research into my content and into my competition to know if something similar existed. If it did, I would look at solving the problem in a different way.
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 almost all of them to be games. Mentioning the exceptions here:
1) Dr Bug: Microbe Mayhem – The free android game is aimed at children aged seven to 12 and takes them on a journey learning about bacteria, viruses and the use of antibiotics. It, by contrast though, talks about reactive measures after the disease hits.
2) Bacteria Identification Made Easy – This free mobile game is for adults. It tells about the medically important bacteria found in laboratories. It educates about steps of differentiation from gram positive and negative bacteria. Its highly technical language, however, is hard to understand for a layman.
3) Germs Scanner Simulator – Bacteria Checker Prank – This free mobile app scans anything and shows the bacteria in it. The results are a prank, though, and are the same every time.
Scope & constraints
Researching the competition showed that since bacteria was a technical subject, there were no comprehensive apps that educated kids about them. The subject was used in many games though, which were purely fiction.
So the challenge was to create an entertaining educative-yet-fun app which would engage kids and encourage them to adopt 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 adopt a hygienic and healthy life.
In accordance with the research, I came up with the app’s main goals as:
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 a community
USERS & AUDIENCE
I decided the age group of my targeted audience to be 5-13 year olds. They would have 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. They’re listed in the top to bottom hierarchy:
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 tested the app-making process of content and design with 5 anonymous designers from a UX community.
This first feedback was positive with the testers supporting the functions and the idea of the app:
IDEA & ARTICULATION
At the outset, I started out with the larger questions of content, context, and audience that frame any UI/UX project. The short description of my idea answered 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 will be able to 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 my 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. They 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 ultimately thought that adding cells might be too much a cognitive load on kids, and decided to focus on 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 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 or interface design. At this early stage, I tried to create the experience of the app when finished.
STYLE & MOOD: I created a mood board from my inspirations 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 to 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 moodboard, as I applied its look and feel:
🔻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 color:
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 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 steps users needed to take throughout the app. Captured all 4 functions in it:
In the sign-in section, I offered the users to sign in from Google Play Games and Game Center for android and iOS devices too. Since kids don’t usually have their own social media account, it’s easier for parents to link them up with these alternate accounts and let kids track the game and share with their friends.
The testing came back positive though a couple of testers found the map overwhelming. Since all the functions were crucial to the app, I couldn’t possibly let go of any. I owed it to the visual overload of the sitemap, and hoped that, if it indeed were the case, 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:
User feedback came out positive and they didn’t find any feature 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
The testing first with 5 anonymous designers from a 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, respectively.
First batch of the user sessions was mostly from Belgium, Netherlands and across USA. Second batch had 7 from India and 5 from the US.
Most of the users journeyed across all 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. Taking this into account, on the splash and home screen, I made the areas around the buttons responsive too for the users.
On the leaderboard page, the heatmap suggested users wanted to see the user profile. I’ve thus 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 there. The app will have additional screens there to show sharing options and the user’s community.
Apart from these, overall the heatmaps concentrated on all the main buttons so all of them attracted attention.
The kids’ responses were heartening! They liked Mr. Bubbles.
One kid had concern of not having a social media account. Linking to Game Center or Google Play Games, though, is given as an alternative.
Kids love technology and games and they aren’t afraid to explore and discover new elements on a screen. I just needed to make sure that the interface looked and 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. So I included all screens as an access point to all the features instead of having 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 because they would be involved along with the kids.