I worked with the design team at Vercel from 2022 to 2024. Across two years, I helped direct and push forward design on all fronts—design thinking and processes, bringing polish to the product, and shaping brand identity through all mediums.
vercel.com launch video made by Rauno Freiberg.
My initial area of discovery evaluated the state of Vercel’s design. Many marketing and product elements had grown disconnected in rapid growth, so I tasked myself with bringing them together. The aim was to unify the design team around a shared vision, giving us a cohesive dialogue with the rest of the organisation.
The tangible outcome was a visual language that seamlessly connected the story told on the site, social channels, and events, with the product experience itself. Many of the design exercises I discuss beneath occurred in parallel, combining iconography, interface, and process design to ensure each element strengthened the others.
System
The first hands-on work with Vercel was assessing the best methods of bringing polished design in volume to 400+ employees. Their developers adopt improvements rapidly, so I designed an updated Geist Design System, partnering with Emil Kowalski to develop it. This was built on top of the Paco Coursey's early components.
We consolidated many repeated and custom elements sprawling across the product, bringing accessibility with WCAG compliant text, and Kevin Rupert's improved color contrast ratios. We established a 1:1 relationship with Figma and their Next.js components, creating a shared dialogue between ideation and implementation.
Creating all these components was done with a view of incorporating the new Geist font by basement.studio, a typeface inspired by the Swiss design, bringing clarity and precision to the visual experience for developers and designers.
Geist font page designed alongside Guille Mesyngier (incredible posters and AfterEffects work), built by Yasmin Pessoa.
To pair with it I took geometric principles from Swiss design, aiming for an edgier looking icon than most, with hard caps and consistent angles across the board. These were all designed at 16×16px, with a 1.5pt stroke width, optimised for HiDPI displays and fitting in perfectly next to smaller UI.
Personal favourites.
The set started off at 450+, and continues to grow beyond that with contributions from the rest of the design team. A highly technical product requires absolute precision when conveying metaphors at a tiny scale.
The initial Geist icons.
The significant outcome of these many endeavours was the revised Vercel dashboard, introducing accessible colours and typography, new icons, shared components, interaction improvements, and well-considered responsive views.
A levelled up Vercel dashboard.
Process
Individual assets alone aren't useful without providing examples to the team inside a context, and organising it in a way that doesn't restrict creativity. At the same time, feeding 200+ developers requires being fastidious.
I created an ecosystem of Geist libraries for internal consumption that would serve as references for atomic components, entire product views, marketing materials and other design guidance. This interlinking helped coalesce many ongoing works, bringing teams together across projects.
Tidy and obvious.
Organisation and demonstration isn't enough, so along with the Geist Design System documentation, I created some principles in short-form to guide design to when thinking about evolving brand and product.
Flashcards are effective because they promote active recall in your brain, which is the process by which we retrieve a memory.
Identity
I led design on a new take of the Vercel Homepage within a small design squad of Alasdair Monk, Rauno Freiberg and Henry Heffernan. The last iteration was done three years prior, and the narrative around Vercel had changed. This exercise marked a meaningful evolution in the brand’s identity.
Outside of this creative vacuum, we optimised the site in collaboration with the growth team. We A/B tested performance, hierarchy and conversion to serve company goals as the user-base grew.
The proven and performant final homepage.
I also worked closely with others in Design Engineering: Yasmin Pessoa, John Pham, Emil Kowalski, James Clements, Alan Daniel and Fede Alvarez, to continue designing and building the rest of the site—top to bottom.
All outdated content was retired, important pages were refreshed, and new ones introduced the new to tell the Vercel experience. This was months of work for us, painstakingly optimising visuals, narrative and funnels towards growth.
Consistency is key. Some personal favourites: Previews, Observability, Blog & Articles
Through the new pages, I established that marketing visuals would correlate to in-product features. Rather than a fantastical, glossy and inaccurate representation of the experience, it would be a concise abstraction to demonstrate functionality.
Clean, simple and educational visuals.
To carry the identity through to where people would enter the site, I worked with Prekesh Chavda on the Open Graph image library to create a consistent suite that'd feature wherever Vercel links were shared.
A series of Open Graph previews.
Community
Outside of my focus on Vercel brand and product, I also designed the Next.js Conf 2023 and Vercel Ship 2023 sites, collaborating with Alasdair Monk, and Genny Davila who headed up the IRL and day-of experience, and working with Yasmin Pessoa, John Pham, Henry Heffernan, and Paul Henschel on the builds.
Conf + Ship 2023.
I also designed the much-needed nextjs.org update with Rauno Freiberg. We aimed to spotlight latest improvements, and get people using the framework faster.
Ambient bells and whistles.
Props
Within Vercel I was able to do the most meaningful work of my career so far. A huge thanks to Christopher Skillicorn and Alasdair Monk for giving me the opportunity to shine, and Genny Davila and Sam Becker for leading the design team with me.
To the stellar Design Engineering team who brought ideas to reality—Rauno Freiberg, Henry Heffernan, Yasmin Pessoa, John Pham, Emil Kowalski, Paul Henschel, James Clements, and shadcn.
Lastly, to my collaborators on Vercel's product with Timo Lins, Meg Bird, Kevin Rupert, and Justin Kropp, and on v0.dev with Mariana Castilho, and Pranathi Peri.