Data visualization experiement: education and inequality

Goals

  • Complete a data visualization with a new tool
  • Discover questions raised by the correlation in the data

Background

Of the many things that influence education, one general category is "inequality." Racial and gender inequality contribute to the lack of diversity in tech. Another kind of inequality that's caught the world's and America's attention is income inequality. 

Since the total difference between top and bottom is so large, an easier way to evaluate inequality is the Gini coefficient metric, which measures relative wealth. It's not a measure of absolute wealth, absolute poverty, or changes in income over a lifetime; it's a snapshot of how unequal the distribution is.

I matched Gini data and educational attainment data from 2009 to test out a new data visualization tool, Google Fusion Tables. Looking at just the Gini data applied to each U.S. state, we see that some "rich" states are more unequal than some "poor" states, but that that isn't always the case. Since this was an exercise in visualization, I didn't dig into the data more, but it would be informative to tease out the relationship between Gini and the absolute per capita income for population percentiles.

Although per capita income, income inequality, and spending on education are not the same thing (I'm from Florida, which has low spending on education in part because of reluctance to raise taxes), I wanted to see if there was anything in the data that suggested a correlation between Gini and educational outcomes.

There was.

But this isn't more than an associatino. If the visualization tool offered more advanced analysis and visualization like a 3D scatter plot, we could tease out other metrics like per capita spending, parents' education, family income, etc.. This correlation raises more questions than it answers, though, like

  1. Why are the lower completion rates so low? And for which segments of the population?
  2. What clusters are there within the data?
  3. What is the correlation between poverty, education and inequality by county?

High school or more education

Bachelors or more education

Advanced degrees

More questions

One interesting generalization: several of the states with higher Gini coefficients have higher advanced degree completion rates compared to the rest of the country. 

  1. Are the states with more advanced degrees more unequal because people with advanced degrees tend to make more?
  2. Are the states with fewer advanced degrees more equal compared to their neighbors because everyone makes less?
  3. What is the quality and availability of higher education in states with more inequality?
  4. What are the non-economic barriers to educational equality in these states?
  5. What besides the quality and availability of higher education in each state could explain the differences in educational attainment rates?

More data that would be insightful include longitudinal changes in inequality, migration, demographic shifts, and state taxes. Ultimately, this is a huge issue, one that an afternoon of research and a hunch for a correlation won't solve.

TOOL EVALUATION

Google Fusion Tables didn't require installing new software, but it had very limited views. Maybe I just didn't understand the documentation for how to get different views, and Google doesn't offer many video tutorials.

More time was spent corralling the data and formatting it than actually visualizing it. One frustration I had with Google Fusion Tables was that it didn't let me format the data the way I wanted to, and in the visualizations, a lot of unwanted data shows up even though I tried to change the display settings in several menus.

 The next tools I'd like to try are Tableau Public and CartoDB, which have more options and produce better visualizations, and more engaged communities.

Career Pivots, or: How I Learned to Stop Worrying and Love My Teaching Experience

Three years ago, I was an English as a Second Language teacher at a university in San Francisco. I was excited that my degree helped me get a position at a university, and I was excited that I wasn’t teaching at a language school anymore. Three years ago, I thought that learning Mandarin or Korean was the key to my future. I was already planning to move abroad and teach English, and maybe to use my degree in Linguistics to teach at foreign universities. Then, three years ago, I fell in love with User Experience Design.

I was a teaching assistant in a UX Design course at my university and realized that UX Design and the methods it encompasses are more than important; they’re necessary for products that people will want to use. My passion grew so strong that I quit teaching to join a 3 month personal accelerator called Tradecraft to focus on my design skills and career. At the time, I thought that I’d have to learn a whole different mindset to be a successful designer. I learned, though, through all the project work with companies that teaching developed some useful traits that lead to effectiveness in design.

1

Empathy

I’m no stranger to cultural difference. My mother is from Jamaica, and I was born and raised in Miami, which is one of the more ethnically diverse city and hub of international business and culture. Similarly, English as a Second Language teachers have to connect with large, diverse groups of individuals — people who are just as interesting, boring, entertaining, and frustrating to you as you are to them. As a teacher, you have to give a shit about each individual in your class, their goals, their problems and their strange habits on any given day. 

The root of empathy is not only being aware that you are working with others, but caring about them. If these were people on the street, you could be sympathetic to them. You’re with your students for months, though, so you know what they’re feeling with psychic precision. You know when they’re tired, frustrated, distracted, or homesick, and you want to help them. People will ask you how you know. Do you “sense” things? Are you trained in emotional intelligence? Usually, you just talk to your students and try to understand their story.

Designers, like teachers, need to understand their users better than users understand themselves. Empathy in design is about caring and therefore understanding who your work is for. It’s impossible to design a good experience with apathy.

Being relevant to your audience

Especially when you’re teaching writing or public speaking, you focus on the audience. You have your students ask themselves: Who are you speaking to? What are you telling them? Why the fuck should they care? And you ask yourself those same questions that you asked your students every day before you get up in front of them. You have to design your activities and lessons to communicate what’s useful, but more importantly, why it’s relevant. You spend a lot of time connecting ideas to what’s happened in your class, but also to things outside of your class because all of your students have lives as unique as your own. When you understand how your students relate to your class, you can invest your time and energy on activities that help them instead of on some new technique you just read about that they’ll be indifferent to. For example, when you know that your class is a safe space in a foreign university for some of your students, but a perceived waste of time and money for others, you can frame it differently for both audiences at the same time. It can be a chance to practice new skills and to improve the ones that they think they’ve mastered, but they won’t see it that way till you tell them.

Design shows people what’s relevant and why. If you don’t consider your audience, then why the fuck should they care?

3

Read between the lines

When you’re talking with native speakers of your language, it’s hard enough to communicate without misunderstanding. There’s body language, tone of voice, facial microexpressions, and your ex’s sarcasm. When you’re teaching non-native speakers of your language, especially when it’s a group who don’t all speak the same native language, you have to be psychic. You have to make assumptions about why they’re saying something to figure out what they’re saying. That way, you can help them communicate with other teachers, plus you have magic to translate the joke that your student said in French-English to the Korean-English or Chinese-English that your other students understand. 

A large part of reading between the lines is assuming that people are cooperating with you in the conversation. If that fails, you ask for clarification. This helps you have productive conversations because it removes the doubts about the relevance and purpose behind each other’s comments. For example, if your Asian students ask your Middle Eastern students about Muslim women covering their heads in public, maybe it’s because they don’t know much about Islam and would like to know more. Maybe it’s also an opportunity for your otherwise reticent Muslim students to share their expertise and beliefs. And if the students were actually criticizing each others’ culture, then it’s a good thing you just changed the conversation into a learning experience.

When you understand the relationship between what people say, what they mean, and what it can be interpreted to mean, you have the power to turn arguments into useful conversations.

4

Leadership is not about you

I think the best explanation of what leadership is to you as a teacher is:

“Leadership is the art of getting someone else to do something you want done because he wants to do it.” —Pres. Dwight D. Eisenhower

Often, the class you’re teaching is not the reason why someone is taking your class. Your class is required, so you have to figure out why it’s required, what value the students might get from your class, and how you can help them recognize and appreciate that value. You tie your assignments to their goals, and if that fails, to the course’s goals. Another way to say it:

“If you want to build a ship, don’t drum up the men to gather wood, divide the work, and give orders. Instead, teach them to yearn for the vast and endless sea.” — Antoine de Saint-Exupéry

Your job as a teacher requires you to motivate other individuals. It involves balancing intrinsic motivators like being part of a group and feeling accomplishment with extrinsic motivators like grades and even praise. 

Another part of leadership in teaching is recognizing other people’s strengths and weaknesses because you’re a person-optimizer. You can leverage someone’s strengths to improve their weaknesses and build advanced skills on top of foundational skills. You help people who are learning to speak better by tapping into their love of watching The Big Bang Theory (Why, god, do all of them love Big Bang Theory?). You draw out people’s narrative skills by having them tell you about something that happened to a classmate. And when you’ve helped someone with lower-order behaviors (spelling, pronunciation, verb tenses, etc.), you can help them integrate their current skills into higher-order behaviors (telling stories, persuading, presenting). As the semester goes on, you feel both accomplished and somber because you’ve made yourself progressively less necessary, and you hope they’ll keep improving after you.

Your success often comes from making the people you work with successful, perhaps as much as from when you get shit done.

5

Constant personal and professional development

You read about new research on how people learn, about new activities for your classroom, and about new technologies and platforms like flipped classrooms and Massive Open Online Courses. You try, or would like to try, a lot of them. You’re not interested in the next big thing; you have educational values, and you want to maximize your time spent on effective activities. It’s your Teacher’s Pareto Principle: let’s say you think that 80% of the insights students have don’t come from lecturing, but from when you answer questions that come up in class while they’re working on a project, but you only spend 20% of your time doing that. Of course you’re going to try everything you can to reorganize your activities to optimize your use of class time. And every new thing you try is an experiment, so you’re excited. Even if a new activity doesn’t go as well as planned, you can reflect to learn something useful about that lesson, your class, and yourself.

To return to the topic of motivation, but this time from a personal perspective: you know what’s disappointing? When people are struggling and don’t understand you even though you’re trying really hard to reach them. You know what’s fucking brilliant? That moment in flow when they do. This combined sense of purpose, progress, and competence is why you’re motivated as a teacher, and it’s why you’re self-motivated to learn.

You have to figure out what you value and strive for your personal interpretation of success. Experiment.

6

Finally, being comfortable changing roles

Teachers have a unique relationship that involves a conflict between the power of the position and an intimate relationship that comes from being so close to people for so long. Do you mind if students add you on Facebook ? Will you go to their birthday party barbecue? What do you say when you run into them under a redwood tree in Muir Woods? And because you meet so many people, you get to see all they ways they relate to you. Do they think you’re strict? Pedantic? Funny? Attentive? It’s hard for the average person to balance who they are with how other people see them, but you have the experience of being many things to many people. 

“You’re born naked, and the rest is drag.” — Ru Paul

You are funny and serious. You eat dinner with students — after all the papers have been graded. You teach, and you listen when your students teach you. Your identity is more nuanced than a rigid persona, and you can recognize that in other people, so you know that even though you have professional relationships, the people you work with matter, too.

Relationships and authenticity are more important than titles or positions.

Ultimately, Reflection:

 

Both teaching and design require a diverse set of skills and more agility than a long-tailed cat in a room full of rocking chairs. They require action with intention. I can’t say which intentions are inherently better than others. I can say, though, that because my main intention is effectiveness, I can focus on the people I help instead of myself or my position. I also can’t say that I’m the most effective designer or teacher. I can say, though, that I am always learning to be more effective through reflection. While teaching, I learned that reflecting helped me focus on the root causes of what was effective and why instead of getting stuck in a routine of lessons I’d taught before. When I started designing, I realized how important that same reflection was for managing my time and energy for creative work, collaboration, and presenting work. In the spirit of community, I share some questions that have helped me:

  1. Who does your work communicate with? What are their goals? What is the context for your work? And why the fuck should your audience care about it?
  2. What is effective, and in what situations? How do you know it’s effective?
  3. What do you value in the work that you do? Why? What assumptions are you making about the sources of value? How can you increase the amount of effort you spend on what you think brings value? (the Pareto Principle again)

I hope these questions can be as useful to others as they have been for me. And if you have more great questions, dear reader, please send them to me. And please attach cat gifs.

Clarke Hyrne is a UX designer in San Francisco. This post previously appeared on his website. Critiques, comments, and discussion are welcome and invited.

 

Giving feelings to ideas through sketchnotes

We started with ways to modify letters to different effects.

Then modifying letter size and shape for a phrase (I chose the quote that will become my next tattoo).

04161513.JPG

And put it all together to try to express concepts just by playing with typography.

04161512.JPG

Next: concrete nouns

And abstract nouns. Can you guess them? Maybe if you tell me, I'll remember.

04161510.JPG

Basic expressions and body shapes.

04161508.JPG

More realistic faces (4 shapes + shirts + hair + basic expressions we already saw)

04161507.JPG

Practice: a TED talk by Julian Treasure. I realized while doing it that I fucked up, so then...

While still listening, I switched to this version. Maybe one day I'll be half as good as Kate.

A comparison feature for Yelp

Regardless of your favorite city, the San Francisco Bay Area is an epicurean paradise. It's also a tourist trap and a bustling commercial hub, as well as host to several major universities and home to many transplants. So when your friends and family are visiting, you try to find the best place to eat that's nearby and within your price range, and Yelp is probably the easiest way to find reviews.

Finding great places is easy; deciding on which one is best is impossible.

comparison-feature.gif


User behavior captured in a persona

Yelp-Persona-Michelle

For this project, I looked up user data from several analytics websites to try to find out who the power users of Yelp were, and the preliminary research showed it was college-educated Asian women in major cities. There's certainly room for more research, but it gives us enough to do some user research on and come up with Michelle the Maven who's out with friends on the weekend and doesn't want to waste time or money finding the best place to eat.

To do this, she would benefit from a feature that would fit into the current help experience after the built-in filter that would allow her to compare several restaurants but without the cognitive strain of remembering all of them.

Instead of reading full listings and trying to remember what was important from all of them, this feature operates on the same principle as bubble sort/Bracketology: instead of comparing several restaurants by holding them in memory simultaneously, compare them one by one and pick the best of the two, and the last one remaining must be the best.

 Some results of user research for most important information and mental models for comparison visualizations

Some results of user research for most important information and mental models for comparison visualizations


Our track lead Kate Rutter suggested that since the use case was of one person trying to organize which restaurant her group of friends should go to, I should play with letting multiple people take part in the decision process. Like Congress.

"There’s supposed to be three branches of government: Executive, judicial and spiteful inertia." -- Stephen Colbert

This act of deciding, then, can be broken down into comparison and consensus.

Since solving spiteful inertia... I mean group decision making is a bit outside the bounds of Yelp, I went back to the persona of Michelle the Maven who's wants to make a decision quickly and confidently while walking with her friends. There are two Android conventions that can help her. First, taking the Filter button out of the top right corner and putting it into a navigation drawer that can be opened by swiping from left to right would let her navigate with one thumb, since she'd probably be using a larger Android device. This drawer would also have room for a Compare button, and it would be logical to put them together since both features apply (initially) to a list.

Second, while selecting restaurants to compare from the list, a contextual action bar would respond to input and let her know how much work she'll be giving herself later.

Inspiration and research

To compare many things quickly, I looked at apps and websites for vehicles, computer hardware, hotels, food, and came back to the idea of dating apps for filtering/making quick decisions. The OKCupid app has a swipe to keep vs swipe to dismiss (email and messaging apps do, as well); Tinder is probably a bit more famous for it, however. For someone trying to make quick decisions, though, it's less useful to keep things in mind for comparison, so for now, the feature would only use swiping to decide against a restaurant.

These final exploratory sketches were used to make wireframes to see if the information wanted by the users who I interviewed could still be visible on-screen.

new-features-wireframes2.gif

This drawer menu and 2 screens fit into the normal restaurant finding process between/beside filtering the list and viewing full restaurant listings.

All of these together would expand on the current features and information present in Yelp to offer new functionality that accounts for major user behavior in a way that allowing swiping between full listings doesn't.

 

 

Now it all makes sense.

NEXT STEPS

I chose for the first half of the project to try to limit the feature since I'd heard about how easy it can be to find that a UX project you're working on is getting out of scope. When Kate Rutter suggested that I was unnecessarily restricting myself, I realized just how narrow my choices must have seemed at the time. In the future, I'll definitely hype up my research and ideation process more when I pitch.

Also, as a technological limitation, using a PC has kept me from using a lot of Mac-only tools (in part due to my reluctance to set up a virtual machine to use things like Sketch and Facebook Origami). Photoshop, Illustrator, and InVision helped me get what I have of the prototype, and I think what I was able to produce so  quickly is clear. I plan to try adding gifs to InVision as well as learning Framer JS for more nuanced animations, in part because interaction design, animations, and interactive visualizations are some areas where my personal and professional interests are aligned.

Finally, I'm going to reach out to Yelp (and Feedly for my previous project) and talk to their product design team and get feedback about the project and moving forward with either of them.

Exploring Feedly on Android

Feedly, released in 2008, is an RSS reader that was among those highlighted on the blog Lifehacker when Google shut down its own popular reader in 2013. It allows users to aggregate blogs’ and other websites’ RSS feeds so they can browse and save what they read in one central location. Since I’m an avid user of their desktop webapp, I wanted to take a look at the browsing experience on Android.

Usability tests

I conducted guerrilla usability tests in San Francisco. To test the app, I looked for users who had read blogs and other content that updates daily/weekly on their phones.

 

With spoken consent, I captured screen recordings and took notes on how clear it was to complete the following common RSS reader tasks:

  • Add a feed

"So, what website did you visit last week that had a really interesting article or post? How would you remember a website like that so you can read it again next time you open the app instead of your browser?"

  • Mark a story as read or unread

"So each page has a lot of articles, and you’ve read some of them, but not all of them. How would you keep track of what you’ve seen and what you haven’t?"

  • Save a story for later

"Let’s say you really like a story and you want to come back and see it later. What would you do?"

  • Share a story

"You read a story and you think a friend would really like it. How would you get them to read it?"

  • Make a collection of stories

"What’s a topic you’re really interested in? If there are a lot of things you want to see on that subject, how would you make it easier to read them all at once?"

After the first few usability assessments, I rephrased the discussion guide and tasks to make them more open-ended. I tested on my Nexus 5, and tried to make screen recordings using a few different programs, eventually finding Rec. (paid), which allowed me to track finger movement and external sounds for up to 20 minutes.

Synthesis: 2x2 Matrix

After the  usability sessions, I reviewed my videos and notes and used post-its to visually represent my findings

And mapped out major pain points.

And arranged the 4 pain points based on ease of implementation and confusion to the participants.

 

Analysis

Four usability issues emerged:

  1. Participants had trouble adding feeds the first time
  2. Participants did not understand when they had completed an action
  3. Participants had trouble making collections/folders
  4. Participants were frustrated by menu navigation

Problem 1: Participants had trouble adding feeds

One thing a couple of participants mentioned was that they didn't want to use the magnifying glass icon because to them it suggested a search for content they'd already added.

"The magnifying glass is something I'd use to search content. This is like discovery hidden behind search" — User

Once they tried it, they saw that it offered several categories, and then blogs within categories. A couple of the more technical participants noticed the "+" symbol, but some of the others did not. Also, when accessing the same categories from the "Add website" option inside the hamburger menu, users assumed that tapping on the row of the blog name instead of just the "+" would add the blog to their feed. This led to confusion later when they couldn't find the blogs they added.

"Okay, so I have to press the "+" or something?"— User

Most of the users didn't notice whether or not they successfully subscribed to something, which is tied to problem number 2 below.

Proposed Solutions

Since the "Add website" button sends users to the search menu already, the users thought tapping the whole row would add the website instead of just the "+" symbol.

Another option would be an "Add/Added" or "Subscribe/Subscribed" button instead of the "+". However, since most users explained that they expected tapping the row to add, perhaps a confirmation (like the lit-up + symbol) before sending them out of the menu would be better than adding a button. That desire for confirmation leads us to the second usability issue found.

 

Problem 2: Participants did not understand when they had completed an action


The problem with adding feeds is linked to the larger issue of feedback. Participants didn't always know when they'd completed an action since they didn't often receive feedback from the app. The two most salient pieces of feedback were for the long press save when not inside the article, or when tapping the bookmark icon when inside an article. Outside of these, the difference between states was not easy to see for many participants.

"I see that I bookmarked it, but I can't tell the difference between read and unread."— User

Proposed Solutions

 The existing Saved/Unsaved popup that appears ONLY in the middle of the screen, regardless of what it's applying to.

The existing Saved/Unsaved popup that appears ONLY in the middle of the screen, regardless of what it's applying to.

The pop-up notification is used for Saved/Unsaved and keeping things unread. It is locked to the middle of the screen, but could be more effective if moved closer to what's being modified. It could also be used in the the previous problem of adding feeds to let users know when they've successfully added a feed.

Feedback2.gif

Also, while reading, the difference in read and unread could be made more salient by darkening the images to accompany the darkened headline text of the read articles. The bookmark icon could also be brighter to allow users to skim more efficiently.

 

Problem 3: Participants had trouble adding collections/folders

Users thought that everything from tags to filters to "edit content" would allow them some of the functionality of grouping. On the desktop, you can add new collections by clicking on Organize under the existing collections. The app, however, does not offer this feature.

 "I mean how much frustration is a person supposed to put up with? ... I mean, I can keep looking. I just wasn't sure if there was like a certain amount of frustration you're like 'Oh, that's too much frustration... Nobody should have to deal with that kind of...'"— User

Feedly on the desktop gives you the option to organize from the menu below collections

Users looked around the menus in circles for a way to make new collections and either gave up or added new blogs. They thought the answer might be in the hamburger menu, but:

"The hamburger button is not the answer. There's nothing good in there." — User

Proposed Solutions

Allow users to organize their collections in the app from the hamburger menu. Also, since tags appear separately in this menu, putting tags inside their own accordion menu would reduce visual clutter.

 

 

Problem 4: Participants were frustrated by menu navigation

Some users intuitively looked into the menus when lost. As mentioned before, they didn't trust the magnifying glass icon, but instinctively looked under the ellipsis menu and the hamburger menu. A couple of users said that they expected some long-press contextual menus, but that using the long-press for saving/bookmarking was intuitive. The final participant wanted to be able to swipe out the left and right menus since in most views the left and right swipe gestures didn't seem to do anything. A couple of users weren't sure what each menu did, however, and just kept tapping on the menus in a loop.

 

Proposed Solutions

Feedly offers many options and many views for reading blogs. To provide so many features and be as uncluttered as it is, it requires a lot of menus. Menu navigation is an area with many different and often competing conventions, however.

One easy solution would be to change the magnifying glass icon, which many participants found misleading. Aside from that, however, other solutions are outside of scope of this test.

 

Next Steps

Since Android is a very diverse ecosystem of devices with different UIs, and since a lot of people in the groups I was targeting in San Francisco use iOS devices, there is certainly room to recruit separate groups to test. I would love to test my hypotheses with more devices and more users. Think, build, check!

I would also like to spend time comparing feed reader behavior with email and social media because most participants mentioned that they have become accustomed to the gestures of other apps like Gmail and Facebook (e.g., swiping left and right), and many mentioned that they usually get their news through social media these days.

 

I am not affiliated with Feedly. This review is put forth unsolicited; it was an exploratory learning opportunity done to develop my UX design skills.