BitBonder is a STEM app designed for girls ages 10-14. Through addictive puzzle games and social sharing, players earn elements in the periodic table and use chemistry fundamentals to build real-world items. The overarching goal is to create positive associations with chemistry and science as a whole, and to build confidence, interest, and familiarity.
My Role Research, Wireframes, User Testing, Storyboarding, Animation
Tools Pencil & Paper, Whiteboard, After Effects, Illustrator
Challenge
Women are often underrepresented in science, technology, engineering, and mathematics (STEM) fields. The challenge is not a prevalence of explicit discouragement, but one in which there is a lack of exposure and a dearth of confidence and familiarity.
Solution
Of the numerous STEM subjects we could have chosen, chemistry was a stand-out as a particularly abstract and often alienating secondary school subject. Furthermore, the size, variety, and uniformity within the periodic table as an informational structure lends itself to scalability and an enjoyably repetitive, comprehensive pattern of gameplay.
How to Play
Learn about the periodic table and the elements within it by first selecting a category to explore, such as Noble Gases or Other Non-Metals. Elements that are a solid color are available to play, and dots below them indicate how many of each element you can and have earned.
Start a game by tapping “Play Now” to build molecules that use the element you've chosen. Once you earn that element you can play for another one, go to the lab to see what you'd like to build, or earn extra storage spots by playing a mini-game such as Periodic Puzzle or Bit Buckets. Play by yourself or against another person!
In the lab you can build something new with your earned elements or review what you've already made. Each item has corresponding stickers you can share socially, and includes little pleasant surprises like the banana manifesting as a banana suit! Notable scientists are sometimes featured as well — Marie Curie is shown below with radium and the user's avatar.
Initial Research
Our discovery and research phase included reading literature about how children learn and underrepresentation of females in science fields, both STEM and non-educational but popular app reviews, and interviewing women outside the target age-range. This helped us establish that our app must be fun and educational, integrate into middle school social life, and connect subject matter to real world applications. With this in mind we created a preliminary moodboard to direct our visual style for color, illustration and typography, and personas to help us stay focused on user needs.
Personas
Preliminary Design
Defining our initial gameplay concept and a few primary screens was our next step, after which we created a rudimentary task flow and began whiteboarding. We tested these details by creating low-fidelity wireframes to illustrate and improve practical gameplay. Adjustments were made with logical, intuitive use in mind, and we revisited our goals that it be easily engaging and include social sharing.
Style Guide
At this point we created a design system to streamline creation of high-fidelity assets and screens.
High-Fidelity Screens + User Testing
We used our high-fidelity wireframes for user testing, which revealed flaws within our lab area where earned elements are used to build shareable stickers. Some of the items in the lab were assumed inaccessible because of reduced opacity and a lock symbol, when in truth they were available to at least peruse and work towards building.
We made visual changes based on these findings, such as doing away with the lock symbol altogether. Overall user feedback was that the game is really fun and pleasantly colorful, which although secondary to function is also important in achieving our goals.
Refined Taskflow
Next Steps
Gameplay itself is designed for scalability in pace and scaffolding for comprehension and experience level. The majority of our users have little to no fore-knowledge of chemistry and progress will vary. Gameplay speeds up or slows down depending on user performance, and a succession of errors will lead to visual clues like a highlighted border or an explicit text box with hints or other instruction.
Though the first edition will be for children to use outside the context of the classroom, BitBonder has utility beyond independent play. The next stage of app development will add to the system to include educational tools for parents and teachers, so that they can review student progress and modify instruction as appropriate.
Process: Animation Storyboard
