pauldesigner.com
ES
espresso Displays

espresso Displays

Responsive auto-layout components, iconography and page modules for a portable-display brand's design system.

Year
2022
Role
UI Designer
Tools
Figma, Sketch, Photoshop
Laptop and phone showing the espresso Displays landing page, a dark hero with the portable monitor and the line "The World's Thinnest Portable Monitor", on a purple ground.

Context

espresso Displays is an Australian company making thin portable monitors. In 2022 I worked with their design team for six months, freelance and part-time, on the components and pages behind the website.

My role

UI Designer, inside the team’s existing design system. My job was to make that system hold up across every screen size and to give the team a set of modules they could build pages from.

The work

Responsive components. I designed and built the site’s components with auto-layout so each one resizes correctly from phone to widescreen without a separate version per breakpoint.

The espresso Displays homepage at three widths side by side, desktop, tablet and phone, with the hero, the specification list and the photo sections reflowing into each layout.
The same homepage at desktop, tablet and phone. Each module reflows into the width it is given rather than being redrawn per breakpoint.

Organising the system. I structured the design system’s iconography and page modules so a new page could be assembled from a shared set rather than drawn from scratch, and so the team could find what they needed.

The espresso for business page cut into three columns, running from the hero and press quotes through the client logo wall, the benefit cards and testimonials, to the FAQs, contact form and footer.
The espresso for business page end to end, read left to right: hero, press quotes, client logos, benefit cards, testimonials, FAQs and the contact form, each one assembled from the shared modules.

Outcome

A responsive component library, an organised icon set and a set of page modules, used by the team to assemble the site’s pages across breakpoints.