The Challenge
Designers engaged in Information Design projects currently face a challenge: the absence of comprehensive IBM guidelines that embody the CIO organization's distinctive brand identity, stylistic elements, and core principles. Consequently, the data visualizations and infographics crafted by designers often lack uniformity and fail to resonate with IBM's established branding. This divergence from consistency not only undermines design unity but also diminishes the overall quality of user interactions with these assets, resulting in a less-than-optimal experience.
The project aimed to develop a unified approach to information design by providing designers with official reference materials to create quality work that represents the CIO organization.
Before jumping into solutions, I set out to better understand the as-is state of users working on Information Design projects. With this goal in mind, I ran user interviews with designers and non-designers working on various projects whose data visualization skill levels ranged from novice to expert.
After one month of user research interviews, key pain points and user needs were uncovered:
Need for guidance
Users need information design principles to guide designers in creating high-quality, accurate, and engaging visualizations.Desire for knowledge
Unskilled data analysis and visualizations users want to learn best practices and tools to create visualizations.Lack of cohesion
Existing dashboards, visualizations, and infographics do not align with CIO organization look and feel. Utilizing these tools results in a disjointed, non-cohesive experience for end-users.
Based on the findings shown above, I began sketching ideas for a solution that would help solve their frustrations in creating information design pieces without proper guidance and a design system.
There were key design goals I wanted to be represented in this initial sketching and wireframing phase:
Design must meet the needs of all data visualization skill levels
- From novice to expert, every user should be able to create a visualization using theteam’s branding.
It must be able to teach something to users
- Users will gain knowledge from following the guide.
- Users will be able to apply learnings to current and future work.Users must be able to quickly find the guidance they need
- The content in the guide should be easy to locate and access by returning users.
Usability testing
Navigation for the guidance needed to be clear and easy for new and returning users to interact with. I ran an A/B test with sponsor users to optimize how we display the content and to improve the navigation of the page.
We presented users with two design options:
Option A - Shows chart classifications by chart type (e.g. bar, line, scatter plot)
Option B - Shows chart classifications by chart function (e.g. comparison, distribution, composition).
Users preferred the classification shown in option B because it is easier to navigate and educational. This categorization teaches users about the different functions first, putting functionality at the forefront of our guidance.
After finalizing option B as the users’ preferred navigation and categorization content layout, I set out to test how the style guide as a whole would perform on actual projects.
To do this, I created a set of data visualization prompts for users to simulate the creation of their own visualizations. Users were asked to complete the prompts utilizing a data visualization tool of their choice (Excel, PPT, or Sketch) and the CIO Design guidance.
As a result of the user testing, 100% of sponsor users were able to correctly inject the correct CIO color palettes and graphical elements styles into their visualizations creating a unified information design vision.
To validate these findings, I designed a simple overview of the user’s net sales and tickets sold, the option to export reports for these data points, and removed a couple of features discussed in our ‘Card Sorting’ session.
After launching to users, we started to see a difference immediately. Designers and non-designers alike expressed the usefulness of this guidance but more importantly, we saw a massive improvement in their design outputs.
The Information Design section on the CIO Design Guide consists of three main tabs:
Overview
This page is an introduction to the world of Information Design. It provides users with a high-level explanation of what the design area is, main resources, application examples, and key principles to follow.Charts and Graphs
The goal of this page is to provide users with information on how to choose the best visualization for their data. We chose to categorize common visualizations by function (comparison, composition, relationship, etc.) instead of by chart type (line charts, bar charts, pie charts, etc..) as a result of user feedback. This categorization teaches users about the different functions first, putting functionality at the forefront of our guidance.Style and Color
This page outlines the CIO color palettes and graphical element (chart title, legend, data labels) styles. We wanted our team's visualizations to reflect the team's branding, personality, and tone by utilizing engaging colors and graphical elements styles. I believe that visualizations should not sacrifice aesthetics for functionality, these two can co-exist on a graph and, in fact, are both needed to create an engaging and accurate visualization.