Rachel
UX / UI designer & researcher

Boomtown

Facilitating data literacy among middle school students with a mobile edutainment app

The Problem

Our society revolves around data. Though tools for analyzing and interpreting data are more widely available than ever before, many people still lack even a basic understanding of data concepts, 

The Challenge

Recognizing that data literacy as an increasingly critical skill, SAS, a leader in Analytics, noticed an opportunity to start teaching foundational data concepts as early as middle school. They challenged my team to design a mobile interactive tool that would introduce middle school students to foundational data concepts in an engaging, understandable way.

The Result

We designed Boomtown, a mobile edutainment app that contextualizes and gamifies learning distributions, a foundational data concept, through real-world, story-based, participatory challenges.

Disclaimer: To comply with my Non-Disclosure Agreement, I’ve omitted some information from this case study.

Project Details

Timeline - 8 Weeks

Client - SAS

Capabilities - UX / UI Design

Tools - Sketch / xD / Illustrator

The Team

Team Boomtown consisted of myself and two visual designers.

My Role

Researcher / Strategist

  • As the research-oriented member of my team, I proposed and organized a research strategy, delegated research tasks, and collaborated with my team to conduct research.
  • I led the synthesis phase by clustering and abstracting research findings.
  • I designed as-is and to-be journey maps for our target persona.  
  • I outlined our usability testing protocol and collaborated with my team to execute testing sessions.

UX / UI Designer

  • I documented task & user flows 
  • I advocated for, designed, and maintained a UI design system / pattern library from which I designed wireframes. 
  • I evaluated our prototypes against usability heuristics
Research Strategy

Research Goals

To design a tool for middle schoolers, we first had to understand three things:

  • Understand the data literacy problem space in relation to middle schoolers
  • Understand our assigned data concept: distributions
    • We did this by watching stats crash courses
  • Understand middle schoolers' learning motivations & challenges
    • We did this with interviews & literature review

We set out to learn as much as we could about middle schoolers.

Teacher Interviews & Literature Review

Our biggest challenge during this phase would be gathering the information we needed without talking to our target users. (Due to University policy, we were not permitted to speak directly with middle schoolers during the research phase). Therefore, to get a better understanding of our tool's end users, we interviewed two middle school teachers at Centennial Middle School in Raleigh, NC.

Middle school teachers’ firsthand experiences offered a wealth of information about middle schoolers’ cognitive states and responsiveness to different teaching methods. Why interviews + literature review, you ask? Beyond answering the questions we’d prepared, interviews would challenge our assumptions and facilitate deeper discovery into the problem space and the everyday experiences of our end user. Acknowledging that only interviewing two teachers who teach in the same context might limit our understanding of the problem, we chose to supplement the interviews with a literature review.

Key curiosities:

  • What motivates middle schoolers?
  • What challenges do middle schoolers face, both in and out of the classroom?
  • What data concepts are they exposed to, if any? How are these concepts taught?
  • How do middle schoolers learn?
  • What are the most effective teaching strategies?

Facilitating data literacy among middle school students

Synthesis Strategy

Concept Mapping + Affinity Diagramming


We captured everything we learned about middle schoolers from interviews and literature review in concept maps and affinity diagrams. Identifying middle schoolers' broader needs, influences, desires, vulnerabilities, motivations, fears, and behaviors helped us identify major themes.

Identifying Insights & Design Opportunities

1 - In school, data concepts lack context.

Middle schoolers want to make real-world connections and understand why they're learning what they're learning. We noticed a disparity between this desire and the way that data concepts are currently taught in schools (if at all). In schools, data as a tool, let alone a concept, is rarely taught outside of a math & science contexts. Even in those contexts, it's abstracted to the point of irrelevance. (Not sure about you, but I can't remember the last time that knowing the distribution of colors in a bag of m&ms was actually relevant to my life). However, data is incredibly relevant - it shapes decisions that happen all around us, in every field and aspect of life, every day. 

Design Opportunity: Expose the real-world relevance of data concepts by contextualizing them as a problem-solving tool, beyond math and science contexts.

2 - Middle schoolers crave control & Independence

The teachers stressed that though they seem young, middle schoolers want to be treated like adults. We hypothesized that middle schoolers might be more receptive to learning data content if they felt a sense of control over their learning.

