Designing the user interface and user experience for two new artificial intelligence products.

MY ROLE

⎌

Developing interaction patterns

◳

UI design and experience architecture

✐

Ideation, wireframes and sketching

⊠

Prototyping

OUTLINE

Notion (now Valorie), was an AI service disrupting traditional strategy, research and communications. As the Lead Designer in the early-stage AI startup, I led the design of the Beta product in a series of Agile sprints. The focus of the project was to translate emerging AI capabilities into a coherent experience for two new products, Stream and Strategy.

Client / Notion

CHALLENGE

AI has the power to analyse huge amounts of data to develop insights for organisational leaders. How can insights developed by AI be communicated to organisational leaders with simplicity and clarity?

STREAM

Stream was a SaaS web app driven by AI that empowered decision-makers and their staff to discover, share and collaborate on the latest global trends. The product was designed to balance automation with user control, where organisations tailored their stream for their individual business needs. Over time, content dynamically shifted with trends surfaced by the AI. Built for people on the go, the design required a mobile first approach.

→

Sample Mobile UI in Figma

I developed screens for a tiered pricing structure, with each tier requiring different flows. A map was developed for the product, clarifying the different user flows, screens, eDMs and other communication touchpoints that would be required.

A scalable design system was developed in Figma to support the consistent development of screens. Standardised UI components and patterns ensured consistency across iterations, and streamlined handover to developers.

Image showing the system developed in Figma.

As AI is a new concept to users, a walkthrough flow was developed to onboard people to the product.

Image showing the onboarding process within Figma.

Working with developers, I ensured a high standard of design implementation and iterated designs based on technical feedback.

Image showing the entire tiered product within Figma.

STRATEGY

Notion Strategy was a digital product tailored for a business specific need. Online reports focused on an organisation's chosen key topic, uncovering strategic themes and initiatives. With a focus on clear and concise graphics, the interactivity of the design allowed people to explore the detail behind the data visualisations without overwhelming detail. Striking a balance between just enough detail versus too much was central to the design.

Sample Desktop UI in Figma

↓

LEARNINGS

AI makes it possible to communicate insights from huge amounts of data. The value of design is to communicate with clarity.

Close collaboration between design and engineering was an interative process. Using Jira and Confluence, we worked across multiple continents creating tickets to release changes gradually in an agile sprint process.