Project: Landing Design System

Client: Landing

Role: Senior Visual Designer

Credits: Michael Keane (Product Designer) and Dev team

Problem:

As the company expanded, the demand for new pages grew, but we lacked the time to handle each project individually. It became clear we needed to step back and develop a streamlined process to ensure consistency and speed across designs.

We conducted a full site audit to identify the most commonly used components and noticed significant inconsistencies in typography, icons, and spacing.


Solution:

This project presented the opportunity to create a comprehensive design system for the website, eliminating the need for wireframes or low-fidelity mockups. With a design system in place, designers could focus on flow and storytelling using pre-built modules. While the web pages were already designed in Figma, they lacked mobile versions.

Given the company's B2B and B2C focus, we needed various component and module options, including how to display images, videos, galleries, carousels, and forms, whether as modals or embedded elements. We also had to consider different treatments for single or multiple quotes. Once the system was in place, the marketing team began creating their own pages.

Explore the file

Project: Techstars Design System

Client: Techstars

Role: Senior Visual Designer

Credits: John Egan and Dev team

Problem:

When Techstars hired an agency to rebrand, everything from the logo to the entire website underwent a transformation. While the agency delivered impressive work, we encountered some challenges that required design adjustments along the way.

With the sheer number of pages, the design file became unwieldy. Collaborating with another designer and the agency made sharing files cumbersome, which provided a perfect opportunity to recommend switching from Sketch to Figma for a more streamlined workflow.


Solution:

We expanded the design system beyond the original scope by creating both mobile and desktop versions for every component, as well as dark and light modes. Although Techstars is primarily focused on dark mode, we ensured flexibility by designing for both modes from the start.

The Techstars website needed to cater to a diverse audience of investors, startups, mentors, and partners. One of our biggest challenges was designing unique pages for each of the 50 accelerators, as of 2021. We were responsible for gathering content and tailoring each page to its specific industry and city.

Explore the file