Lookout turned to First Person to overhaul its enterprise website. The goal was to shift from a SASE product company to a holistic Data-Centric Security platform, recognized as a Gartner Visionary.

Our creative team consisted of a Creative Director, two Senior Art Directors, and myself as technical designer and design systems manager. We collaborated with developers, UX writers, project managers, and stakeholders.

Discovery & concepting

Client onboarding & training

For two months, I conducted a weekly training series for the client's web team to introduce Figma fundamentals such as styles, components, and shared libraries.

Discovery Workshop

Our Narrative team conducted a Discovery Workshop to align all parties towards a unified structure for Lookout's B2B and B2C services.

"I don’t give out compliments, but these people really know their sh*t. What First Person lead us through is just amazing."

Jim Dolce, Lookout CEO

Narrative blocks

Our Narrative Team needed a new way to define narrative structure. Previously, their system looked too similar to wireframes, which designers would confuse for actual wireframes.

I created a small Figma component library that made it easy to define hierarchy and content in a neutral manner. In all, the team used over 2000 narrative blocks.

Color tests and accessibility

The new brand colors had accessibility issues. For example, Lookout Green was not accessible as body text, and Lookout Lime was illegible on a light background.

I generated a series of color studies that illustrated the issues we faced, and helped us discover a few promising color combinations. I ended up adding a set of alternate AA web colors and six more neutral colors.

Grids and breakpoints

Another challenge we faced was determining a responsive grid. The brand guidelines only considered static, edge-to-edge and corner-to-corner layouts for print and slides. They didn't have a strategy for responsiveness. I produced a study of the original brand grids and provided a variety of solutions.

Figma library

File structure

The Figma project consisted of multiple shared libraries and layout files. This approach offered flexibility for future scaling, while adhering to a single source of truth strategy.

Documentation was out of scope, but I felt it was necessary to at least provide basic reference sheets for text and color styles, adding brand guidelines where applicable.

79

section blocks

100+

components

200+

responsive variants

112

text styles

27

color styles

6

grid styles

Helper Kit

This kit provides basic annotation tools.  It’s based on Figma’s recommended best practices for organizing libraries.

Brand & Color

Brand & Color was the core library, the single source of truth for logo assets, brand color styles, and documentation.

Web colors

We needed more options for colors than the brand had specified, including AA accessible colors.

Text styles

Text sizes and spacing were defined in the Web Library. Reference sheets were provided, organized by type and platform.

Components

I used Figma's new component properties and nested instances throughout the library.

Properties are fantastic, reducing the number of variant we have to build. Unfortunately, nested instance turned out to be extremely awkward, particularly when many are required.

Responsive variants

Each component has a secondary component containing variants for responsive layouts. The two components contain the exact same properties, so they're easy to swap. The purpose was to reduce the complexity of frequently-used components.

Section blocks

Page mockups were separated into sections and each section was converted into a block component. These templates were designed to be detached when needed, and retain the internal components and auto-layout settings.

Takeaways

Use a dedicated color library

For the last few design systems I've built, I've always used a Brand & Color library for color styles. Lookout required accessible colors for the website, so I added them in the Web Library. But these colors will probably be needed for email campaigns, ad banners, and other use cases. I think it will be better if colors are defined in a dedicated library.

Component properties are great, instance swapping... not as much

Component properties are a game changer, significantly reducing the number of variants we need to build. In contrast, instance swapping can be awkward to use, especially when many are needed. I'm satisfied with how I use properties, but I'm going to avoid using instance swapping when possible. This means flatter, redundant layouts. But they'll be easier for designers to use.

Next time: use touchstone and milestone files to track feedback and progress

Figma makes it easy for stakeholders and others to leave comments directly on designs, but their ephemeral nature makes them difficult to maintain.

I'm considering two new file types to manage progress and feedback:

Touchstone files would be for non-designer feedback, such as stakeholder reviews. Comments can be retained, tracked, and archived without cluttering up design files. Shared libraries should NOT be connected to this file, so older layouts are not affected by component updates. 

Milestones would function similarly to touchstones but serve as the master deliverables. They would provide a record of final designs and theoretically align to production releases with version numbers.

Thank you for visiting ❤
Please let me know how I can help!