Experiential & Web

IBM Dream Store

2020

CLIENT

AGENCY

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.

installation

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.

screen hierarchy

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.

A set of three screens in order from top to bottom mimicking the installation

creative approach

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.

styling

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.

A shot of the IBM style guides referencing font and gradient choices

The first set of three onboarding screens

The second set of three onboarding screens

onboarding & Interaction

The interaction for the screen was purposely kept very simple. As already stated, the interactive screen was to only be a source of navigation and decision making, with the more impressive visual results being show on the main display. With this in mind, we onboarded the user very quickly in how to make a selection which - in this case - was to move the circle into one of the option rings. To change the choice, simply drag it out of the ring and into another one.

The benefits selection screen with no benefits selected

The benefits selection screen with three benefits selected

select benefits

At one point in the experience the user is asked to choose three benefits that would make their store successful and each option would add a new level to their store which would appear on the main display. The biggest challenge with this screen was to accommodate all the text related to each of the benefit options whilst maintaining a suitable amount of screen real estate to ensure the design was consistent.

Combining Three Screens into One

Due to the success of the installation at the NRF 2020 Vision Show, the client wanted to extend the IBM Dream Store experience to all users by creating a single screen website. There was a definite challenge in moving what was essentially three screens and merge them into one all whilst making sure it was responsive.

A set of screens showing the single screen versions of the experience

Benefits Selection

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.

The single screen designs for location selection on desktop and mobile

Choosing A Country

The location selection was much less of an issue on desktop as it looked and behaved the same as the original experience, however when moving to mobile this was a little trickier to work with. On desktop, you’d simply click the area with the mouse but on mobile the ability for such precise selection was much less probable, so instead I pinned the map to the top of the viewport and had the list of countries below it. When a list item was tapped, the country on the map would fill with colour, mimicking the same behaviour as the primary experience.

The reveal designs for desktop and mobile

Mobile Reveal

Another challenge here was how to display the mobile reveal as once again the real estate was much less than that of the original experience. Thankfully, having figured out a solution to displaying the benefits earlier, I utilised the same pattern of having information hidden behind the information icons and included them here too. Desktop was much easier in terms of layout but mobile had to have an open and close function that occluded the main experience at the discretion of the user.

That's All Folks!

Thanks for reading! Where would you like to go from here?

Let's Chat

colour selection

To ensure users would explore the different colour options and not just accept the default one, the colour selection was a two-step process. The first was to move the circle into the ring which would prompt coloured gradients to appear, whilst the second step was to then choose a colour for their store.