Personality from Data

The core question that drove Five Labs was "can internal personality traits be predicted by external user data?" If we paint in broad enough strokes, and use enough data, we can paint a general picture of personality. Facebook, for many people, serves an extensive source of data, and having experience working with the API in the past , it was a natural fit as a data source.

But, data alone isn't enough to create a compelling experience. Going from wall posts to personality is not a direct path.

Challenges

Five Labs faced three big design challenges.

1. How can personality be visualized?
2. How can the personality generation process be visualized?
3. How can the generated personality visualization be shared?

1. Visualizing Personality

Five Labs is a data visualization tool. Designing the visualization was my first priority, before any though would be given to the rest of the app. So, I felt it was paramount to design an iconic and immediately recognizable visualization that had heart. One that you could attach emotion to. One you could own. Similar, perhaps, to a fingerprint.

To determine what visualization to choice, it was important to start with the data. The current scientific literature on personality favors bucketing personality into "The Big Five" personality traits . In many ways the visualization task is simple: visualize five dimensions.

All visualizations involve some tradeoffs, and the visualization choice is inextricably tied to the problem aimed to be solved. Visualization choices also trigger certain emotions in a general audience. As with all forms of design, we need to think about the goals and the impact it has on a user.

For many visualizations (some would argue all), communicating the underlying data efficiently as possible with as little ink as possible is the prime directive. In these cases, visualizations should favor using position along a common scale, or length. Direction, area, curvature, are less efficient are harder to process dimensions.

Constraints

For Five Labs, data accuracy or data ink efficiency is the least of our concerns. This was the case for two reasons.

First, the data we are visualizing is nebulous - personality data is somewhat subjective and very unlike verifiable, independently observed data like temperature or caffeine content. (See my post on visualizing nebulous data for more).

Second, in the case of this consumer app, the feelings generated by the visualization are more important than the data that underlies it. From a previous project, I found that many people immediately lose interest when they see something that looks "too scientific", as they assume it will be too hard to understand.

Result

The result was a radar chart. There is a dotted line in the center of the chart which indicates the "average", or 50%, of a value for a trait. This can be a iconic, easily recognizable shape that is unique and can be "owned," like a fingerprint.

Radar charts are great in small multiples (many instances of the visualization next to each other) because the shape is unique and you can quickly make comparisons. However, they are not always great as a stand alone visualization. It is more difficult to parse the underlying data than with a bar chart.

While there are visualization tradeoffs, I found that compared to bar charts, radar charts elicited a more powerful emotional response. Unless you're familiar with the field of data visualization, there's a good chance you've rarely seen one. The novelty will cause you to pause.

Often, bar charts are a better visualization choice. But the goal of Five Labs was to capture your attention, to provide a compelling visual hook. Radar charts are uncommon enough that we could make them iconic to our product. They also can be "owned" in a way that bar chart can't. It's hard to emotionally, uniquely identify with a bar chart; it's easier to attach yourself to the shape of a radar chart.

Labels

The shape of the radar chart captures your attention and can be owned. But, after the mental pre-attentive processing stage, we need to communicate what the chart means. After doing user interviews and trying a variety of label formats, the final form was "X% Trait."

The percentage is a relative value, and like the radar chart itself, the meaning can be initially unclear. However, like the radar chart, it communicates more effectively in metaphor.

It is easy to imagine what it means if I am "23% Extroverted" or if I am "80% Extroverted." We all can imagine what our personality is like, and what a "100% Extroverted" person is like, and we can easily make the comparison. We all have a different idea of what exactly this means, but it's a close enough approximation to be universal. With something so simple as "X%", we can hook into existing metaphors. By doing so, we do not need to create new ones.

Unique Shapes

Because shapes are unique, displaying multiple visualizations together works well. To help further communicate the uniqueness, and to instill social proof, the personality shapes of all the user's friends are displayed next to the user.

We also show the personalities of public figures (generated via a corpus of public text) to further provide context and validation. Friends are sorted by frequency of interaction on Facebook. This heuristic ends up being very effective at surfacing the most relevant people in your life.

Visualization Choice - Conclusion

The goal was to create an iconic visualization that could be unique and which you could form an emotional connection. Radar charts are uncommon enough that they can create a good hook, and unique enough that they can encourage ownership.

2. Communicating Personality Generation

Simply providing a visualization was not enough. For the radar chart to be meaningful, it had to be believed.

Because we were pulling data from Facebook, we faced a serious constraint. Before we could show your personality profile, we had to wait for the request to finish and for our backend to process it.

So, there were two challenges: first, how do we create a pleasant experience while your data is being loaded; second, how do we communicate what is happening?

The solution was to use the loading process as a teaching opportunity.

Metaphors

I was inspired by the initial level design of Megaman X (a breakdown by Egoraptor can be found here). In this game, the player is introduced to all the concepts of the game, one by one, in the first few minutes. How could the design philosophies of Megaman X be applied to Five Lab's loading bar?

