lookout-hero-logo
lookout-hero-image
lookout-lime-ornament-40×40-1

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

lookout-green-ornament-40×40-1

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.

lookout-narrative-blocks

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.

lookout-client-onboarding

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.

lookout-concepting-grids

Early layout grid, based on brand guidelines

lookout-concepting-color

Color styles and studies

lookout-concepting-nav

Navigation components

lookout-concepting-cells

Cell components

Design production

lookout-green-ornament-40×40-1

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.

lookout-responsive-layouts

Grid system & breakpoints

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.

lookout-desktop-responsive-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.

lookout-advanced-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.

lookout-blocks-grid

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.

lookout-documentation-examples

Takeaways

lookout-green-ornament-40×40-1
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.

Milestones

I've been thinking about a better way to track versioning. Being at an agency, I was only working on one-off projects for clients.

But for complex products that evolve over time with long delays between design delivery and development completion.

Selected works

LookoutDesign system & library

Omnicell: Figma libraryMigration and ongoing library management

Obvious: MVPApp design

Obvious: wireframesWireframe design

Omnicell: Sketch libraryDesign library, components, & responsive design

Starsky RoboticsDesigning a remote driving system for autonomous trucking

Omnicell kiosksDevelopment & design

Disney Movies AnywhereDesign & development

Star Wars APIDesign & development exercise

Fitness goals appDesign Exercise

DayframeDesign & development

HD WidgetsDesign & development

App StatsDesign & development

CloudskipperDesign & development

Flash / FlexDesign & development

Elemental DesignRave flyers

View