BitBonder Mobile App

UX / UI Design

Middle school is a critical time for regular and expanded exposure to science, technology, engineering and math (STEM) subjects, but it is also when girls begin to lose interest. BitBonder creates familiarity and engagement to help remove intimidation and perceived steep learning curve of STEM topics.

Problem

Women are underrepresented in STEM fields due to a lack of exposure to those fields, gender gaps in confidence of one’s abilities, and a male-dominant culture that discourages women from participating. It is a vicious cycle that begins at an early age. Additionally, traditional STEM education often lacks a connection between classroom content and its real-world applications, which bolsters the perceived difficulty in learning and applying the concepts.

Solution

An app that gamifies STEM learning to make it fun and approachable. Through its bright, playful branding, engaging gameplay and shareable content, we make science less daunting and give students the tools they need to succeed as well as the motivation to do so.

Client

Concept

Project Duration

6 weeks

My Role

User Research, UX / UI Design, Usability Testing

Tools

Adobe Illustrator, InDesign and AfterEffects; InVision

Team

Wynn Barnard, Amy Ray

BitBonder is both fun and educational. Players learn about molecules, the structure of elements and their position on the Periodic Table, all under the guise of a series of entertaining mini-games.

Color plays a big role in distinguishing between the families of elements throughout gameplay. Careful consideration went into selecting colors that are both visually distinct and harmonious. 

In this game, everyone is a chemist. Students create objects in the Lab by combining elements which promotes recognition and understanding about the relationship between molecules and elements, and the elements’ roles in the world around us.

Playful illustrations in a flat, vector illustration style are friendly, fun, and appropriate for our intended audience.

Players are motivated to discover more elements to get more content that they can share with friends. Leaderboards encourage healthy competition and accountability with parents and/or teachers.

We created an advertisement to excite viewers and ignite their curiosity. This would be posted on Instagram because of its popularity amongst pre-teens.

Process

While the best methods for gathering user insights entail first-hand research, we were constrained by our limited access to our target users (specifically girls in our target age range of 10-14), so we found other ways to collect qualitative data about our users.

We started out by researching existing studies on the underrepresentation of women in STEM activities. We then interviewed women ages 18 to 27 who did not pursue higher education in STEM fields with the intention of gaining insight into why they chose a different path. And finally, we reviewed educational apps that were designed for children and read user reviews, focusing on the substance of what users were saying versus the star rating.

Findings:

Women remain underrepresented in STEM fields, with the greatest disparities occurring in engineering, computer science, and the physical sciences. Middle school is a critical time for students to be learning STEM subjects, but also is when girls begin to lose interest.

Reasons girls veer away from STEM subjects include:

  • A lack of early STEM experience
  • Gender gaps in belief about one’s abilities
  • A masculine culture that discourages women from participating
  • Lack of real world connection increased the perceived learning curve, which hindered their ability and willingness to learn

Educational App Comparison

Apps fall short when they don’t provide adequate explanation of concepts or wrong answers.

Successful apps:

  • use real world connection and disguise learning through entertaining gameplay
  • are simple to use, utilizing recognized game patterns to help users instantly connect with and understand gameplay, no matter the subject matter of focus.

Utilizing information collected in our research, we created personas  of our target users.

Game Concept and Design

We decided to narrow our focus to chemistry because it’s especially abstract and is one of the fields where women are the least represented. In our personal experience, chemistry is also the point in our science careers where we began to feel particularly alienated in class.

We researched chemistry basics to validate that it is a subject on which we could focus. While brainstorming, we realized that the size, uniformity and variety of the periodic table lends itself to scalability and enjoyable repetitive and comprehensive pattern of gameplay.

We then had a whiteboarding session to brainstorm game ideas and created an initial gameplay flow.

Together, we determined our general goals for the game:

  • Game is both fun and educational
  • It integrates into middle school social life
  • Targets girls, but is inclusive of all genders, not portrayed as “science for girls”
  • Sends message that Science is relevant and for everyone

Wireframes

We made paper wireframes of key flows so that we could test our concept and receive feedback from users. These initial wireframes helped to establish the core functionality and gameplay structure.

After continued iteration, we were able to reduce the game to four key task flows.

Task Flow - BitBonder

Branding and Visual Design

We wanted BitBonder to be friendly, approachable and fun, as opposed to the current landscape which has a cold, science-y, and somewhat daunting feel. This translated to a visual design that is bright, colorful, energetic, but not inherently “girly.”

We wanted the UI to connect with their real-world counterparts to promote learning and retention, and played with different shapes, colors, speeds and tactility. We started out using circles as a metaphor for atoms, but later chose to use falling squares because they more closely represent the element “pieces” of the periodic table. This choice helped hone our gameplay metaphor and brought cohesion to the overall game system.

The game is built around the periodic table and users are constantly interacting with it. We wanted to take something that typically is seen as daunting and make it more approachable so for the design, we created elements that appear tactile, bite-size and are overall fun to interact with.

Design System

Before moving onto high fidelity mockups, we created a design system in order to make sure that everything that was being created would be consistent. This also helped save time and facilitated rapid prototyping, using our mood board to help guide our style choices.

Prototype

We were eager to test our concept on users and created our first high-fidelity prototype. In total, we created two iterations.

HiFis-BitBonder

After building a higher fidelity prototype, we tested our game concept as well as our visual design. Users completed the prototype without error and we received positive feedback overall. There were some issues of clarity around some aspects of our visual design which were easily resolved. The next steps would be to test the latest iteration of the prototype.

Creating the Advertisement

We chose Instagram as our platform to reach our target audience because of its popularity amongst pre-teens.

We did a whiteboarding session to come up with our ad concept and created our first storyboard. Using our style guide as reference, we created our assets in Illustrator and created a production-ready storyboard to guide the animation creation.

Our advertisement is intended to excite viewers and ignite their curiosity. It sends the message that science is fun, approachable, and for everyone.

Jump to Video

Next Steps

The next steps for this project would be to build out the teacher and parent functionality. This is how parents and teachers are able to monitor students’ progress in the game.