Delightful Microinteractions

Mobile Prototyping, Interaction Design

SpareFoot's current storage reservation experience places a heavy cognitive burden on the consumer to sift through high information density to find the right product. Drawing inspiration from e-commerce customization experiences, I wanted to explore if there was a smarter way to help consumers pick the best storage unit.

Double vision.

Many storage facilities have well over a dozen high level storage categories to choose from which are displayed in a repetitive list form. From a consumer's perspective, this often results in confusion because sizing, prices and features may look similar, causing choice paralysis and reduced purchasing confidence.

A common sight. Two storage offerings that are the same price, have identical details, but their dimensions are flipped. Would you know which one is better for you?

Creating focus.

To address this, I explored a different unit selection paradigm that breaks the various decision points into two basic interactive dimensions - unit sizing and features.

I created new mobile friendly cards that encourage the consumer to start self-selecting details of interest in any order to quickly narrow results. The key difference between this new method and the current approach is the consumer is constantly making progress towards the right unit, instead of reading arduous lists and feeling overwhelmed.

On the left is the old method, which on its own could be tolerable, but in a large list becomes problematic. The new method allows the consumer to start either with a unit size, or unit features.

Bringing things to life.

This new approach would require constant feedback to the consumer to ensure they understand how their choices influenced details like inventory availability, promotions and pricing. After storyboarding some interaction ideas, I jumped into Framer to prototype the experience.

Framer was the perfect tool for this project since this was an entirely new experience with interactions not yet explored on SpareFoot. The focus on mobile was a must for this, too.

Quickly narrow based on needs.

The design team learned through qualitative research that consumers value the ability to quickly scan and compare inventory options while understanding pricing implications. I designed a horizontal scrolling paradigm that would allow both unit dimensions and features to be visible in a single view.

I prototyped the mobile cards to have a native app feel by honoring native swiping inertias.

Immediate pricing and promotion feedback.

As the consumer narrows based off their needs, specifics contextually emerge such as promotional details and pricing. As changes are made, the system updates details on the spot.

The customization experience in action. This shows a common flow of selecting a unit size and then fluidly adding and removing unit features - with the price continuously updating.