Boomtown

a mobile educational tool that introduces middle schoolers to data literacy concepts

fall 2019 · 10 weeks · UI DesIGN / UX Design




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. 




my role

primary & secondary research, lofi & hifi wireframes , creation & maintainence of a cohesive symbols library in Sketch. clickable prototypes, usability testing protocol 




secondary research 

literature review

key research questions

questions here

 

sources

sources here

 

key insights

insights here

 

 




secondary research 

analysis & heuristic review of existing tools

key research questions

questions here

 

tools we evaluated

tools here

key insights

insights here  

 

 

 




secondary research

research methods

literature review, competitive analysis, heuristic review, content inventory

 

My team split secondary research tasks and organized a comprehensive shared research findings report.  

 




research plan

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 




secondary research

literature review

key research questions

  • data literacy

    • what is the current state of data literacy in the United States?

    • how are data literacy concepts currently taught?

    • what does the middle school Common Core curriculum look like (for all subjects, not just statistics)

  • learning

    • what are the different learning styles?  What characteristics define each?

    • how do middle schoolers learn?

  • audience/users

    • what characteristics and demographics define Gen-Z?

    • what pop culture elements resonate with middle schoolers?

  • UX

    • what research exists around creating delightful learning experiences for middle schoolers?

    • what are some best practices and techniques for designing effective data visualizations?

  • gaming

    • what games do middle schoolers like?  Why?

    • what psychological theories / principles could we apply to an educational game?

 

 

key insights

  • data literacy

    • what is the current state of data literacy in the United States?

​​

secondary research

competitive analysis & heuristic review

key research questions

  • existing edutainment tools

    • what makes an edutainment tool engaging and easy to use?

  • existing data visualization tools

    • what makes data visualization tools easy to use and understand?  

  • existing games

    • what makes games engaging, especially for a middle school aud?  What makes them usable?

 

​​

secondary research

content inventory

key content 

  • distributions

    • what is statistics?

    • what are distributions?  

    • how are distributions used in the "real world"?

    • how do distributions apply to subjects that aren't math?

    • what data is available to use to demonstrate the functionality of the tool we create?

 

As I researched, I developed the following concept map about distributions.

 

 

​​




primary research

what makes learning a good experience?:

learning experience inventory

We asked each 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

  • attitude being poisoned by a previous negative interaction 

  • not being allowed to express or explain oneself

  • falling behind and having no clear path forward

 

Most people found it easier to recall negative experiences over positive ones.  We considered how a tool could emulate the attributes of positive experiences and prevent and mitigate the negative ones.  

 

primary research

what is it like to be a middle schooler?:

semi-structured interviews with middle school students

To really get into the heads of our tool's users, we interviewed middle school students.  We asked them about their personal experience with learning, their personal goals and dreams for the future, and their favorite devices and tools to use in and out of the classroom.  We aggregated our interviews with those of our classmates to identify patterns among them.  

primary research

what is it like to educate middle schoolers?:

semi-structured interview with middle school teachers

goals

 

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 Centennial Middle School, a Title 1 school in Raleigh North Carolina. We sought to uncover the social behaviors, motives, and learning challenges that they observe among their students. 

 

 

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 love pop culture, memes, and humor

  • they enjoy interactivity and tactility

  • they respond well to narrative




research synthesis

affinity clustering & concept mapping

Synthesizing our literature review and interviews, I created an affinity diagram of adolescent characteristics, behaviors, and motivations.​  ​




research synthesis

persona generation

Our research informed the development of Jordan, our target persona.  We validated this persona with experts (middle school teachers).  




research synthesis

as-is journey map




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

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.




research synthesis

to-be journey map




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.

 




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. 

 

 

 

 

 

 

defining information architecture

user task flow

We then created a detailed user flow from which we would begin
building wireframes.

 

 




prototyping

wireframing

I began wireframing the interface in Sketch, frequently referencing the iOS Human Interface Guidelines.  

 

One important principle that guided our wireframing process was the progressive disclosure of information.  Each screen was designed 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

We knew the visual design would have to strike a balance in age-appropriateness- fun, but not too kid-ish.  



usability testing

protocol

test objectives

test navigation & information architecture

test participant interest in the gameplay & visuals

 

test subject

a clickable prototype made with Invision

​​

test methodology

ask each student to think aloud as they navigate a Learn Module and complete a Build Challenge

​​

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.

 

the flow we tested is protected under an NDA. 




usability testing

synthesis & reflection

I synthesized our results using the "rose, thorn, bud" format.

 

pain points (thorns)

  • Most of the navigational confusion 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.  We had to make it clear that the data should be informing their decisions.

  • 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​

​​




usability testing

notable quotes from participants

"it makes you seem like you have power over your entire town"

 

"The colors are nice.  I like it"

 

"I wish I could touch it more"

 

"the majority is pretty straightforward- read the thing, click the button.  The first question goes straight to the graph and doesn't build a story"

 

"is this true?"

 

"Oh no! Could that actually happen?  I'm scared" 




NDA protected content

Our hi-fi wireframes, clickable prototypes, and final UI animation video are protected under an NDA.  I can promise they're super awesome though :)




presenting our work at SAS

My team had the opportunity to present a presentation of 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.  

 

 

let's chat about design :)

 

rachelpollockdesign@gmail.com

  • LinkedIn - Black Circle
  • Instagram - Black Circle

 

 

Copyright 2019 Rachel Pollock. All rights reserved.