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

Tools

Figma

Team

Case Team Image

Emma McCann

Product Designer
Case Team Image

Ben Gerst

COO
Case Team Image

Nota

Developers

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.

Pictured: Wireframes for an Onboarding "Block"

Establishing a design system

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.

Creating consistency with templates

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

Pictured: SUM’s “Editor” page

1. Side Navigation: used to navigate from product to product
2. Action Bar: houses the main, overarching buttons that apply to the whole page
3. Main Content: where the bulk of editing takes place
4. Output Panel: holds parameters that effect the final output of the page

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.