Case Study Banner

Summary

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.

My task was to devise the blueprint for four of their new products. I created a design system, wireframes, and high-fidelity, dev-ready mockups in Figma.

Design System
Style Guide
Product Design
UX/UI Design

Details

Role

Lead Product Designer

Duration

January 2023 - March 2023

Website

heynota.com

Tools

Figma

Team

Case Team Image

Emma McCann

Product Designer
Case Team Image

Ben Gerst

COO
Case Team Image

Nota

Developers

Challenges

Research Image

Defending Design

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

Research Image

Ambiguity

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

Research Image

Future Forecasting

How do you create a design system for a rapidly changing industry that's evolving at the speed of light: AI?

Solution

I created a scalable system from which to build consistent interfaces– leading to an intuitive experience for publishers.

Scalable

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

Solution Image

Consistent

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

Solution Image

Intuitive

Simplicity and consistency are the bedrock of this reliable product.

Solution Image

Assessing initial tools

Nota had two demo versions of their tools “SUM” and “VID”. What initially stood out to me was a lack of consistency from tool to tool regarding positioning of panels. There was no underlying system linking together the tools.

Defining an overarching taxonomy

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.

Onboarding

Solution Image

Tool "Homepage"

Solution Image

Setup Wizard

Solution Image

Tool "Editors"

Solution Image

Piecing together flows

I used the Block framework to piece together user workflows.

Tool to Editor

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

Solution Image

Tool to Editor (via Wizard)

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

Solution Image

Editor to Editor

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

Solution Image

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.

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.

Homepages

Editors

Creating consistency

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

Product 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.

Product 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.

Product 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.

A growing arsenal

Nota’s Suite of AI Tools has now grown to 7. All tools maintain the initial blueprint originally laid out.

Results

52%

Reduction in
content creation time

22%

Increase in search referrals
after using SUM

15%

Increase in page views
after using SUM

Let's bring your next vision to life!

emmaisdesigning@gmail.com
©2025 Emma McCann