Design Opportunity: Foster the user's sense of agency over their own learning

3 - Storytelling is an effective teaching tool

Not only is narrative-based content more engaging, but middle schoolers remember abstract concepts better if they're connected to a story or personal anecdote. We hypothesized that narrative might be a useful tool to leverage when trying to explain data concepts to middle schoolers.

Design Opportunity: Leverage narrative as a teaching strategy and a vehicle by which to contextualize data concepts.

Empathizing with Middle Schoolers
Facilitating data literacy among middle school students

Personas

As we moved toward ideation, it was imperative that we kept our users' needs front-and-center. 

Based on our interviews + literature review, we developed personas and identified learning motivations, challenges, and needs for each. Our primary persona, Jordan, served as a reminder of those' needs throughout the design process, especially when deciding on the tool's narrative structure. To ensure that our personas were realistic, we asked the middle school teachers we'd interviewed to evaluate them. 

Sharing this persona with our clients at SAS helped us align with them around a common language of empathy for middle schoolers' experiences and learning needs.

Our personas were largely based on information from teachers and literature review and were therefore rather speculative. In an ideal world, we would refine these personas based on discussions with actual middle schoolers. 

Journey Mapping

Mapping a mix between a user journey and a-day-in-the-life map for Jordan helped us contextualize our design intervention, identify potential use cases, and cultivate a shared vision with our client.

The map follows Jordan through a few days and ends with her struggling to grasp data concepts with the tools she was given in school. 

Facilitating data literacy among middle school students
Proposed Solution
Home Screen (some elements removed)

Home Screen (some elements removed)

Introducing Boomtown

Boomtown is a mobile game that contextualizes data concepts through participatory, narrative-based, problem-solving challenges. As mayor of their own rapidly-expanding city, Boomtown players analyze and interpret data to solve problems for their city and its citizens.

Your city has a pollution problem. How do you encourage citizens to utilize green transportation methods? Your city is in the path of a hurricane. How do you predict its impact? Members of your city get sick with the novel coronavirus. How do you flatten the curve? Hint: Analyze the data!

Please note that our full, high-fidelity wireframes are protected under NDA and have therefore been omitted from this case study.

How It Works & Key Features
Facilitating data literacy among middle school students

Agency from the start

Placing the player in a position of power and responsibility as mayor, Boomtown establishes the user's sense of independence and control rom the game's beginning. 

Facilitating data literacy among middle school students

Solve problems by analyzing and interpreting data

Our vision for Boomtown was an experience where play and learning are one. Rather than mimic a lesson-plan type structure, Boomtown gamifies learning data concepts by integrating them into participatory, story-based challenges (called Build Challenges) where data is presented and contextualized as a problem-solving tool.  This format fosters middle schoolers' developing critical thinking skills by playing to their competitive nature.

Facilitating data literacy among middle school students

Discover new data skills

Learn new data concepts simply by playing the game. Recognizing players' varying comfort levels with data concepts, we introduced "Learn Modules". These challenges are similar to Build Challenges, but focus on discovery rather than problem solving. Their choose-your-own-adventure style format prompts players to discover and build confidence around new ways of representing, analyzing and interpreting data while still maintaining context and relevance.

Facilitating data literacy among middle school students

Grow and expand your Boomtown

Boomtown rewards players for solving problems in their city with new features and expansions, which grow in complexity as the player solves more challenges. This never-ending, ever-changing reward system keeps play fresh and exciting.

Facilitating data literacy among middle school students

Be a hero to your citizens

Based on our research, we wanted to make sure Boomtown players could recognize and feel their impact. Boomtown's "happiness feed" does just that. This feed of comments from the city's citizens correlates to the player's "happiness score", the metric used to reflect how well the player is doing. We hypothesized that, by measuring the player's score in "happiness", they would be more likely to recognize their impact and be driven to continue playing.

We learned in our research that middle schoolers are all about "me". This feature allows them to feel important and powerful.

Rewind! How did we get there?
Ideating & Concepting
Rapid Sketching Session

Rapid Sketching Session

Ideation Workshops

A "What-if" exercise and rapid sketching helped us discover and think through potential concepts.

We evaluated ideas from this exercise against our goals to contextualize data concepts, leverage narrative, and foster user agency to determine which one to follow.



