Norton Checkout Design System

Norton Checkout Design System

As my team migrated existing experience flows to use the new Checkout experience, we needed a way to quickly conceptualise, design and build flows. The broader Product team was also in the process of migrating from Sketch to Figma, so it made sense to create our NortonLifeLock checkout design system in Figma. As we create many different flows we needed design assets we could use to quickly flesh out ideas and also build out experiences which the dev team could use as a source of truth.

As the original designer of our checkout it made sense for me to do the work. I worked from our original Sketch files, then extended the new Figma-based library to provide all the assets a designer might need to deliver new flows for desktop, tablet and mobile. I used the Atomic Design methodology (Brad Frost - Atomic Design) building out all the atoms, molecules, organisms and templates. I worked with the rest of the team to ensure the design system was robust enough to be useful without being too complex as to be confusing.

Tell The Story of Your Design

Templates or "Cards"

The "Cards" were a combination of the different UI elements into cohesive "Organisms" (from Brad Frost - Atomic Design) that covered all the different states of the Checkout. I wanted the designers to have access to these 'Organisms' as they form the foundation of the checkout and cover most states that would appear. It would make the task of creating any flow much quicker.

Tell The Story of Your Design

Forms Elements

I built out the form fields and various states including:

  • Inputs Fields

  • Inline Labels

  • Floating Labels

  • Form Status Feedback

  • Error States

  • Form Validation Feedback

  • Toggles and Custom Toggles

  • Drop Down Menus

  • Input Field Specifications

Tell The Story of Your Design

Typography

The fonts were mapped out to work with:

  • Norton Brand Guidelines

  • Optimum Legibility

  • Accessibility Compliance

  • Multiple Viewports (desktop, tablet and mobile)

Tell The Story of Your Design

Buttons

All primary and secondary buttons as well as Hover, Press, Disabled and Focus states were specified for Desktop and Mobile usage. As well as reflecting the Norton brand style, the buttons were optimised to clearly communicate clear user call-to-actions.

Tell The Story of Your Design

Colours

The colour palette mirrored the Norton brand palette and was only included in the Design System so any designer using it could find all the assets they needed in one place.

Some learnings

Design systems are integral to any company wanting to rapidly integrate, design and implement large quantities of user flows. As Norton has many flow variations, it proved useful to create the design system. It was really important to me that I create something that was actually useful and not just a box ticking exercise. Feedback from designers was positive and it was a practical tool that helped with rapid iterations of flows. Phew!