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.
I was directly responsible for:
Building the Figma component library and design system
Technical designs
Creating a Narrative Block system for the Narrative Team
Client onboarding, training, hand-off, and iterations
Client onboarding & training
I conducted a weekly training series for 8 weeks to introduce advanced Figma tools and best practices.
Narrative blocks
I created a component-based, narrative block system that enabled the narrative team to switch from Miro to Figma. Over 2000 blocks were used.
Brand adoption (technical / practical)
Our work was preceded by new brand design and guidelines that focused primarily on presentations. I explored solutions for accessible / responsive web that respected and enhanced these guidelines.
Design concepting
I provided design production support during the concepting phase. One part was simple library elements like color and type styles, layout grids, and Figma tips & tricks. The other was basic production work: converting desktop concepts to tablet and mobile for practical consideration.
Figma project
I generally use a modular project system. Shared libraries are hierarchical, starting with the core Brand & Color library. The Web Library contains type / grid styles, components, and template blocks.
Advanced components
I used component properties and nested instances. I made two sets of each component. The primary set was for regular design work. The other set contained all the responsive variants of the primary components.
Block templates
Pages were composed of section blocks. The blocks were saved as components, but designed to be used as detachable templates. They would still have auto-layouts, grids, and inner components after being detached.
Helper kit
The Helper Kit provided component-based annotation and documentation tools, including templates for the Figma thumbnail, system documentation, and sticky notes.
Continuous handoff
Components and blocks were handed off as soon as they were completed. I’d work with the development team to make updates or adjustments when needed, but the overall delivery was really smooth.
Figma’s new component properties are a game changer, significantly reducing the need for variants.
What I found most valuable was learning how to effectively use component properties and instance swapping. One part was organizing and exposing them in a designer-friendly way. The other was providing solid examples that the client could emulate in future components.
Figma makes it easy for stakeholders and others to leave comments directly on designs, but it’s messy.
Touchstone files would be specifically for feedback:
Copy the design layout to the touchstone file
Use a left-to-right sequence (oldest to newest)
Provide a consistent destination for stakeholders
Retain feedback discussions
Help everyone keep track of progress
Milestone files would be the final destination for production designs. Again, it would be a separate file, following the touchstones, devoid of comments and clutter.
Developers, marketing, etc would rely on milestones as their source of truth. They could have version numbers to better correlate to each production release.
Selected works
LookoutDesign library & components
First PersonDesign libraries & components
VectraDesign library & components
Omnicell: Figma libraryMigration and ongoing library management
Omnicell: Sketch libraryDesign library, components, & responsive design
ObviousMVP app design
ObviousWireframe design
Starsky RoboticsDesigning a remote driving system for autonomous trucking
IlluminateOnline conference for pharma tech
VMwareInteractive conference presentation
Omnicell kiosksDevelopment & design
Star Wars APIDesign & development exercise
Fitness goals appApp design exercise
Disney Movies AnywhereDesign & development
DayframeDesign & development
HD WidgetsDesign & development
App StatsDesign & development
CloudskipperDesign & development
Flash / FlexDesign & development
Elemental DesignRave flyers