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.
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.
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.
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
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.
.png)
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.
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.
