-White.svg)
INTRODUCTION
An elegant, modern brand for a prestigious and design-savvy client
As the lead designer behind Greylock's recent visual revamp, I headed up the effort to give their brand and website a modern and refined makeover within a tight timeframe. Several concept designs were created and refined before we eventually settled on one that struck the desired feel of contemporary confidence, while maintaining a connection to Greylock's commitment to early stage companies. I applied the design concept to all of Greylock's digital presence, and was heavily involved in the dev process, working closely with the development team throughout the QA stage to ensure alignment with the high-fidelity designs. Within a timeframe of only two months, the Greylock brand had been transformed. Below is a detailed look at the process of redefining Greylock's iconic brand and website.
CONCEPTING
"How do we balance timeless with modern, with a focus on early-stage?"
In the concepting phase, I developed over ten different visual styles that ranged from minimalistic and elegant to bold and lively. This wide-ranging exploration was helpful in defining exactly what the Greylock brand would become, and to find unique ways to separate Greylock from other VC firms.
I created a series of conceptual website designs brand expressions to explore design elements, and produced a series of logo design concepts with animation ideas to help bring the concepts to life, although ultimately we decided to stick to Greylock's current mark to retain the brand's quiet confidence.
Eventually we landed on a concept that is simple and typographic, with grid lines that are a subtle reference to Greylock's early-stage expertise. It is heavily inspired by the idea of a blueprint, without being too on-the-nose. The final concept retains Greylock's premium and understated brand personality, while bringing subtle new elements that help to elevate and modernize the brand.
Website Design
Polishing and applying the finished brand within an aggressive timeline
The design of the full Greylock website was a testament to rapid iteration and meticulous attention to detail across various devices. From the outset, I was focused on creating a cohesive and responsive design that would seamlessly adapt from desktop to mobile environments. This meant designing high-fidelity mockups for each page at multiple breakpoints: desktop, laptop, tablet, and mobile.
The project timeline was aggressive, but through an iterative design process, we were able to meet the tight deadlines without sacrificing quality. By utilizing Figma's collaboration features, and by directly collaborating with the client within Figma, we were able to make refinements in real-time and to get to the final product in less time.
Ultimately, over 25 pages on the main site, as well as several sub-sites and extensions were designed in high fidelity in Figma and passed to the developer within a month.
DESIGN SYSTEM
Writing the rulebook to govern the Greylock UI and brand
As we navigated through the complexities of designing Greylock's website, the creation of a design system became paramount—not as a preliminary step, but rather as a dynamic, evolving framework that took shape alongside the site itself. Leveraging Brad Frost's Atomic Design methodology, I crafted the design system "on the fly," ensuring that each component, from the smallest atom to complex organisms, was meticulously designed and cataloged for consistency and reuse. This approach allowed for a fluid design process, where elements could be refined and applied across the site with ease, maintaining a cohesive look and feel without slowing down the rapid pace of development.
To facilitate an organized and scalable design process, the Atomic Design principles guided the structuring of the design system into fundamental building blocks (atoms), which were then combined into larger, functional units (molecules and organisms) before being integrated into templates and pages.
In anticipation of the site's launch, I also prepared a client-friendly version of the brand standards and design system. This document served as a comprehensive guide for Greylock's team, detailing the use of design elements, color schemes, typography, and more, to ensure the brand's visual identity could be consistently applied in future digital and print materials.
EXTENSIONS
Extending and further defining the brand
Following the successful launch of Greylock's redesigned website, the scope of our collaboration expanded to include a variety of extensions that extended the brand's visual language into new arenas. To maintain brand consistency across all mediums, I created a suite of digital assets that Greylock would then use to modernize their social and web presence.
I created a high-fidelity design for an email newsletter, which was a unique challenge due to design limitations of the email medium. Some concessions and changes had to be made from the design system to account for these limitations, while still maintaining the new brand look and feel.
For social media, a series of asset templates and guidelines were developed to ensure that posts across platforms like LinkedIn and X would be instantly recognizable as part of the Greylock ecosystem. These assets were crafted to be both visually striking and adaptable, allowing for easy updates and variations without losing the cohesive brand identity we had established. An animated version of the Greylock Edge graphic was created in less than 24 hours, and implemented in both social assets and the site itself.
The creation of a data visualization sub-site (Castles in the Cloud) presented an opportunity to delve deeper into the brand's visual language, developing a design that could effectively communicate complex information. Using the brand's tertiary color palette was important to provide contrast and clarity to the data being presented, while still staying true to brand standards.
Lastly, the Greylock blog required a series of illustrations and diagrams that match the newly created brand. Thinly-stroked illustration elements and icons were used to connect to the parent brand, while still portraying information in a striking and interesting way.
