Landing Page Design System

UX CASE STUDY

Role: UX/UI Design

 

Our team creates a lot of landing pages. Historically, these were one-offs with bespoke design and development per project. This initiative focused on improving the efficiency of the landing page creation process with a maintainable design system.

LPDS_1.jpg

1. The Challenge

Our team is small and efficient. We balance our work between the creation of new projects along with the maintenance and improvement of existing sites.

 

This effort had two goals, increasing efficiency and creating a maintainable design system that better serves our user base.


2. Results

I used Figma to create a design system that ties color, type, and component styles into the desktop, tablet and mobile layouts. With the start of each project, styles are quickly configurable with a few clicks. This allows us to modify the site layout quickly, adding efficiency to our process. Our full template holds sections that are common to book landing pages. These sections can be quickly hidden or shown using auto-layout to quickly match the site’s needs.

 

We’ve used this template on a few sites now. The design system has grown and adapted to client’s needs with each iteration. It has been a successful effort in gaining design and development efficiency.