Lookout – Radley Marx

Overview

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.

As Senior Technical Designer, I was responsible for:

Figma library

I created and managed the design library. I converted designs into styles, components, and blocks. I wrote documentation and provided a documentation & annotation helper kit.

Narrative blocks

I created a component library for the Narrative team. It was used to define and interate on content structure without affecting design.

Onboarding & hand-off

I taught client and internal teams how to take advantage of Figma's advanced features and tools. I worked directly with development team to optimize the library for their web platform.

Technical design

I used Figma prototyping, grid styles, and autolayout to resolve navigation and responsive breakpoints. I used component properties to greatly reduce the need for variants.

Pre-production

Narrative blocks

The narrative team for First Person needed a method to establish content and structure without inferring layout design. In the past, they experimented with wireframe-like blocks, but the designers tended to incorporate the layouts along with the content.

For Lookout, we tried a different approach by creating "layout-free" blocks that only contained text and descriptions. After creating about a dozen of these blocks, I figured out a common pattern and converted them into component-based blocks. The narrative team employed more than 2000 blocks to define approximately 100 pages.

Client onboarding

For the two months prior to production, I conducted weekly online training sessions with the client’s web team. The lessons covered a full range of Figma tools and practices.

Design concepting

To kick off concepting, I created a bare-bones design library. Designers used the narrative blocks and shared libraries to explore layout ideas and concepts.

Early layout grid, based on brand guidelines

Color styles and studies

Navigation components

Cell components

Design production

Responsive layouts

I designed the first round of extended desktop and mobile layouts, including type styles for mobile. The designers updated my designs and finished the remaining mobile and tablet layouts while I worked on converting everything to components and blocks.

Grid system & breakpoints

Advanced components

I created the component library from scratch. I utilized component properties and nested instances. I made two sets of each component: production and responsive.

Production components were the default components that designers used for default (desktop wide) layouts. Responsive components were a variant set of the production component.

Component blocks

I converted each page layout into component blocks. A block is a page section with layouts and components. They works as templates that can be detached and modified as needed.

Documentation

Time was limited, but I was able to provide documentation for type, color, and grid styles. My Helper Kit includes a reference sheet kit for design consistency. Master reference sheets were saved as components in the core libraries. Instances could be placed in layout files.

Takeaways

Component properties

We've reduced our reliance on variants thanks to component properties. What I found most valuable was learning how to effectively use component properties and instance swapping, including organizing them in a designer-friendly way.

Touchstones

We needed a better way to manage stakeholder feedback. Figma makes it easy for stakeholders to leave comments on our designs. However, because we have many design files, we ended up with lots of comments spread across different files.

Another issue we faced is that when we make changes to Figma shared libraries, it affects all the layouts that use them. We lose the history of our progress. Further, when a stakeholder provides feedback on a layout, that layout may be different later. The comments would not match, which can cause confusion.

To solve these problems, I'm considering using "touchstone" files. These files would contain copies of unlinked designs that we want to get feedback on. Using touchstone files would give stakeholders a consistent place to provide feedback, retain discussions, and help everyone keep track of progress.