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