A Design Journey — from Prototype to Dreamforce (Part 4)

Published in

Salesforce Designer

6 min readMay 5, 2015

Designing for Interactive Experiences

The UX Design Shop at Dreamforce 2014 was a real-world example of how the Internet of Things could provide an engaging and immersive connected retail experience. Salesforce, Heroku, Analytics Cloud and Marketing Cloud were all working together for the first time to power this unique IoT experience that produced sweet, sweet custom swag!

A quick recap of the entire experience:

Bruno shared this video in Part 1 of the Design Journey.

The Matrix

My technically savvy partners in crime have already covered the development behind this project so perfectly in-depth that it could be the script for the first Matrix movie.

The Adventure

At the time of this project, I was still relatively new in my role as a Product Designer at Salesforce. I started looking for people in our UX Department who had an interest in spending some of their free time exploring new and exciting ways we could innovate on the current product.

One of the earliest solutions I arrived at was to introduce iBeacon functionality. This quest quickly introduced me to many like-minded and passionate creators like Sönke Rohde, Bruno Fonzi, Amy Lee, Rick Boardman, Ivan Bogdanov, Adam Putinski and many others.

At Salesforce, I’ve discovered that this is one of those unique places to work that if you’re really passionate about something, people will not only allow you to flex those muscles but they’ll join you wholeheartedly in your quest to improve the product.

The Dark Side

What is the first thing a single designer surrounded by a team of highly skilled developers on an exciting personal project is going to do? Instantly fall prey to the Dark Side.

The next thing you know, you’re designing blue sky ideas with zero regard for the constraints of technology and in this case it’s perfect. Trust in the abilities of your collaborators to keep you grounded in reality. Strive for the blue sky together and scale back only as absolutely needed. There’s already more than enough reality to go around.

Process

As this project was a labor of love, we had to iterate very quickly on how things could function. This is around the time that reality checked in: Dreamforce was rapidly approaching, and as a group we had to make very careful compromises.

Once we formalized the experience, my role was now to visualize our final concept into a holistic design system. We wanted it to feel visually cohesive, as a Dreamforce attendee might sign up for our UX Design Shop on a tablet in one part of the building, experience the shop in in the Dev Zone on large screens and finally pick up their order later in the day via tablet in another part of the building.

Tablet

As I mentioned, tablets essentially were the bookends to the larger experience. As depicted below, the user fills out a brief survey and selected their shirt size and color. When they return to pick up their shirt, they were greeted with a thanks and a recap of what they had ordered at the UX Design Shop. I wanted to push for a simple interface that focused on the users’ options and celebrated their choices.

UX Design Shop (Front-end)

When walking past the shop, we wanted people to immediately understand that this was an interactive shopping experience built by Salesforce UX.

This screen would then prompt the viewer to badge into the system with their Dreamforce RFID-enabled badge. They could see that currently 299 people had used this same experience already to order a custom DF shirt.

Once a user badged into the experience, the Visitor title was replaced by their initials along with a randomized Salesforce brand color, creating a personalized but discrete mark for each user.

In the shop itself, we were showcasing the work of several Salesforce designers who graciously created the printed designs. I wanted to represent them in a manner that allowed for the viewer to put a name to each design and, possibly by the end of Dreamforce, a face.

There was a slight touch of gamification to encourage the user to view all five designs. As the user viewed designs the Shirts Viewed counter would go up from 0/5 to 5/5.

Once users picked out a design, they tagged off and were prompted to move to the back of the booth to learning more about the technical implementation of the project, where the real magic happens.

UX Design Shop (Back-end)

We went through several iterations to arrive at the final design for the backend of the experience. Technical limitations forced us to scale back in this realm, but you can see some of what we were exploring below like a social feed.

Below you can see the final implementation showcasing Salesforce, Heroku, Analytics Cloud and Marketing Cloud all working together for the first time.

Be The Worst Magician

When creating an experience that showcases new ideas or technology, show your audience the trick and do them the service of revealing its secrets afterward. Be the best magician by being the worst magician ever. As we become masters of our crafts, it is paramount that we give away our tricks to make room for new ones.

“What’s this? A stuffy office meeting? Perhaps it’s time for some Office Magic.”

Conclusion

The UX Design Shop was a pet project we initiated out of our shared passion for pushing the limits of what a product can be when empowered by new technology. We could have never imagined the positive response that we received. This project would have never been possible without the support of Salesforce leadership and our fellow peers. When like-minded people get together, anything is truly possible.

The rest is well… history. See you at Dreamforce 2015!