Crafting Visualizations Designathon

When you are in digital transformation consulting, a funny thing happens: you start seeing patterns emerge across clients in different industries and apps of different contexts. Our UX team noticed one such pattern: we are getting a lot of sales calls and clients that need visualizations of data. As companies are tracking more data, there is a growing need to better understand that data — and visualization is a critical tool to help.

If you can see the data correctly, you can find out what is actionable, find patterns, and get a better view into what your data really means.

So we decided to have a designathon (like a hackathon but for design) around visualizing data. The idea was to share our process of thinking about data and how we could “see” data differently.

Designathon Ground Rules

Here were our simple ground rules for participating designers. (Note: “Modites” are what we call ourselves, the people of Modus.)

The Challenge: try to look at the data in a new way. Try to come up with a way of seeing the data that brings a new perspective to the user.

Suggested Data: Modites. Assume you can get any data about your fellow Modites — how long they’ve been working with a tool, their location, their skills, their work (e.g. projects at Modus), their favorite food or color — whatever you can dream, and apply that to your visualizations. (Escape clause: if you have another visualization idea, please go for it!). This is about process, not necessarily design.

Here are a few examples of what we came up with.

• JD Jones: Modite Slack Communication Graph
• Carlos Madrid: Modite Coffee Consumption
• Dmytryo Kovalenko: Energy Generation
• Drew Griffith: Augmented Reality Visualization
• Sofia Mora: Modites of Modusland

JD Jones: Modite Slack Communication Graph

JD: Based on hypothetical data, this visualization shows how often Modites communicate with one another on Slack. Each node represents a Modite. The lines connecting the nodes (edges) represent how often those two Modites message each other on Slack. The thicker the edge, the more messages sent.

In this first visualization, a node’s size depends on its “betweenness centrality”. To keep it simple, a Modite will have a higher betweenness centrality if they are a bridge between two groups. In the example below, Jonathan Van Dalen frequently messages a small group of Modites that never message the larger group.

In this second visualization, a node’s size depends on its degree. In this case, degree represents the number of messages the Modite has received and sent. In this example, Drew Falkman has a higher degree than others, signifying that he’s super chatty 😉

While this data is purely hypothetical, social network graphs like this help us understand how information moves through systems. Such a graph could also help us understand how cross functional and collaborative a company is. If engineers only message engineers and designers only message designers, you could invest in fostering a more cross functional culture.

Carlos Madrid: Modite Coffee Consumption

Carlos: The idea was to do an interactive web experiment to drive traffic to our website using data about Modities’ coffee consumption across the world. After estimating how much coffee each Modite consumes on a daily basis through a simple poll (google forms, interactive web form), we could represent coffee consumption with particles in space (1 particle = 1 cup of coffee).

This exercise would allow us to imagine and predict how much coffee our teams would require to fuel their creativity through a year in order to deliver outstanding and innovative products to our clients. At the same time, we could also break down consumption by country, continent, project and even time of year, allowing us to show our audience not only how much coffee a company like Modus consumes but also where our talents are located and in which countries we’d be available to provide our services.

The idea is to create a graphic that illustrates not just the data, but also the nature of the data: which is a volume of liquid. This type of animation inspires us to see the data not as just numbers and trajectory, but also see its true nature: a liquid consumable.

This could also lead to hosting design talks or sessions with different guests to talk about what we do over a digital coffee, to discuss creativity on different business topics, design practices and remote working.

Dmytryo Kovalenko (DK): Energy Generation

DK: The idea was to create an app that helps people/organizations track, control and manage the amount of solar energy produced and consumed in their household/office/factories etc.

Many countries limit the amount of solar energy produced by people/organizations due to technical (political, economical) constraints, so it becomes important to control and manage energy flow to keep it within limits. It’s also possible to earn money by producing more energy than needed and feeding it back to the electric system.

Imagine an Internet of Things, or IoT, device that can be connected to an existing electrical system and allow users to control their solar energy production and consumption remotely from Mobile, Desktop and/or Web App (sort of like a Nest Thermostat for solar energy).

Drew Griffith: Augmented Reality Visualization

Drew: This exploratory prototype focused on visualizing possible future technologies. In this case we chose augmented reality to see how we might be able to mesh visual design, motion tracking, and 3d together.

The scope of this prototype was to display details about each Modite’s time zone, availability, and software proficiencies, while providing deeper dive modules for them to showcase their current projects, blog posts, and other social information.

Aside from creating the visuals for this prototype, this exploration was mainly centered around gaining insights into the level of effort required when creating motion tracked prototypes. Video quality and hand steadiness proved to be quite challenging while working through the motion tracking tools. We needed to repeat filming and scene attempts for After Effects to even register tracking points. Once the points stuck though, we were able to create a reusable template from the 3d motion tracked layers. This template allows us to quickly prototype interactions and animations on the 2d animated composition layers with ease. Going forward, we can experiment with the future of interface design and visualizations existing outside of fixed screens.

Sofia Mora: Modites of Modusland

Sofia: The idea behind “Modites of Modusland” was to create a fun way to display hypothetical data about Modus and its employees. My focus was to exhibit how you can show all different types of data in multiple ways. For example, charts, maps, progress bars, etc. I decided to display all of the data in a dashboard, with the idea that it could continue to grow and progress with new information every day.

As Modus is always transforming and growing, this would be a good way to keep up with all the changes and new exciting things happening in the company.

Conclusion

Showing data in meaningful and fun ways is challenging and always a learning experience, but overall we had a great time working on these and discussing all the possibilities.