A familiar, time-tested game structure

While discussing our tool's potential structure, my teammates and I recognized our mutual fondness for builder games (Rollercoaster Tycoon / Lemonade Tycoon / Minecraft etc) when we were growing up.  Our research revealed that games like these are still largely popular among middle schoolers. Though we couldn’t be sure, we hypothesized that these games’ endurance was due in part to their ability to give young minds a sense of agency and creative freedom that they rarely experience in real life.  They show the real-life impacts of strategic decision making. So many of today’s most important decisions are made based on data.  When we connected the dots, we realized that data analysis could introduce a level of nuance to these familiar, time-tested game structures.

Biking / Walking Data set from Raleigh, NC

Biking / Walking Data set from Raleigh, NC

Telling Stories with Real Data

We recognized that the data we used in our game would have to be real (or at least realistic) to imbue relevance. And that’s when we considered using real city data. After all, city data is widely available, open source, for cities across the country. To test our hypothesis that city data might be a good fit for our game, we gathered data sets from various cities and crafted interactive stories surrounding each data set. This step was really challenging - it pushed us to truly interrogate and understand the data concepts we sought to teach to our middle school audience. These data stories ultimately formed the storylines for Build Challenges and Learn Modules.

Designing for Scale

Some of our initial ideas revolved entirely around distributions and relied on distribution curves to function.  Though they addressed the challenge, these ideas would not scale to other data concepts.  On the contrary, Boomtown’s structure is flexible enough to accommodate any data concept, not just distributions.  This consideration of scalability made our solution much stronger in the end.

Learning Experience Surveys

As we began considering game mechanics, we wanted to identify the characteristics of a good learning experience.

What factors contribute to a positive, memorable learning experience? What factors contribute to a negative one?

In a research exercise we called the learning experience survey, we asked each of our peers (about 20 total) to tell us about two memorable learning moments- one positive (where they felt good about learning) and one negative (where they felt discouraged about learning). We then abstracted these moments into their defining characteristics using an affinity diagram. These characteristics would help us determine what our app should (and shouldn’t do) when it came to learning. This time-efficient method would collect anecdotal insights to compliment other, more formalized or academic research methods. We’d discover and better understand the emotional parts of learning.

Positive Learning Experiences:

  • Set clear goals & expectations
  • Highlighted successes over failures
  • Rewarded the learner
  • Explained errors gently and constructively

Negative Learning Experiences:

  • Had unclear expectations
  • Demeaned the learner
  • Failed to offer constructive feedback

Bringing the System to Life

Mapping User Flows & Information Architecture

Mapping flows helped us determine the most important parts to design for our first proof-of-concept prototype.

Upon launch, Boomtown users are taken through an onboarding flow that introduces gameplay. This flow ends on the home screen. The bottom nav (tab bar) on the home screen has three sections:

Home - The ever-scrolling cityscape serves as the player's home screen. Challenge icons pop up throughout the city.

Learn - Where users can access Learn Modules and the Glossary

Build - Where users access build challenges and view achievements

The following hybrid flow show how a user might navigate the app's architecture.

Facilitating data literacy among middle school students
Facilitating data literacy among middle school students

Lo-fi Wireframing

When it came time to start designing screens, my team divided the project into two workflows: wireframes and visual design. While my teammates experimented with the visual design, I built out lo-fi wireframes according to our user flow diagrams.

Due to my team’s mutual familiarity and comfort with Sketch and InVision, these tools seemed to be the best choice for wireframing and rapidly prototyping out our task flow. I worked closely with my teammates throughout this stage, consistently giving and receiving feedback to ensure that everyone was able to contribute to major design decisions.

Facilitating data literacy among middle school students

Visual Design

Balancing Fun and Maturity


Careful consideration went into the selection of Boomtown's color palette, illustration style, and UI elements. We learned in our research that middle schoolers won’t touch anything they perceive to be too young for them - and our game had to pass that test. Our goal for Boomtown's visual design was to be energetic and playful, but still mature. 

Boomtown's illustrations had to be modular in construction (this required lots of math) and versatile enough to compose a sprawling cityscape.

Example of Boomtown Cityscape

Example of Boomtown Cityscape

Hi-Fi Wireframing & Prototyping

