Nova Design System

Audience & Requirements

I conducted a series of workshops with the product team, including a domain expert, to develop a clear and concise understanding of the product’s audience and their needs.

Audience

A deep dive into the domain revealed three distinct seller types, each with varying end users and needs: large sellers organised hierarchically, managing thousands of products across marketplaces and countries; small-to-medium-sized businesses with up to a dozen operatives managing a few hundred products; and consulting agencies authorised by sellers to manage their portfolios. Each seller type includes executive roles with managerial needs, line managers with reporting needs, and operatives who analyse and act on their seller data.

Requirements

With different user types defined, we moved on to developing detailed personas to better understand individual requirements. Three broad categories emerged: organisational needs, to group agents and accounts into teams with a clear hierarchy and responsibilities; analytical needs, to capture a quick overview of KPIs to understand global performance, with supporting filters and drill-downs; and reporting needs, to create and consume reports by managers within the company or for external clients.

Wireframing the User Journey

Following the product definition phase, I conducted additional workshops to chalk out various user journeys through the product. This included organisational sign-up and login flows, account setup including connecting to marketplaces and APIs, and a comprehensive global performance page for a overview of key KPI metrics. We sketched out various data views to display metrics across time, considered interactive filtering options across products, marketplaces, and date ranges, and a summary view to list top sellers, over- and under-performers. By iterating through the wireframes and refining them based on feedback, we were able to validate the design choices against the data, product needs, and the intended user experience.

Building a Design System

With a firm foundation set by the wireframes, I undertook the task of building a comprehensive design system for Nova. This involved creating an inventory of reusable components, defining the visual language as a set of design tokens, collaborating with the development team to rapidly iterate on the UI components, and finally documenting design guidelines for using these components in a shared style guide.

UI Inventory

After a quick study of existing design systems within the e-commerce space, particularly Polaris by Shopify, I deconstructed the wireframes into a list of reusable components. These were grouped as well-understood basic components like buttons and dropdowns, as well as custom components such as data tables and charts specific to our use case. The UI inventory served as both a guide and a checklist throughout the design and development process.

Design Tokens

To develop a distinct visual language for Nova, I created a set of design tokens to specify colours, spacing, and typography details. Colours were chosen to maintain good readability and sufficient contrast while keeping the visual emphasis on the data elements. A fairly tight spacing and typography scale was chosen to cater to the information density of the UI. These tokens were then configured into Tailwind – the CSS framework used by the team – and documented for reference.

Component Development

Finally, we moved on to developing the UI components in React and CSS. Instead of relying on handing over high-fidelity designs to the developers, we chose a more integrated approach with design and development working together in rapid iterations, designing directly in the browser. This helped us surface and address design issues early on in the process, significantly cut down development time, and reduce any duplication of effort.

Style Guide

To ensure the finalised components are documented and used as per the design intent, I helped create a style guide with detailed examples, usage information, and suggested best practices. The style guide was published internally and kept up-to-date throughout the design and development process, serving as a measure of progress and a central point for gathering feedback from within and outside the development team.