rachel pollock design
Boomtown
a mobile educational tool that introduces middle schoolers to data literacy concepts
how might we improve data literacy?
In our increasingly evidence-based society, many people lack the basic skills to understand and interpret data. SAS, a global leader in analytics software, came to us asking how we might improve data literacy in education starting as early as middle school. They asked my team to focus our solution on explaining distributions, a set of data concepts and representational formats fundamental to data synthesis and interpretation. In our research, we learned that middle schoolers crave independence, control, relevance, and realness. We ultimately delivered a city-builder game that empowers players to make decisions based on their analysis of real, age-appropriate city data.
my role
primary & secondary research, lofi & hifi wireframes , creation & maintainence of a cohesive symbols library in Sketch. clickable prototypes, usability testing protocol & moderation
secondary research
research methods
content inventory, literature review, competitive analysis, heuristic review
research plan summary
We conducted extensive research to validate the problem and discover opportunity areas within the data literacy sphere.
primary research
research methods
learning experience inventory, semi-structured interviews
research
understanding statistics, data, and distributions
What is statistics? What are distributions? How are distributions leveraged in the “real world”?
Being relatively inexperienced with the subject ourselves, my team spent some time reading and watching statistics lessons, We sought to understand the types of distributions and how to interpret them. Ultimately, this initial lack of experience really helped us empathize with first-time statistics learners.
primarry research
learning experience inventory
key research question
What makes learning a good, memorable experience?
method
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 to inform our design decisions.
key insights
Positive experiences (related to learning) were shaped by the following:
-
working toward and achieving a defined goal
-
personalized, relevant material
-
routine / clear expectations
-
positive reinforcement
-
good teamwork
-
highlighting successes over failures
Negative experiences (related to learning) were shaped by the following:
-
unclear language
-
demeaning language
-
unhelpful feedback
-
miscommunication
-
feeling excluded or ignored
-
feeling a lack of agency / choice
-
attitudebeing poisoned by a previous negative interaction
primary research
semi-structued interviews with middle school teachers
key research questions
What is it like to educate middle schoolers? What motivates them? What challenges do they face, both in and out of the classroom?
method
To answer these questions, we interviewed two middle school teachers: a 30-year veteran 8th grade math teacher and a 7th grade math and science teacher with 3 years experience. The teachers work at a Title 1 school in Raleigh North Carolina.
key insights
-
middle schoolers are pretty self-absorbed and prideful
-
this leads them to be very competitive with one another
-
they are mostly extrinsically motivated
-
-
they want to know "why"
-
their attention span is about 3 sentences
-
they enjoy learning experience that incorporate interactivity and tactility
-
they respond well to narrative
research synthesis
affinity clustering & concept mapping
question
How do we translate our research into actionable design goals?
method
To summarize and synthesize our data and align ourselves around some common design goals, I suggested that we constructed an affinity diagram. I created the following map of adolescent characteristics, behaviors, and motivations. My team then compiled each of our findings into a comprehensive affinity diagram in Miro.
key insights
When we began to cross-reference our findings from our research activities, a few themes emerged:
-
middle schoolers seek independence and control
-
they crave realness
-
they learn from experience
-
they are beginning to be self-reflective and self-aware of their roles in society
-
they rear hurt pride and embarrassment
research synthesis
developing a persona
Our research informed the development of Jordan, our target persona. Jordan is a 13 y/o female (she/her/hers) in 8th grade. She's an only child and her parents work late hours, leaving her to be relatively independent after school. She finds it difficult to connect with the statistics content she's taught in school because it lacks relevance to her life. She enjoys narrative-based subjects like theater and English classes more than subjects like math and science.
To ensure its accuracy, we asked the middle school teachers we'd interviews to validate this persona based on their personal experience.
research synthesis
as-is journey mapping
We sought to uncover pain points and opportunities for intervention within the context of our persona. To do so, we envisioned what a few days in Jordan's life might look like from her perspective.
actionizing our findings
identifying design opportunities & goals
My team chose to focus on the following design goals:
-
create a narrative-driven experience
-
contextualize distributions and data with a narrative-based experience
-
-
provide the user with a sense of agency
-
give students agency over their own learning and an opportunity to be in control
-
show them that data intepretation is not just about "right" and "wrong"
-
-
empower the user to think about data in a real-world context
-
empower students to interpret real data in various contexts
-
ideation & conceptualization
We considered multiple vehicles by which we could convey the concept of distributions. Guided by our design goals, we decided to make a city-builder game.
Open-source city data sets are easy to find. Not only could leverage this data to explain the data concepts to users in a real-world context, but we could also prompt users to make decisions (based on their interpretation of the data sets) and therefore see the impact those decisions might have on their city and its citizens. This we hoped, would give middle school players a sense of agency and independence that we learned they crave.
design challenges
finding an appropriate data set
Once we'd decided to move forward with the city game, we searched for data from which we could build it. Real-world data is never perfect like the data that's often used in textbooks. Therefore, It was challenging to find a data set that was both interesting and appropriate for our audience.
The following data set about whether or not people bike and/or walk (and if not, why) in Raleigh, NC fit the challenge.
For example, the game could prompt players to analyze the reasons people in each age groups don't walk or bike. They could then interpret the data and choose to build sidewalks, bike lanes etc to increase the number of people who choose to walk or bike. They could then see how their decision would affect their citizens and their city.
research synthesis
to-be journey mapping
To further frame our design goals, we created a to-be journey map showing how our intervention would improve Jordan's experience. After discovering our tool, she not only understands the concept of distributions, but she also recognizes a real-world connection and applies that knowledge to her own decision- making.
defining information architecture
site mapping & gameplay
We created the following site map to define our tool's information architecture and navigation. The tool would have two primary play modes:
1) Learn Modules
2) Build Challenges
Learn modules would explain the data concepts in a narrative format using real-world examples of data analysis. Users would make choices to see how those choices impact the data in the context of the Learn Module's concept. Completing a Learn Module would unlock Build Challenges specific to that module's content.
Build Challenges would provide opportunities for users to apply their newfound understanding of the data concepts to unlock new features (buildings, infrastructure etc) for their city. The user's choices in Build Challenges (made by analyzing real-world city data) would affect their city's "happiness score".
The city would function as the user's home screen, from which they could also access their happiness score, a "happiness feed" containing comments from their city's citizens, a record of completed modules, and settings.
prototyping
wireframing
One of my primary roles within my team was to design and maintain a cohesive UI design system. I worked in Sketch, frequently referencing the iOS Human Interface Guidelines.
One important principle that guided our wireframing process was the progressive disclosure of information. We noticed effective games leveraging this principle in our heuristic review at the beginning of the project. Therefore, we designed each screen to focus on one explanation or task. We hoped this would reduce the user's cognitive load and ultimately maintain their focus, information retention, and sense of accomplishment.
visual design
Upon launching the game, players are provided with a blank cityscape containing their city's Capitol building and a few trees. The player's ultimate goal is to earn new features (skyscrapers, houses, parks, roads & bike lanes etc.) for their city. We created a system of illustrations which would comprise the player's city. The illustrations would also be used to illustrate concepts in the Learn Modules and Build Challenges.
We learned in our research that middle schoolers are desperate to prove their independence and reject content that they perceive to be for children. We knew the visual design would have to strike a balance in age-appropriateness- fun, but not too kid-ish. These constraints led us to the following color scheme.
concept validation & usability testing
usability testing protocol
test objectives
Test participant interest in the gameplay & visuals
Test navigation & information architecture
test subject
a clickable prototype made with Invision
(This prototype is protected under an NDA.)
test methodology
Ask each student to think aloud as they navigate a Learn Module and complete a Build Challenge. We then asked them a few follow-up questions based on their individual experience.
participants
8 students at Centennial Middle School in Raleigh, North Carolina met with our team individually
test goals
Users should be able to complete one Learn Module and one Build Challenge. They should be able to earn the bike path by interpreting biking and walking data from their city.
usability testing
synthesis & reflection
I synthesized our results using the "rose, thorn, bud" format.
pain points (thorns)
-
The students generally navigated the game quite well. The navigational confusion that did occur occurred because the prototype was made with Invision's limited animation functionality.
-
Students brought their own preconceived biases to the game. Sometimes, they let these biases drive their reasoning rather than their interpretation of the data.
-
7 out of the 8 students answered the second Build question incorrectly. This question required a level of understanding and interpretation that students do not have at this stage in their education. We swapped this question out for an easier one.
things we should keep doing (roses)
Generally, the students responded positively to the game.
-
They liked the color scheme (regardless of gender identity)
-
Progressive disclosure of information kept the students focused.
things we should build on (buds)
-
The students requested more interactive elements
iteration
identifying feedback-driven design opportunities & goals
The students responded well overall to the game's navigation and visual design. Most changes we sought to make were related to the statistics content and its presentation.
We sought to make it clear that the data should be informing the player's decisions. One way we chose to do this was to increase the number of interactive elements that showed the cause-and-effect relationship between data interpretation and action.
We sought to start with extremely basic concepts to scaffold the player's understanding of the content and personal confidence
prototyping
motion design
Once we had fleshed out a new wireflow, we constructed a clickable animated prototype using Principle.
shhhhhhhh...
Our hi-fi wireframes, clickable prototypes, and final UI animation video are protected under an NDA. However, I can promise they're research-informed, designed to digital standards, and pretty cool to look at :)
presenting our work 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. People from across the SAS campus attended and live-streamed the presentation.
reflection & next steps
Ultimately, I'm really proud of my team and what we were able to accomplish in such a short period of time.
If we continue to develop Boomtown, our next big question is:
How might we encourage users to find and upload their own city data while integrating seamlessly into the gameplay?
acknowledgements
This project was a collaboration between myself and two of my talented classmates and friends: Cole Ferguson and Anna Schecterson.
Many thanks to the team at SAS for providing this opportunity and for being such a great partner.