Once we'd identified a visual style, we applied it to our lo-fi wireframes and built a hi-fi invision prototype. This prototype consisted of an onboarding flow, one learn module flow, one build challenge flow, and the happiness feed. Ultimately, the prototype provided a realistic experience with which we could gather feedback.  

Atomic Design Consistency

Through the wireframing process, I advocated for & stressed the importance of developing a consistent, modular design language.  Using Sketch, I created and maintained a design library of components to maintain consistency and maximize efficiency. My team decided to design our first prototype for iOS, so I frequently referenced the Human Interface Guidelines during this phase.

Heuristic Considerations & Evaluation

Limited text, ample opportunities for user contribution, and usability heuristics like immediate feedback, easy recovery from errors, and clear indication of progress were among the other factors that we noticed time and time again in well-designed educational tools. We kept these factors top-of-mind as we prototyped.


Usability Testing & Iteration
Facilitating data literacy among middle school students

Testing Protocol

Because we were unable to interview middle schoolers, testing our prototype and with them was especially important.

We tested a clickable InVision prototype of Boomtown, consisting of the onboarding flow, one Learn Module, and one Build Challenge. with 8 middle schoolers (age 14-15) at Centennial Middle School in Raleigh, NC. Because this was an early proof-of-concept prototype, our goals were to:

  1. Test participant interest in the gameplay & visuals
  2. Test high-level navigation & information architecture

To understand each participant's thoughts, we asked them to think aloud as they navigated a Learn Module and completed a Build Challenge.  We then asked them a few follow-up questions based on their individual experience. Due to the middle school's policies, we were required to test in one large room with other students present. Despite these less-than-ideal testing conditions, we still received great, honest feedback from the students.

Quotes from Participants

  • "I've never learned this before"
  • "I wish I could touch it more"
  • The colors are nice...I like it"
  • "It makes you seem like you have power over the entire town"

Findings

Validations: 

  • Participants almost universally liked the game's color scheme and illustration style. 
  • The Build Challenge's introduction sparked curiosity and urgency among participants, just as we'd hoped.
  • Participants found the game's structure intuitive and understood the happiness meter reward system without additional prompting. 

Surprises

  • The participants noted that they hadn't learned anything about distributions before, so this was their first introduction. We were surprised to find that much of the data analysis content proved too confusing and advanced for our users, even though we thought we started with the most basic concepts.
  • When faced with a decision, participants thought in terms of “right” and “wrong”, rather than recognizing that data interpretation is not always so clear-cut. This conditioned way of thinking can probably be attributed in part to the modern education system, a standardization-driven system that instills these absolutes in the pursuit of systemic consistency and efficiency.  Regardless of the source, we recognized that our game would have to be more sensitive to middle schoolers’ decision-making process

Iterating based on Participant Feedback

Recognizing that more research, expert input, and further testing would ultimately be needed to fully address the issues we'd discovered, we did the best we could with the resources available to us.  By further acknowledging and highlighting ambiguity in Boomtown’s Learn Modules, we hoped to encourage users to think metacognitively about the data concepts presented to them in Build Challenges.  We also increased the overall interactivity of the game and increased the progressive disclosure of information.

Design Delivery
Team Boomtown Presenting at SAS

Team Boomtown Presenting at SAS

Presenting to our Clients at SAS

My team had the opportunity to present our research and a 3-minute animated scenario video of our UI in action at SAS's headquarters in Raleigh, NC.

Project Summary
42
Research Methods
36
Screens
8
Usability Tests
3
Interactive prototype iterations
Facilitating data literacy among middle school students

How does Boomtown help?

By contextualizing data concepts with real-world stories, Boomtown enables users to not only learn and understand the relevance of data concepts, but also empowers them to apply those concepts to question, make sense of, and even change the world around them.

Reflection & Next Steps

Lessons Learned

Involve experts and users early and throughout the process

If I could do this project over again, I would love to bring teachers and middle schoolers into the design process. Though we learned a lot from interviews, designing with experts and end users would certainly help us produce an even richer solution.

Teamwork makes the dream work.

Team Boomtown was awesome to work with and I'm incredibly proud of what we were able to accomplish in such a short time.

Next Steps

If we continue to develop Boomtown, this would be our next big question: How might we encourage users to find and upload their own city data while integrating seamlessly into the gameplay?