E-commerce Kiosk for IOS
Art.com were pitching a collaboration with Bed Bath and Beyond regarding an in-store kiosk that would help customers choose wall decor.
- Art.com had an existing IOS app that had been used in the pop-up retail location. Initially the plan was to mildly modify this app for Bed Bath and Beyond.
- Internal staff convinced the leadership at Art.com to create a new experience for Bed Bath and Beyond. Along with a Paul Grueber as Product Manager, I began drafting this experience.
- For the new app, I assumed that we could extract existing merchendizing themes from Bed Bath and Beyond, similar to the "Coastal Living" group of products they were marketing.
- An Art.com technology project based in color science was a good fit for a filtering experience.
- An early requirement was to make the Ipad the hands-on filtering experience, with selection results shown on a larger screen in front of the user.
In-store Kiosk: Concept Drawing
An early concern for the interface was the cognitive load the experience would expose a user to: he or she would already be in a busy store, possibly surrounded by family and friends.
The First Candidate: Art Dials
This app was developed for use in the Art.com Pop-up Retail store in 2013.
Art Dials UI
Art dials offered an effective filtering experience but the UI appeared to be too busy for an in-store user experience.
BBBY UI: First Draft
I initially saw BBBY as a filtering experience, displaying the results of the filtering on the larger screen.
Blocks Selection to Guide Filtering
In my UI, users first select one of three "blocks" to start filtering. This allows users to choose an experience that best suits their taste in art selection.
Theme, Palette, Results
At the bottom users select the theme they want to view. Just above is a color filter that narrows their results further.
Shop by Theme
With deeper understanding of the color technology, it was clear that the palette was part of the browse result. It could only work as a secondary filter once a set of results had been generated.
Placing the palette next to the browse results made it more apparent what the palette was for.
Shop by Theme, Refined
Once selected the palette can be used to refine the browse results. here, when a user selects one part of the palette (the larger, coral colored rectangle) it generates search results with coral as a dominant color.
Shop by Color
If users choose "shop by color" as their initial browse filter, they are still able to narrow their results by theme in the upper drop-down menu.
Once users have selected an item they are directed to a product page, and invited to customize the servicing (framing) of their selection.
Visual design: Shop by Color
Visual designer Kevin Copp used fading blocks, rather than arrows to direct the user to scroll.
Visual Design: Shop By Color
Kevin cleared up the screen and removed the arrowheads from my wireframes, partially to ease the process for the developers.
Visual Design: Shop By Theme
In Kevin's version the color palette that narrows the browse results end up in the very middle of the screen, taking a center stage.