Detailing exactly how the personality generation process works would bore most users, but we can communicate it using your own data and by using metaphors. If users can mentally grasp how the system works at a higher level, it's not necessary to know the exact inner-workings (but they are available for "power" users).

Steps

The following images describe each step of the loading process. It is not an accurate realtime description of what is actually going: the facbeook data fetching process is nearly always finished within the first few seconds, the personality generation algorithm takes on average less than a second to complete, and once it is finished we immediately know what the shape looks like. However, none of this matters to the product. What is important is that they understand, metaphorically, what is happening.

Spending a significant amount of time on the Facebook steps was important. Over 50 percent of the "loading bar progress" is dedicated solely to Facebook before we introduce anything unique to Five Labs. The delay provided users with a chance to further tie Facebook's brand with our product, fostering more trust. But what is more important is the connection metaphor.

People are familiar with the concept of waiting for Facebook to load before they can see their wall posts. So, we made this process explicit and dragged it out, using the connection metaphor to communicate what our own application was doing.

Lastly, as in the level design of Megaman, we introduced each part of the process separately, starting with something they are intimately familiar with before venturing into unknown territory (how Five Labs works). Now that users are grounded in a familiar place, we can build on those concepts to gradually reveal our product's complexity.

The first step shown for Five Labs is a continuation of the previous step of cycled wall posts. The step of highlighting words looks nearly identical, as it's just a remix of the previous step. Ideally, users should think something like "Five Labs has my wall posts," to "Five labs is now analyzing my posts. I understand." By keeping the steps similar in appearance, we can smoothly transition into explaining what Five Labs is doing with that analysis.

We then show a radar chart. It starts as a single shape, and begins to grow and morph into the final shape. By transitioning the growth of the shape, it is similar to an egg hatching. Even if users don't understand what the shape means, they understand that is is being generated from their data. Any by showing it grow, we create a level of emotional anticipation, which leads to identification and ownership. If the final version of the shape were immediately shown, all these benefits would be nonexistent.

Now that the user understands and (ideally) identifies with their generated personality shape, we transition them into the app.

All together now

The entire process takes roughly 10 seconds from landing on the page to landing in the app.

I disdain explicit "user tours." This is quite different. Five Labs's loading process is not an instruction manual on how to use the app. Rather, it communicates, at a metaphorical level, how the personality generation process works. Only by understanding it can the user identify with it.

After the user has successfully understood and identified with their generated personality, the last challenge was to provide a way for them to share their shape.

3. Sharing Your Personality

Because so many people identified with their personality shape, they wanted to share it. And because so many people shared it, more people were led to create their own and share theirs. Five Labs was my first successful "viral" product experience, but it was no accident.

Sharing was critical to the app's success. Each user could view and share a public version of their own personality, as well as sharing a comparison between yourself and another user. OG Images were generated for each page, ensuring all shared links contained an image with the user's own personality shape. There were many challenges around sharing, but one of the biggest design challenges was to make the sharing experience richer by telling a story.

The radar chart itself is a powerful hook. Users can tell themselves a story easily enough by their own internal image of themselves to the generated values. However, the shape alone may not be compelling enough to someone who has not experienced the onboarding process nor understands how the personality generation flow works. They don't yet identify with it.

To further the story telling ability of the share pages, a name and shape with labels of personality trait values was not enough. It was often hard to tell a story from a shape alone. Something else was needed was to help identification.

The solution was to use existing metaphors. Adjectives were generated based on the generated personality. It's not immediately clear what "46% Extroverted" may mean if you don't know the person; however, it is quite clear what it means if we say they are "reserved." These descriptors were not designed to be the focus of attention. Rather, they existed to provide more context and meaning to your generated personality.

By providing metaphors, such as calling Barack Obama "assertive", "disciplined", and "analytical", we can more easily tell a story. Most users landed on Five Labs through a share page, so it was critical that they be hooked enough to generate their own shape. And if the story told by the share page is believable, you'll be enticed to generate your own "story."

Conclusion

Because of all the effort put into the visual design and the user experience design, people trusted the application. Because we were able to hook into existing metaphors, people made comparisons between themselves and others, and the vast majority of users believed their personality visualization them.

Many other challenges existed and Five Labs would not be possible without my co-founder, and our visual designer, developer, and design intern. There were many other challenges, such as ensuring the app had no downtime, was fast, generated OG images, and looked good on most mobile devices. Because of our stellar team, overcoming them was no problem. But, many of these other challenges were not unique to the problem of visualizing personality.

Not only did Five Labs deliver on its goal of visualizing personalities, it was a viral success. The definitive answer to the question "can internal personality traits be predicted by external user data?" is still unclear, but millions of our users believed we did with Five Labs.