Case StudyRecon
From AI-Generated to AI-Ready Design System
Recon is a all-around marketing tool that helps businesses manage their marketing campaigns, track their performance, and optimize their marketing strategies. The orginial design was fully AI-generated. This resulted in poor visual consistency.
Overview
AI-ready design system for visual consistency.
The orginial design was fully AI-generated. This resulted in poor visual consistency, no clear navigation, random spacing and layouts, no uniformed colors, buttons, headlines, paragraphs and states.
My role was to to create a design system that will force the AI not to think about the design and focus on the content.
What I Did
I started by auditing the existing dashboard. What stood out right away is the AI-generated feeling of it. The dashboard had multiple tools that were not grouped properly in the navigation and the page structure was not created so it makes sense for the user. Pages were leading to other pages with no clear refrence to where you are currently in the product.
The second thing I noticed is the lack of visual consistency. The dashboard had multiple colors, buttons, headlines, paragraphs and states that were not uniformed. This made the dashboard feel unprofessional and hard to use.
So the redesign focused focused on creating a clear navigation sturcure of the product and grouping the tools together in a way that makes sense for the user. After that the focus was on the design system, so it can be implemented in the product and the AI can focus on the content and not the design. We set-up a system where the AI tools would generates screens in Figma with implemented design tokens and componenets, so we can change double check or change anything that is needed before handing it off to the development team.
Design Decisions
Complex marketing tools become visually heavy fast. Since there are a lot of graphs, expandables, drop-downs, lists and other information heavy components, the design needed to focus on packaging the information in a way that is easy to scan and understand.
The main desicison here was to firstly group the information as efficiently as possible and create a clear hiearchy. The second desicion was to create a design system that will easily guide the user trough the interface trough the use of colors, typography, spacing and other visual elements.
Lastly I worked on dark mode, since the original version was hard to read and the colors were the shades of the original branding.
Outcome
- A unified, fleshed-out design system that can be applied across the product.
- A dashboard that is easier to scan and understand, with a clear hierarchy and visual consistency.
- A dark mode that is easier to read and more visually appealing than the original version.
- Components and design tokens that can be used to generate new screens in Figma, allowing the AI to focus on content rather than design.
- A library in Figma that makes it easy to change and update the design system as needed, without having to redo the entire product.
Old Google Ads page dark
New Google Ads page dark
Old Google Ads page light
New Google Ads page light
Old Analytics page
New Analytics page
Old Page Explorer dashboard
New Page Explorer dashboard
Future Steps
- Expand the design system into a broader component library for more product areas and workflows.
- Create reusable templates for analytics dashboards, customer reports, and team admin experiences.
- Add more interaction states and accessibility validation to support product-wide consistency.
- Continue testing the system in real product flows to improve speed, usability, and adoption across teams.
- Use the system as a foundation for future AI-assisted product work and faster implementation cycles.