A Design Journey — from Prototype to Dreamforce (Part 2)
My colleague Bruno Fonzi kicked off a series of blog posts on our Design Shop at Dreamforce 2014. This project brought together UX designers, researchers, and engineers from our team to showcase how Salesforce and Internet-of-Things (IoT) technology can be combined to create an immersive retail experience.
In this post, I will focus on the physical buildout of the shop (RFID scanning! Burglary! Coasters! Sirens!), as well as some of the lessons we learned along the way. Future posts from Amy Lee and Eli Brumbaugh will discuss the software side of things and visual design, respectively.
Before I introduce myself, here’s some footage of the Design Shop in action as conference attendees use it to browse the Salesforce UX t-shirt portfolio:
A Researcher-turned-Engineer
I joined the Salesforce UX team two years ago as a researcher. In that role, I kept myself busy connecting our product teams with their customers via various research methods — usability testing, field studies, guerrilla conference interviews in a lab coat, to name but a few. So how did a user researcher get involved in constructing an IoT Design Shop?
Back in the mists of time and in a previous life (the 1990s — ancient history!), I worked as a Java developer. Then I transitioned back to academia and my career soon turned towards user research. However, after hanging out with our UX Engineering team, the coding bug (pun intended) started to bite. I was delighted when, in true Salesforce style, our expert hackers let me help out with their skunkworks project for Dreamforce 2014.
Selling T-Shirts on the Side
Here’s the back-story on the Design Shop: Salesforce UX has a much-loved tradition of giving out T-shirts at Dreamforce. Now these just aren’t any old T-shirts… they are designed by our very own team. People wait in long queues that snake around the building to grab one. The buzz creates a great outreach opportunity to showcase our style guide and to recruit for our Customer Research program.
The day job of the UX Engineering team is to prototype the next generation of our products. However, for Dreamforce 2014 the team was excited about building something beyond the confines of a screen for a change. The act of selecting a t-shirt design was the perfect domain!
What if the process of choosing a t-shirt felt like being at a real store where you just pick it up off a shelf? What if technology could augment the shopping experience by displaying information about your selection on a large screen? The vision for the Design Shop was born.
The Engineering Challenge
First, we had to track the physical act of picking up or putting down a t-shirt. This, the “magic” behind our Shop, was provided by RFID which is a great technology for identifying physical objects. RFID cards are lightweight and credit card sized, and can be easily slipped inside a t-shirt.
A JavaScript-programmable micro-controller board, called the Tessel, from our friends at Technical Machine, provided the perfect RFID card scanner. There will be lots more on how we programmed the Tessels in Amy’s post.
So we had the magic. Now we just needed the shop! Like any good engineers, we spec’ed things out. The shop needed to:
- Stand out in a crowded, noisy conference environment
- Feel realistic and hide obvious technology
- Work 24/7
- Fit within the space constraints of a conference booth
- Stay within our tight budget of ONE MILLION DOLLARS
Just for fun, one of those is a joke.
Putting the Store Together
The shop had four main components: shelf, RFID scanners, the t-shirts, and a badge tag-in/tag-out mechanism. I’ll cover each in turn.
Shelf Thievery!
The shelf was the foundation for our entire experience. We needed it to be of an ergonomically sized and have room for our five T-shirts. It also had to fit within our small booth, and above all, not block RFID signals.
Well, we found the perfect shelf. As to where we found it, I have a confession… After much searching online and offline, we found the perfect one on our doorstep, or to be exact, in our restroom! Thanks Salesforce Facilities! Don’t worry, we ordered a replacement, and yes we cleaned it.
RFID Scanners hanging in Space
How do you keep five RFID scanners hidden under a shelf for a week? We needed them to be plug n’ play for debugging, hence simply screwing them into the shelf was not an option. We considered carpentry, velcro, and even elastic bands(!), before finally settling on the wondrous properties of mounting tape. Throw in some tupperware and insulation padding, plus some very careful measurement, and we had the five Tessels securely placed.
T-shirts, Containers and Coasters
We quickly discounted allowing the visitors to handle the t-shirts directly since we didn’t want to spend the conference re-folding grubby T-shirts!
You’d think it would be easy to find a good container, however it turned out to be quite a challenge. We needed one that was lightweight, robust, sleek and that clearly displayed the t-shirt design. After touring San Francisco’s hardware stores, we finally found a food container.
There was one catch. An RFID card would almost but not quite fit in its base. Fortunately, through extensive trial and error, we discovered that if you are VERY careful, you can trim an RFID card by 1/4 inch or so. Phew.
In the photo, you’ll note our beautiful coasters. Since the range of the sensors was ~3 inches, and we were already transmitting through a ~1 inch wooden table, it was important to make sure the t-shirts were placed directly over the sensors. Our colleague, Aran, made the excellent suggestion of building our own transparent coaster out of perspex. They could even be picked up by the visitor as they tried to puzzle out how the system worked.
Checkout with Conference ID
We placed a sixth RFID scanner on a pedestal for the Dreamforce delegate to tag in and tag out with their badge. This way we could register their selection with their unique badge ID. Finding a good pedestal was possibly the biggest challenge of the project. Cue more trips around SF! After reviewing shelves, microphone stands, and tripods, we settled on a speaker stand which only needed a couple of hacks to do the job.
Prototype, Research, Repeat
Being UXers, we were all about testing the shopping experience to make sure it felt “magical” enough. Throughout the process, we used our UX colleagues as guinea pigs (thanks for your patience, y’all).
Crucially, we knew we had to get feedback from fresh eyes outside our team. In particular, we wanted to learn from our colleagues who demo products for a living — was this a cool demo? Michael McElarney, one of our sales engineers suggested we provide clearer more uplifting feedback after selecting a T-shirt. This inspired us to add a range of sounds including a ‘karate swoosh’ when picking up an item, a ‘Ka-Ching!’ on checking out, and — my personal favourite — a ‘siren’ played when an item was shop-lifted. You can hear them towards the end of this overview video.
And for the ultimate testing, who best to put anything through its paces but some kids? Within seconds of being unleashed, Bruno’s kids highlighted a flaw. When asked to choose a T-shirt, they instinctively opened a container and took one out. Doh. We immediately iterated by placing a strategic sticker over the container’s release mechanism. Thanks guys!
An Awesome Experience
So how did the system perform at Dreamforce? Did things fall apart?
Well, I’m pleased to say that the setup performed admirably throughout the conference. The Tessel boards stayed mounted on the under surface of the shelf, and the RFID scanning worked great. The Store received awesome feedback. We were delighted to hear the phrases “it’s just like magic” and “How does it work?” from attendees — even from grizzled software engineers.
Seeing the conference delegates having fun as they tried out the Design Shop mirrored the fun that all the team had in building it. It was well worth a couple of weekends in the office, and repeated tours of San Francisco’s hardware stores!
The opportunity to build beyond the confines of the screen was an amazing learning experience. Not only did I get to dust off my handyman skills, but it was also rewarding to see the Shop iterate steadily through repeated testing towards its final form: colleague-proof, kid-friendly, and stereophonic. Thanks testers — we couldn’t have done it without you.
Also, for me personally, the project had another important outcome. I’m coding again! I’ve now transitioned to the UX Engineering team. That’s right, the Design Shop was my gateway project. Here’s to delivering another fulfilling experience at Dreamforce 2015. See you there.
Coming up in the next installment, Amy Lee will present our software architecture which is where the project got really fun.
This is part 2 of a 4 part series:
- Turning passion + technology into an experience, Bruno Fonzi
- Physical build-out of the shop, Rick Boardman
- Coding apps for surprise and delight, Amy Lee
- Designing for interactive experiences, Eli Brumbaugh — Coming soon!
Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System
