On April 17, AT&T worked with Microsoft and my employer Avenue A | Razorfish to launch the first retail application of Microsoft Surface touch-and-recognition table technology at a limited number of AT&T wireless stores. Surface promises to improve upon the often-confusing process of buying a mobile phone in a retail store, and even make learning about mobile devices fun. Until its public launch, though, most consumers hadn’t even seen a Surface table. Few user experience designers had, either. So what was it like to create a user experience design for the launch? Superhype sat down with Rich Bowen of Avenue A | Razorfish to find out. Rich is a user experience lead dedicated to the AT&T account. He lives in Denver, and his work supports AT&T digital advertising and website design across the agency’s Atlanta, Austin, and Seattle offices. His job was to work with a team to design how consumers would interact with Surface tables in the stores. Here is his story.
Superhype: Rich, most consumers haven’t even seen a Surface table. Why are they important?
Rich Bowen: Surface can make the buying experience a lot more fun, especially for products that require high levels of consideration before purchase. With Surface, a salesperson does not need to explain how a mobile device works or whether AT&T can provide coverage to your area of the country. Instead, the consumer and salesperson can sit down at an interactive screen and see the information they need. For instance, using Surface, consumers can review features of a device by placing it on a table. Surface recognizes the device and displays a graphics-rich overview of features. Consumers can also use touch-and-hand movements to explore an interactive map that reveals how much coverage AT&T provides in different areas of the United States.
Superhype: When did you first learn about the opportunity to design a Surface experience?
RB: John McVay, the Avenue A | Razorfish client partner for AT&T, called me back in August of 2007 to say we had an opportunity to work with Microsoft and AT&T to bring digital to the retail space. I don’t even think Surface had a name yet. It was understood to be a “Microsoft multi-touch experience,” and that’s about it.
Superhype: What was your reaction? Had you ever seen a Surface table at all?
RB: I was very excited. We have been trying to move digital beyond the web all along, and one way to do that is through the multi-channel shopping experience. Avenue A | Razorfish already does a good job with the online part, but Surface would give us another opportunity to use digital to touch our consumers in the retail space at the point of purchase.
Superhype: Had you ever seen a Surface table before you got the assignment?
RB: I had never seen one, and it was understood that we’d need to start designing the experience without seeing one for awhile.
Superhype: Tell me about the team you assembled to pull this off.
RB: We assembled a team consisting of two user experience leads (including myself), an art director, a creative director, and a technology expert. The team was selected based on our experiences working with animation. We also needed to work in an even more collaborative fashion than we normally do because Surface was an unknown experience. Normally the user experience designers create a design and hand it off to the art director and creative lead to create the look and feel. But Surface was just too new, and there were too many unknowns, for us to be handing off work to each other like that. We set up the team to work in a room together and tackle questions and issues on the spot.
Superhype: So how did the team get started?
RB: We relied on some processes that work in general for us when we design experiences. It doesn’t matter whether you’re designing for a website or an in-store Surface experience: everything starts with a business challenge and consumer insight.
We first talked to AT&T to understand the business challenge. Andy Austin, the director of retail experience at AT&T, challenged us to decrease the time that customers spend with sales people and increase total order volume in-store – basically to sell more and do it in less time. Andy believed Surface would help him do that, and that’s what we set out to do. Once we knew that, we had our path laid out for us.
The second key driver of the design is consumer insight. We already had a strong understanding of how consumers research and shop for mobile devices online and offline because we have a long history of designing websites and digital advertising for AT&T going back many years. We’ve designed personas (composite sketches of a company’s customers) for AT&T’s wireline and mobile businesses going back to 2005. Our understanding of how consumers shop at AT&T stores was crucial to the process.
The team also agreed on how Surface would work in the store before we designed the experience. Our assumption was that the use of Surface would never be self-directed – it would be a tool to assist the sales agent, not replace the agent. And our consumer research told us that buying a mobile device can be complicated and challenging for consumers — so the last thing consumers want to do when they walk into a retail store is have to learn how to use a Surface table. We also needed to remember that consumers are going into the store to learn about hand sets, rate plans, and accessories. The Surface table would need to support that process of learning about devices and accessories, not get in the way of it. This assumption was important because as we started designing the experience, we would eliminate some ideas that, while kind of cool, would have gotten in the way of learning about mobile devices.
Superhype: Once you had an understanding of the business need and consumer insight, how did you begin the design?
RB: We worked with Microsoft experts to learn more about what the Surface table was going to look like. Microsoft shared with us documentation to help us envision how Surface operates. Then we began to develop storyboards for the Surface experience. This is where our understanding of consumer buying behavior comes into play again. We were able to figure out the relationship between the consumer, the table, and the customer service representative. Knowing what we know about how customers shop for mobile devices, we thought through the content and messaging that would work – devoid of any specific interaction design.
For instance, we knew that consumers usually walk into a wireless story with three basic questions on their minds: can the carrier provide coverage to the geographic areas of the country that matter to me? What kind of rate plan do you offer? And what kinds of devices and accessories are right for me?
So our first storyboard used the metaphor of a map to help a consumer understand whether AT&T supported adequate geographic coverage. And then we figured out storyboards for learning about rate plans and devices.
Superhype: How do you design a storyboard for someone sitting at a Surface table when you’ve not used one?
RB: The design team literally sat down in a room and pretended like we were sitting at a Surface table. We examined all the documentation provided by Microsoft and found some early videos of people interacting with Surface. Then we catalogued all the types of gestures a consumer might have with Surface — how you touch Surface, how it receives information, and what Surface does after receiving information. I’m talking literally about the gestures are how you interact with a table – touching two corners of a table, tapping an object on the table, or circling information. We mapped the gestures against the different interactions in the sales process.
When we designed the storyboard for the U.S. map, we started thinking about the ways people are accustomed to using a map. We mimicked how people interact with a paper map because many of those interactions are the same. Once we honed on the map and found out that the technology would work, we turned our focus to other applications like “phone explorer,” which helps consumers learn about handsets.
We conducted additional stakeholder interviews and got input from Andy Austin as we went down this process of creating storyboards. The storyboards were important because they helped us frame the business and design challenges — and they helped Andy sell the idea inside AT&T.
Once Andy got approval to continue, then we moved from storyboards from more detailed design.
Superhype: When did that happen?
RB: Our design work began in earnest January 2008 with a hard deadline of April 17 to launch.
Superhype: No pressure, right?
RB: No pressure at all. (laughs). I’m used to it.
Superhype: So what happened next?
A few of us on the team went to Microsoft developer training just to see a table. The developer training isn’t really geared toward designers, but at least we got to see one and get a feel for it. Once we got a better sense of how Surface works, we did more research into the process of buying a mobile device to refine our assumptions, and then we started designing the Surface interactions like were designing for a web experience.
We knew that geographic coverage is critical to the buying process, so we started designing the coverage map. It’s also the one area that has the most technology risk because we were working with a vendor of coverage maps who had never seen a Surface table.
Superhype: You say that you designed as if you were creating a web experience. But Surface isn’t a web experience.
RB: That’s true, but consumers are comfortable with the web metaphor. Remember, consumers do not want to walk into the store and feel like they had to learn about Surface tables in order to learn about a phone. We wanted to give them an experience as familiar to them as possible.
Having said that, although we used some basic web metaphors to get consumers comfortable, we also departed from the web experience. For instance, we use buttons to get information, not drop-down menus. Buttons are simpler especially in a store where there are more distractions going on around you when you’re learning. Drop-down menus make people hunt for things. We want people to see things immediately and just touch what’s important to them
And a menu isn’t the right metaphor for a Surface table. You don’t need that in a retail store, not if we want to make finding information instore easy. Instead, we use a little click wheel at the table.
Superhype: Can’t we make design online as simple as pressing a button?
RB: Actually, I think we will. Drop-down menus require a two-part interaction of clicking and navigating. I think we can improve upon the experience especially when consumers are shopping and buying a product online.
Superhype: When did you have the design done?
RB: We had it done April 11, just in time for an April 17 launch. But keep in mind that this is a “final design” for a prototype.
Superhype: What lessons have you learned so far?
RB: First off, include technology and creative in the user experience design process. Especially with a new experience like this, we had to be even more collaborative than we usually are. We needed technologists involved early to understand the boundaries of what is possible.
Second, never underestimate the value of content strategy and animation designers. The content strategists helped us determine which content would be most beneficial to the business and customer challenge. Animation design takes our insight into the brand experience to another level.
Superhype: What happens next?
RB: We are working with AT&T to observe how consumers actually use Surface in a store. Based on those learnings, we will adapt our design, and then hundreds more of these tables will be rolled out across AT&T wireless stores nationwide.
Superhype: When will that happen?
As fast as MIcrosoft can make them!
More about the launch here.