Creating an interactive instruction guidebook/manual to help employees in 30 stores nationwide do a complete refresh of installations with hundreds of potential items, while maintaining a consistency with the vision of the HQ Visual Merch team.
Our users, In-Store REI Visual Merchandisers (VMs), were well versed in the design and system language of the primary app where they received instructions from the core Visual Merchandising HQ team for small in-store displays and department flow updates so it was important to borrow some of the core interactional routines and gestures to ease the transition to the supporting app.
The Vision + Approach - A Store In Miniature
The goal for this app was to create an experience that would fluidly merge the physical store space with its digital representation. It would be the one stop shop for seeing the aerial fixture setup of a full store, a walk-through experience of the individual departments, and item codes and instructions on how to place each installation.
Pivoting the Approach
In the original request, the plan was to show departments along a horizontal plane with figures in their proper places using overlaid and individually called images to try and somewhat mimic perspective. After diving into the project scope and function, I pitched an alternate visual approach that would show stores within a 3D space to minimize the gap between what was being consumed digitally via iPads and real life.
The gamut of skills this project required were completely new to me, and I was excited (and a tad bit terrified). For the visual portion, I had played around in the 3D Google SketchUp app in the past but I for the project began to explore and build a deeper knowledge of the tool and its capabilities, like: building fixtures and store interiors, to how an interactive walk-through may work. At the same time the team at REI was piloting Adobe’s (then) new Digital Publishing Suite, which allowed for an app and all its interactions to be built using a plugin for InDesign.
Structuring the Experience
Content the VMs needed to access lived at a whole store overview level where fixture maps and orientations lived, to the correct placement of individual items for a single display. The app was organized in a similar map based way - from macro to micro, starting with the fixture or displays placement in the store space and then focusing on the placement of the display itself.
Every store is different so each process a VM may go with could also vary. By creating multiple pathways to obtain the necessary data the app gave the control over to its users for them to choose their preferred path for discovering information.
The Softgoods Refresh app was intended as a hub of information, but too much of a good thing can be… too much. While the average layman might need to know what each fixture icon meant on the floor plan view (i.e. me when I was put on the project) our users didn’t. Those icons were like old best friends and their view and interactions didn’t need to be muddied up by additional buttons, especially as a 3D view of the buttons could be seen on the department level view.
Utilizing their familiarity in their store space, the design of the app would enable users to easily look up the information needed by single installations, departments or by exploring the space as though they were in the physical space based off the various store floorplans.
Store Space + Fixtures
Using Sketchup I created 3D fixtures to scale and then placed them within the space build according to each of the 30 stores floorpans and fixture positioning. As proof of concept and direction, I built out a higher fidelity model but, in order to meet the demand of the quantity of models needed (30) and tight turn of the project, I created a final low fidelity design model that would put the important information front and center while still providing enough context for easy understanding and letting me build the 3D models and apps at the speed needed to meet our hard deadline.
Bringing it all to life
The three month dash of learning how to (and making) 3D models and using the Adobe DPS app tool culminated in 30 separate apps that were sent to hundreds of people across the 30 stores being updated. Staff were able to pull up each app curated specifically for their store and bring the ideas of the HQ VMs to life on the local level while maintaining a high level of brand experience integrity from store to store.