Portfolio of Steph Laba — Experience Designer

Staples Spaces

Hi — I’m Steph, a Toronto based multidisciplinary designer currently at the intersection of Experience Design and eCommerce.

Staples
Spaces

Designing for Touch

parallax header

Overview

Staples Spaces is an endless aisle, immersive experience that inspires customers to create their ideal work space. Launched in Fall 2018 this initiative from Staples Canada blends interior design, technology and UX. It consists of 10 curated furniture collections known as vignettes. Retail stores will feature live installations of select vignettes with a companion touch screen kiosk that lets customers peruse and buy pieces from all 10 of these unique collections.

I was the sole designer on this project leading both the UI and UX initiatives for the companion touch experience. My team planned, designed and developed this solution in just 3 weeks.

Date

2018

Role

UI/UX Designer

1. Rapid Wireframes

I completed the wireframes in a single day. Once completed I added brand elements like buttons, colors and images to the wires to quickly move to UI design. At the time of this project Staples had recently gone through a rebrand, so they had a wealth of sparkling new assets to pull from. This made moving from the wires to high fidelity mocks very efficient.

2. Keeping the Context in Mind

As the kiosk would be competing for customers’ attention in a busy store the experience needed to be simple and straightforward. I designed an image-first, direct experience to minimize distractions, reduce cognitive load and keep users engaged. I simplified the navigation and used iconography wherever possible to encourage scanning.

3. A Touch-Based Experience

The elements needed to feel tactile and inviting to touch. To accomplish this I designed all interactive elements with a minimum hitpoint area of 50px by 50px. For primary CTAs I used a subtle drop shadow to signal to users that these elements were interactive and draw attention to them. The pressed and disabled states contrasted strongly against the active state to provide clear feedback to customers.

3 button states for primary CTA
4. Modern, Clean and Inclusive UI

To draw emphasis to the imagery, which was the focal point of the experience I opted to keep the layout clean and minimal with ample white space. I broke key elements out of the grid to add to the modern feel of the UI. The dev team and I worked closely together to ensure the site met WCAG 2.0 AA accessibility standards, to ensure the experience was inclusive.