Staples
Designing an endless aisle touchscreen experience
ROLE
UI/UX designer
LENGTH
3 weeks
DATE
2019
Staples Workspaces is an endless aisle, eCommerce experience that inspires customers to create their ideal workspace. It consists of 10 curated furniture collections known as “vignettes”. Staples’ retail stores feature shoppable installations of these vignettes.
My team and I were approached by our client, Staples, to design and build the companion touchscreen kiosk for Workspaces. This kiosk would allow customers to explore and buy pieces from all 10 of these unique vignettes.
THE CHALLENGE
Design and build the MVP experience of the Workspaces touchscreen kiosk.
Complete the build in 3 weeks, in time for the unveiling of Staples’ rebranding
Ensure the kiosk is cohesive with the in-store vignettes and online touchpoints
THE GOALS
I was the sole designer on this project. I led the research and UI/UX design for the touchscreen kiosk experience.
MY ROLE & TEAM
Throughout this project, I worked closely with my internal team at Demac Media and our client, Staples, to conceive and ship this product in time for the launch of Staples’ rebrand.
My contributions —
Wireframing
UX design
Visual design
Research
Due to the time constraints of this project, a formal discovery sprint wasn’t possible. But before I jumped into designs, I wanted to ensure I had a firm grasp of the following:
Touch screen best practices and conventions
Great examples of touchscreen experiences
Image credits: Clockwise - The Star, Eater and Wonder sign
Luckily, Demac’s offices were across the street from the Eaton’s Centre; Toronto’s largest shopping mall. There was a wealth of touchscreen experiences I could try out and pull inspiration from. The day the project kicked off, I ducked out of the office and conducted some guerilla touchscreen research at the mall.
My research, though limited, provided me with a fundamental understanding of designing for touch kiosks. I was ready to move into low-fidelity designs.
How might we create a cohesive and intuitive touchscreen experience?
Low-fidelity designs
I worked with Staples’ PM and Demac’s PO to define the requirements for this build. Given the tight deadline, we decided to build the site using the out-of-the-box Shopify functionality. This lean approach allowed me to finish the wireframes in a single day.
New contexts & devices
While I was designing the wireframes, I kept in mind the users’ context and the device they’d be using: a touchscreen in the middle of a busy store. The designs needed to be simple and minimal. I designed a visual-forward experience to minimize cognitive load and ensure the vignettes’ imagery was the focal point.
Visual-first navigation
I also wanted to ensure people could accomplish key tasks like navigating without the need to read. I kept the text to a minimum and used large type sizes. Whenever possible, I used iconography in place of text.
Once I completed the wireframes, I was ready to move into high-fidelity designs.
I had remote daily stand-ups with my client throughout the design process. We used that time for impromptu design reviews. This made getting feedback extremely efficient. It also removed the need for formal revision cycles and design presentations.
High-fidelity designs
Designing for touch
Given that this was a touchscreen experience, interactive components needed to look inviting to be touched. So I designed all tappable components with a minimum hit point area of 55px by 55px.
Tap, tap, tap
For CTAs, I used an exaggerated drop shadow to signal to users that these elements were tappable and draw focus to them — a common pattern I discovered from my research. The pressed and inactive states contrasted strongly against the default state to provide clear feedback.
Cross-channel consistency
This project was one of many happening in parallel in preparation for Staples’ rebrand. My designs needed to look cohesive with the rest of the in-store and online touchpoints.
To maintain consistency, I met with Staples’ heads of User Experience and eCommerce throughout this project. There were several times when my components needed to diverge from Staples’ style guide. My research helped to assure my clients that these changes would improve their usability.
Final designs
Impact
My team and I successfully shipped phase 1 of the Staples Workspaces kiosk experience in time for the launch of their nationwide rebranding.
Workspaces debuted alongside the rest of Staples’ brand-new identity at an in-store event that was open to the public in January 2019.
The launch received local and national media coverage
Introduced a new revenue stream for Staples
Touchscreen component library created
Future enhancements
At the rebranding launch event, I got to observe people trying out the touchscreen for the first time. To my relief, there were no major usability issues. But, as always, there were opportunities for improvement. With more time, I would’ve liked to tackle:
Optimizing the checkout experience to be faster and easier to use on a touchscreen device
Make sharing wish lists and ideas quick and easy via customers’ phone or email
Add more ways to seamlessly connect the products with people’s offices such as integrating AR/VR into the experience