For the NRF 2020 Vision Show, IBM wanted an interactive installation aimed at entrepreneurs & business owners to enable them to build their own dream store which would showcase the ways that IBM can benefit their business.
Users of the experience were required to place one of the three RFID items onto an interactive screen which would allow them to build a store based on an industry type. They would then go through the process of building their store before launching it into the IBM universe to sit alongside existing stores.
Due to the wild success of the experience, the client wanted to make it accessible outside of the physical installation and translate it into a single-screen web experience. The data captured via the experience was intended to help IBM discover more about small-medium enterprises and learn more about their needs.
The installation consisted of three main screens; an attractor screen, a main display and an interactive screen.
To begin the experience there were three items that each represented an industry and the user was required to place this RFID object onto a nearby plinth which would begin the experience. The items were a trainer (to represent apparel industries), an apple (to represent food or health industries) and a lamp (to represent hardline specialty industries).
Once placed, the user interacts with the bottom interactive screen which was placed at just above waist height to allow a comfortable experience.
The three screens within the installation were positioned on top of each other with the attractor screen starting at the top. The attractor screen was to display a constantly looping animated screen with IBM Dream Store branding and it’s purpose was to act like a billboard of sorts that would get the attention of other attendees at the event.
The main screen was the primary event screen to which the core experience was displayed on. This would be the screen that reacted to any decisions and changes made by the user and communicated all of the related information based on their interactions. If a user changed the colour of the store, the colour change would appear on this screen, for instance. In addition, the main screen and attractor were linked as at the end of the experience users are prompted to launch their store into the IBM universe and upon activation, the store is launched into the attractor screen.
The final screen is the interactive screen which allowed the user to navigate through the experience. After a short onboarding process to introduce the user in how to use the screen, they were able to effortlessly use it to control their journey through the IBM Dream Store Experience.
The visual design was inspired by the IBM guidelines which proved be a great resource due to their extensive range of references from animation, to colour to illustration. This allowed us to gain a good insight into the familiar rhythm and movement when designing the animations for the 3D Dream Stores and served as a solid reference for the benefits section of the experience.
One of the biggest challenges with the experience was balancing out the level of colour over the three screens; this mean being mindful on how much colour we used. As the attracter screen was the most vibrant, the elements on the main screen only contained colour when they got to the point in the experience where the user could choose a colour. Similarly, to avoid distracting the user, we used a single consistent colour all the way through the experience up until the colour choice.
Although the references had high contrasting large block colours, the decision to go for slightly less intense shapes was to avoid distraction. The main screen was the core display of the experience and so it was important that users understood that the interface was purely for interaction as users weren’t supposed to be looking down for too long.
The colours used in all elements were taken from IBM colour guidelines and really helped create sharp contrast where needed, and combining this with IBM fonts ensured the integrity of the brand remained intact.
One of the biggest challenges was the benefits screen where users could select up to three options which would then present some information about that benefit so the user could decide if it applied to their business. This had already proven to be a struggle on the original screen at the event so having even less real estate was an interesting challenge.
The solution was to add information icons that would bring up a small information panel with the associated copy which would provide the context users needed to make a decision. And by tapping the image it would select that benefit just like in the main experience.
By taking this approach, it ensured the experience could be responsive by making the items stack, scrollable & hiding / showing the information panel at the user’s discretion.