Simplifying Infogram dashboard for Admins

Problem

Years of growth left Infogram’s dashboard information architecture confusing. Even the team lost track of where some settings lived, and users with an Admin role in particular struggled to manage their organizations.
Team
  • 1 product designer and de facto PM (me)
  • 3 engineers
  • 1 UX researcher
  • 1 QA
My role
  • Spearheaded the initiative end-to-end
  • Identified the opportunity
  • UX/UI
  • Participated in user interviews
  • Prepared AB testing and release planning
Impact
+12% YoY clicks on previously hidden dashboard sections, and a noticeably faster, easier-to-navigate experience.
Infogram dashboard after the redesign
Infogram dashboard before the redesign
Screenshot of folder panel
Folders were the main way for users to organize their content, but they were not given an equally important real estate, and were hard to reach on smaller screens.
Screenshot of the team switcher
The team switcher UI had a lot of room for improvement.
Screenshot of usability issue with account settings
The popover menu on the right depended on the team selector on the left, and only half of its items behaved predictably. The rest changed contextually, showing a different page depending on the selected team.
Screenshot of a dashboard usability issue collected from user interviews
Users could see a team info and settings from within another team. A higher Organization view was needed (and requested by Admins).
Screenshot of a dashboard visibility issue
Some pages had horizontal tabs which, combined with gradients and darker stripes, resulted in a chaotic, heavy-looking UI. Customer success reported users missing the tabs entirely.
Information architecture
A horizontal navigation allows more space for the folders and projects used by all users, while moving sections like Analytics and Branding, used only by Admins, into a secondary position.
Information architecture
This is a simplified viz of the IA. Each team’s settings were reachable from any team, and profile was tied to the private library, unavailable anywhere else. The proposal separates concerns: each workspace with its own settings, profile always available, and a new Organization section.
Screenshot of the loading library
Performance: users with hundreds of projects were experiencing slow library load times.
Current vs. updated folders panel, showing nested subfolders
Usability: we’d added subfolders, so the folders panel needed more room.
Screenshots of competitors
Future-proofing: AI had arrived, and the platform needed to be ready to evolve alongside it. Many competitors already had a big AI input field their dashboards.
Screenshot of the landing page, before and after
Branding: marketing was updating the landing pages and moving away from the blue gradients, so the dashboard needed a refresh too, to avoid looking inconsistent and unprofessional.
Hide the pain Harold meme
Team morale: developers were frustrated dealing with the legacy code holding the dashboard together.
Team switcher states, scroll behavior, and spacing details
Documenting team switcher states, scroll behavior, and spacing details
Filter bar and project row states, including long names, active filters, and bulk selection
Filter bar and project row states, including long names, active filters, and bulk selection
Project thumbnail states: default, loading, long names and tags, and downgraded-user limits
Project thumbnail states: default, loading, long names and tags, and downgraded-user limits
Account settings edit flow, from editing the email to confirming with a password
Account settings edit flow: editing the email requires confirming with a password before the change can be saved
The four-week phased release plan, from admin interviews to full release
The four-week phased release plan, from admin interviews to full release
Screenshot of dashboard banner
We gave existing users a “grace period”, allowing them to switch back to the old dashboard if needed. Plus a quick way to leave feedback with an in-app Hotjar survey.
Infogram menu after the redesign
Infogram menu before the redesign
Infogram analytics page after the redesign
Infogram analytics page before the redesign
Infogram account settings after the redesign
Infogram account settings before the redesign
Infogram billing page after the redesign
Infogram billing page before the redesign
Infogram Organization view after the redesign
Infogram Organization view before the redesign

More case studies

Swoop socials Bluebie CorkBrute Whataaabout SOL75