Infogram editor: miscellaneous

Overview

Infogram is a B2B platform for interactive data visualization. I was its sole designer from 2022 to 2025. This isn't a single case study but an overview of some of the things I worked on, from the editing experience and charts to the design system.
Team
  • 1 product designer (me)
My role
  • UX/UI
  • Design system

I joined Infogram in 2022, when the product had just been revived after a few years of maintenance, with no active development. I had few Figma files to work with, mostly ported from Photoshop. I spent several months building a UI kit on the side while also shipping features. I rebuilt all the components in Figma to match what existed in code, reviewed the typography scale and colors, introduced semantic tokens, verified accessibility and added new icons. This gave me and the developers a reliable and consistent baseline to work with.

Button color tokens renamed from old names to a rest and pressed naming scheme
Introducing semantic color tokens.
Contrast matrix of text colors against backgrounds with AA and AAA results
Every text and background pairing checked against AA and AAA contrast.
Infogram UI kit components in Figma: color, font and grid panels, toolbars, inputs, checkboxes and buttons
Components rebuilt in Figma to match what existed in code.

The existing color picker was limited to flat, solid colors, so the goal was to give users more flexibility. We needed to introduce gradients, opacity control, and favorite colors. I started with competitor research, then explored alternatives, collaborated with a developer, wrote technical specs covering every state, edge case and interaction, and ran a few usability tests with users.

Color picker before and after the redesign: brand colors, theme colors and a custom color on the left; brand kit colors, favorite colors, solid and gradient tabs on the right
Before and after.
Exploration of color picker layouts with brand colors, theme colors, solid fill, linear gradient and custom color options
Exploring alternative layouts.
Color picker specs with annotations on focus, opacity background, scrolling palettes and color tile states
Some of the specs for developers.
Color picker variations: no gradients, no opacity, solid fill, gradient and free account
Some of the states.

The goal was to review the signup flow to increase user activation. I started by analyzing the current state: mapping what different users experienced from each entry point (landing page, marketing pages, promotions and more) and checking how many users dropped off at every step of the flow. With the PM, we organized a competitor analysis workshop, and with the UX researcher we ran 7 user interviews. Based on the learnings, I made a few proposals, updated the UI, and worked together with an engineer to prepare the AB test. Unexpectedly, activation didn’t move, but bookings increased by 37%.

Signup journeys mapped step by step for Infogram, Canva, Visme, Piktochart, Datawrapper, Flourish and Venngage, each with an emotion curve
Mapping the signup experience until activation, for Infogram and six competitors.
Signup flow before and after: the sign up form and the organization and role questions
Before and after: the signup form and the onboarding questions.
Signup flow, the remaining steps before and after: role, plan selection and free templates
Before and after: plan selection and the free templates page.

Work in progress: this article is still being written, and more projects will be added soon.

More case studies

Swoop socials Infogram dashboard Digital case book Bluebie CorkBrute Whataaabout SOL75