Case Study

Cutting production time by 52% with a suite of AI tools for publishers

6 min read

Role

Lead Product Designer

Timeline

3 months

Team

3 Engineers, 1 COO

Skills

Design systems, product scaling, simplicity-first approach

Overview

Nota is an AI-enabled SaaS company leveling the journalism playing field by making the publishing process accessible for all newsrooms. On the brink of their beta launch, Nota reached out looking to solidify a strong foundation for their products. I created a design system to refresh their existing tools, and then extended it to new product offerings.

Nota wanted to revamp SUM and VID, and use the learnings to create even more tools

Problem

User issues

• Multiple tools and context switching
• Manual processes consumed creative time
• Inconsistent workflows disrupted productivity

Business goals

• Scale quickly
• Keep partners like Microsoft happy
• Grab market share

Opportunity

Build a system to quickly scale the suite of tools, penetrating the market and securing partnerships

Challenges

Ambiguity

It was up to me to set personal constraints, timelines and limits.

Defending design decisions

As the first design hire it was my job to defend UX practices.

Purple crystal ball representing future planning and anticipating user needs

Planning for the future

Designing a scalable system that could accommodate new AI tools and features while maintaining consistency and usability across an expanding product ecosystem.

Solution

Scalable

I created building blocks for a system that Nota could use to build future tools.

Scalable interface design demonstrating unified navigation patterns and consistent layout structure across the Nota platform

Consistent

Certain elements remain the same from tool to tool, fostering usability and streamlining workflows.

Consistent interface design demonstrating unified navigation patterns and standardized layout structure across different Nota tools

Intuitive

Simplicity and consistency are the bedrock of this reliable product, leading to an intuitive experience.

The Nota component library demonstrating consistent blue interactive elements, typography system, form states, and layout structure that maintains design consistency across all tools.

Assessing initial tools

I started by conducting a comprehensive audit of Nota's existing tools to understand their strengths, weaknesses, and user workflows. This helped me identify common patterns and opportunities for unification.

Original Nota SUM tool interface showing basic layout with left navigation, central text input area, and right sidebar with output settings before the redesign

Original SUM tool interface showing the basic layout and functionality before the comprehensive redesign and design system implementation.

Original Nota VID tool interface showing video slide editor with purple text overlay and styling options in the right sidebar before the redesign

Original VID tool interface demonstrating the video creation workflow and styling options available in the pre-redesign version.

Key findings

• Each tool had different navigation patterns and visual styles
• Users struggled to understand relationships between tools
• Common UI elements were implemented inconsistently

Piecing together flows

To align stakeholders, developers and other designers, I divided all of Nota's products into reusable sections, or “Blocks”. This created a shared language everyone could use– making communication about products easier. This top-level framework also gave structure to the development of future products.

Block 1 user flow diagram showing the simplified progression from Home Dashboard with Tools/Sum interface to Editor, with the Setup Wizard serving as a bridge between sections

In some cases, users could go directly from a tool's Home into the Editor section.

Block 2 user flow diagram showing detailed progression from Home Dashboard through Tools/Vid to the comprehensive Setup Wizard with multiple content collection steps and interstitial pop-ups, leading to the Editor

User starts on the Tool's homepage, fills out Setup Wizard, ends on Editor page.

Block 3 user flow diagram showing transition between different editors using the comprehensive Setup Wizard, demonstrating how users can segue from one Editor to another through the wizard process

There were some instances where users had to segue from one Editor to another, which is where the setup wizard came in handy.

Establishing a component library

After defining the big picture, I set out on creating the rudimentary components that make up each page. I pride myself on making design systems that are a balance of simplicity, intentionality, and flexibility.

The Nota component library demonstrating consistent blue interactive elements, typography system, form states, and layout structure that maintains design consistency across all tools.

Design system principles

• Simplicity: Single color for all interactive elements reduces cognitive load
• Intentionality: Every component serves a specific purpose in the user journey
• Flexibility: Components adapt across different tools while maintaining consistency
• Accessibility: Clear visual hierarchy and sufficient color contrast

A set of scalable templates

I used the new design system to define a set of cross-product templated pages, lending even more consistency to the product ecosystem.

Homepage templates demonstrating consistent layout structure across different tools while maintaining tool-specific functionality and content.

Editor templates showcasing how the design system scales across different content creation workflows while maintaining consistent interaction patterns and visual hierarchy.

Creating consistency

Within each template, each tool has the same four main sections: Main Navigation, Action Nav, Main Content, and Output Settings.

Live example demonstrating the consistent four-section layout, with the SUM tool showing its Main Navigation, Action Nav, Main Content, and Output Settings.

Tool 1: SUM

SUM is a time-saving tool for editorial, marketing and content teams that generates headlines, summaries, top quotes, key points, SEO keywords and categories. I designed a card-based UI that makes it easy for users to interact with the generated content.

SUM tool interface showing the complete workflow from text input to AI-generated headlines, summaries, and key points displayed in an intuitive card-based layout

The SUM tool interface demonstrating the card-based UI design with generated headlines, article summary, and key points, along with customizable output settings.

Tool 2: VID

VID generates text and imagery, allowing users to create multi-purpose videos. I leveraged the positives and negatives of comparative and competitive tools to enhance the product's user experience.

VID tool interface showing text-to-video generation with image selection panel, video preview, and customizable output settings for creating multi-purpose videos

The VID tool interface featuring text-to-video generation, AI image selection, and comprehensive output settings for creating engaging video content.

Tool 3: NEWSLETTER

NEWSLETTER pulls from SUM's technology to generate emails from multiple content sources. As the third product I designed in the suite, I followed existing patterns set out by SUM and VID as users were already familiar with those blueprints.

The NEWSLETTER tool interface demonstrating multi-source content aggregation, real-time newsletter preview, brand customization options, and streamlined export functionality following established design patterns.