Gist AI Widget Library

00 Context

Gist Answers is an embeddable AI answer engine that publishers integrate into their websites through customizable widgets. The Widget Library, part of the widget management page, allows publishers to preview and manage these widgets. However, the original experience lacked a consistent design pattern across the system.

01 Problem

There was no consistent design standard for widget cards across the platform. Instead of showing actual widget designs, the previews relied on decorative graphics, making it difficult for users to understand how a widget would look before selecting it. This inconsistency also made it challenging for the design team to maintain a cohesive visual identity across the system.

02 Goal

My goal was to establish clear design guidelines for widget preview cards and create a consistent visual system aligned with the existing Gist Answers brand. This included standardizing card layouts, preview presentation, and information hierarchy to improve usability and visual consistency across the platform.

03 Exploration

04 Final experience

Design guideline

05 Outcome

The card structure and interactions were adopted and implemented in the new Gist Answers widget management page. The new design established a clearer standard for widget configurations and specifications across different AI answer widgets.