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 SUM tool interface showing the basic layout and functionality before the comprehensive redesign and design system implementation.

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

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.

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

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

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

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.

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.

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.

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.

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

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.

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

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.

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

This project taught me the importance of balancing consistency with flexibility. While it was crucial to create a unified experience, each tool still needed to serve its unique purpose effectively.

I also learned that involving the development team early in the design system creation process was essential for successful implementation. Their technical insights helped shape components that were both design-friendly and development-efficient.

Finally, the project reinforced the value of comprehensive user research in understanding how people actually use multiple tools within a platform, rather than focusing on individual tool experiences in isolation.