Products
Reusable product tiles with desktop, tablet, and mobile layouts.
Selected work · 2021–2025
RingCentral.
Four years. Hundreds of pages.
I designed pages across several ringcentral.com redesigns, alongside the design and illustration systems that supported them.
Explore the case
Overview
One website.
Many ways in.
A visitor comparing plans needs something different from someone exploring a product for the first time.
I designed landing pages and other pages across the site, mapping user flows and prototyping key interactions. The work below shows how I adapted the layouts to different decisions while keeping the site visually consistent.
The website
Give each page a clear job.
I worked on pages for different points in the customer journey: comparing plans, exploring integrations, and understanding what a product can do. For Enterprise Contact Center, I designed the complete page; the card opens the full layout.
One landing page, two layouts.
For the cloud migration page, the desktop hero pairs the form with the product visual. On mobile, the visual introduces the offer before the form.
A homepage built together.
The homepage redesign and its graphics were a team effort. The homepage preview opens the complete page design, followed by the global scale module in context.
Atomic web design system
A system for building.
And building again.
When I joined, there was no shared web design system.
Working with the team, I helped build it from scratch, creating reusable components and introducing Auto Layout. This made day-to-day design work easier.
The library follows an atomic structure: foundations and controls combine into molecules, which form larger organisms and page layouts. My work extended across those levels, including responsive variants and reusable modules for different page types.
Atoms
Colour, type, spacing, icons, and controls.
Molecules
Cards and small groups of related elements.
Organisms
Complete sections: heroes, products, benefits, and more.
Pages
Sections assembled for a specific user journey.
Start with the foundations.
Colour, typography, corner radii, and interaction states give the library a shared foundation. These rules carry through to every form, card, and section.
Molecules with a defined job.
Feature cards, headline groups, and accordions combine atoms into patterns with a clear purpose. Their variants handle different content, interaction states, and screen sizes.
Organisms that do the heavy lifting.
The library includes families of complete sections, with layout options and breakpoint variants. These are the reusable building blocks for a page, rather than isolated UI controls.
Hero
A responsive family of opening sections, with left-aligned, centred, and B-roll layouts.
Benefits
Benefit groups with alternative icon treatments and breakpoint variants.
Z Cards
Text and image sections with simple, lines, accordion, checkmark, and sticky navigation layouts.
Industry
Tabs, carousels, and sliders for presenting industry-specific solutions.
Features
A larger composition with a content column and a grid of feature cards. Large and small card variants adapt across breakpoints.
Responsive rules are part of the system.
The layouts document how components sit on the grid at different breakpoints. The same component families have desktop, tablet, and mobile variants.
Illustration library
One visual language.
Many industries.
I created illustrations and worked on the library of reusable elements and complete scenes. The industry collections show how the same visual language could tell different stories. These examples come from an earlier RingCentral visual style.
A collection for every industry.
Healthcare, finance, retail, education, and other sectors each had their own scenes. Desktop compositions and mobile adaptations keep the same visual language at different sizes.
From a room to a conversation.
I also drew room and video-call illustrations, with variants for different spaces and group sizes.
The details that hold it together.
Hands, icons, plants, and pictograms form a set of reusable ingredients. Each collection follows a common grid here, so the individual shapes have space to breathe.
Small pieces, used throughout.
Icon families and pictograms translate the same language into smaller formats, with recognisable shapes and restrained colour.
Character in the details.
Plants add expression to larger compositions. Illustrated numbers and letters extend the collection into typographic treatments.
A library people can use.
The usage guide explains how to find illustrations, adjust component variants, and contribute new work. It connects the collection’s atomic structure with the team’s everyday workflow.
View the full guide