PAWS

An open, warm and friendly brand for everyone who owns a pet. Paws is an online website that provides pet food and pet supplies. 

Roles
UI Design

Year
2022

Client
PAWS Group

PAWS-Thumbnail

Goal
Website Redesign

Creating a new richer experience to tell our stories to our customers and sell to suppliers. Starting to create a new design system using an atomic methodology with fully customisable and responsive components, we then redesigned the whole website with a mobile-first approach.

Build out a new Paws design system adapting Vue storefront as the chosen front-end framework and following the Atomic Methodology to help speed up design processes. Keeping consistency across the entire site using scalable components for different breakpoints and multiple devices, these are easy to find and swap thorough instances and fully pixel-perfect using the 8-pixel
grid system.

PAWS-img-1
PAWS-img-2
PAWS-img-3

When crafting Design Systems, I prioritize meticulous file organization. In Figma, I visually distinguish pages on the left panel, including a cover page, foundational elements (housing colour palettes, typography, layout, and spacing), Atoms (representing the simplest components such as buttons, controls, and icons), Molecules (comprising more intricate components that blend various atom symbols, like dropdowns and input fields), and Organisms (the most complex elements within the atomic methodology, found in primary sections where components seamlessly combine atoms and molecules, such as the top navigation and footer).

PAWS-img-4
PAWS-img-5
PAWS-img-6
PAWS-img-7

The following sections display the payment process screens, which begin with signing in for existing customers or creating an account for new users. It then guides users through various steps, from selecting delivery options to reviewing their orders. To enhance user navigation and ease of tracking, we've implemented a steps navigation feature at the top of the screen. Users can tap on it and easily backtrack if they prefer. Additionally, for actions like "edit" or "add new," a non-full-screen modal smoothly slides in, ensuring users stay within the process flow and avoid unnecessary distractions that might lead to confusion.

PAWS-img-8
PAWS-img-9
PAWS-img-10