Designing a scalable analytics experience for AI answers

00 Context

What does ProRata AI do?

ProRata AI is an AI technology company building products that help publishers and brands participate in the AI ecosystem through attribution, engagement, and monetization.

The company has two product areas: Gist Answers and Gist GEO.

Among those, I worked on Gist Answers, an embeddable AI answer engine that publishers can integrate into their websites. Powered by Gen AI, it provides users with contextual answers while attributing the original content sources. For publishers, Gist Answers creates a deeper content discovery experience while opening new opportunities for engagement and monetization.

Gist Answer console

As a core part of the Gist Answer platform, the Gist Answer Console helps both publishing partners and internal teams understand how AI-powered answers perform across the network.

For publishing partners, it provides visibility into user engagement, content usage, and performance metrics, helping them understand the value and impact of their content within AI-generated answers. For internal teams, it serves as a centralized tool to monitor partner content performance, identify usage patterns, and uncover opportunities to improve the AI answer experience.

01 UXR & Problem

A growing Gist Answer console lacked a consistent system

Feedback summary

02 Competitive analysis

Analysis of complex analytics dashboards

To identify opportunities to improve Gist analytics dashboard, I conducted a competitive analysis to understand how other products handle complex data in ways that help users easily understand and compare diverse metrics.

Amplitude left-aligns labels and right-aligns numbers for easy scanning and comparison. Consistent decimal formatting helps users compare values at a glance.

(WCAG table column alignment tips)

Stripe uses line charts to show financial trends over time and distinct colors to differentiate payment statuses, making complex data easier to interpret.

OpenAI uses line and bar charts to display usage metrics, with shared date, filter, and download controls consistently placed at the top for easy access across pages.

Design question

How might we make complex reporting easier to navigate, scan, and compare while establishing a shared visual language across Gist analytics?

Leading analytics products rely on shared visual language—aligned tables, purposeful charts, and global controls. We wanted to bring that consistency to Gist Answers so partners spend less time decoding the dashboard and more time understanding their data.

03 Goal

Start with the content & information hierarchy — three main approaches

08 Accessibility

01 · Color system

How can chart colors stay readable for everyone?

Charts carried most of the meaning in each report, so every color had to stay distinguishable—against the canvas and against each other—including for people with low color vision.

Color 3 #F58975 · Color 5 #7EACF1

Indistinguishable

Pair contrast

1.04:1

Color 1 #1760CC · Color 4 #F6C687

Distinguishable

Pair contrast

3.73:1

Designed for the grayscale color contrast

When scanning a chart, users match lines to the legend by color. Two pairs in our palette had nearly identical luminance, so they read as the same tone in grayscale or with color vision deficiency.

I checked every chart color against WCAG 1.4.11 (3:1 for graphical objects), flagged the look-alike pairs, and made sure meaning never relied on color alone.

1. 01

   Check contrast against the canvas

   Each chart color is measured against white; colors below 3:1 are reserved for non-essential fills.

2. 02

   Separate look-alike pairs

   Colors with near-identical luminance are never placed next to each other in the same chart.

3. 03

   Never rely on color alone

   Legends, direct labels, and tooltips repeat the series name so the chart reads without color.

---

02 · Responsive design

How can dense analytics stay legible on any screen?

Designed breakpoints

The original tables kept shrinking to fit the viewport, so headers truncated and numbers wrapped mid-value—hardest to read exactly when the screen got smaller.

I set five breakpoints with a 12-column grid and minimum widths, so content reflows (WCAG 1.4.10) and scrolls past its minimum instead of compressing text.

1. 01

   Five breakpoints on one 12-column grid

   Ultra wide to Mobile share the same grid; only spans, gutters, and margins change.

2. 02

   Minimum widths over shrinking

   Content holds a minimum width and scrolls horizontally instead of compressing text.

3. 03

   Navigation yields space first

   At Compact, the side nav collapses to an icon rail so data keeps its room.

---

03 · Typography hierarchy

How can we make report pages readable for screen readers?

H1 · 40px

Body · 16px

H4 · 24px

Caption · 12px

Data · 14px

• H1 · 40px
• Body · 16px
• H4 · 24px
• Caption · 12px
• Data · 14px

Designed the type scale

Headings were sized by eye, so levels were skipped and some sections looked more important than the page title. Screen readers rely on heading levels to navigate, so visual size and structure had to match.

1. 01

   One H1 per page, no skipped levels

   Headings describe structure; smaller text uses Body or Caption, not a lower heading.

2. 02

   Shift the whole ladder for dense screens

   Compact H1 takes H2's size, H2 takes H3's—never shrink H1 alone.

3. 03

   A dedicated style for data

   Dense/Data (14px, compact leading) keeps table cells and list rows tight but legible.

09 Usability testing

Conducted usability testing with internal users and partners

10 Design handoff

Handed off the design into build-ready specs

11 Impact

A shared reporting system that scales across partner analytics

• 3 Core Reports Standardized

  Unified navigation, table layouts, and visualization patterns across key reporting pages.

• 5 Responsive Breakpoints

  Defined responsive behaviors and minimum widths to preserve readability across different screen sizes.

• Accessibility-Focused Design

  Refined chart color contrast, typography hierarchy, and responsive layouts using WCAG guidelines.

12 Reflection

Looking back

• Communication & Collaboration

  Working on this project reinforced that being a product designer requires strong communication and collaboration across teams with different priorities and areas of expertise.

  Since the dashboard was designed for publishing partners, I worked closely with the partner team to understand their reporting needs and translate design decisions into language that was clear and relevant to their goals. When handing off designs to engineering, I documented design and component specifications in an organized way to reduce ambiguity during implementation.

  This experience taught me that being a good product designer on a team is not just about communicating with other designers, but also about bridging the gap between teams and providing the information each stakeholder needs to move the product forward.

• Accessibility

  This project allowed me to explore accessibility at a deeper level than in my previous design work. I came to understand that the fundamental purpose of designing for accessibility is not simply about meeting design standards, but about creating experiences that people can use regardless of their physical conditions.

  Throughout the redesign, I applied accessibility principles by refining chart color contrast to improve data distinguishability and redefining the typography hierarchy to support clearer information structure and screen reader navigation.

  This experience helped me recognize that accessibility should not be treated as an additional design consideration, but as a fundamental part of creating inclusive and usable products.

• Problem solving

  I believe the fundamental purpose of every project is to address user pain points. To create helpful solutions, it's essential to first understand users' pain points and identify the underlying causes.

  Working on the complex analytics dashboard taught me the importance of taking a more systematic approach to problem-solving. Through user interviews, I identified usability challenges; through competitive analysis, I explored opportunities for improvement; and through multiple design iterations, I refined solutions based on those insights.

  This experience made me realize that a good solution is not just about solving individual usability issues, but about finding the intersecting pain points across multiple users and understanding how different parts of a product work together to create a cohesive and scalable user experience.