John Henry Krahenbuhl on Collaborating with a Distributed Team

Agency work requires fast response, flexibility in adapting to a range of requirements from diverse clients, and the ability to work fluidly with remote team members.

John Henry Krahenbuhl, Lead User Experience Designer at Epsilon and author of several books on prototyping, walks us through a recent client project that used interactive prototypes to quickly gather consensus around a design challenge–how to satisfy multiple client stakeholder interests on a single page.

His solution streamlined what could have taken several client meetings to obtain approval into one. This article outlines how he did it.

The Project

This was a microsite for a product launch. There were several challenges in this project. The first was to incorporate the interests of multiple client stakeholders—all on a single page. Secondly, we needed to get consensus among the members of our own cross-functional team at the agency. Finally, we needed to do this quickly in a distributed work environment.

Some clients want extremely annotated wireframes or deliverables that map precisely with the requirements. Others want grayscale wireframes or a simple prototype with streamlined annotations. There’s also a range of fidelity required by our clients. Some clients want pixel perfect designs across all platforms in complete compliance with their style guides. Some want all the consumer journeys and flows mapped out. Others are okay with sketchy wireframes and having us fill in only the new aspects of the flow. In this case, our client needed low to medium fidelity assets, along with documentation. The wireframes could be grayscale, and 90% pixel accuracy was sufficient.

The Team

The core team consisted of about five people, with several more who floated in and out when needed. We had a visual designer, copywriters and developers. I was the UX person. We’re a global agency, so our teams are literally all over the map. Our client base is also global. We need to be fast, efficient and flexible. Every project has different requirements, different team compositions, different workflows and different client expectations. This is common for agencies, where projects can vary quite a bit. Having design tools that can adapt with your projects is key.

The First Challenge

Right out of the gate, we knew we needed to address multiple stakeholder interests. Our client had a main product that they were launching, but our design also needed to incorporate products of other key stakeholders within the organization whose buy-in our client needed. All those other products had to be well represented somehow in our deliverables. To me, the solution was the image carousel. But carousels are a touchy topic among designers — marketers love them, but many in the UX community hate them. Inside organizations, you often have many folks fighting for space on the page. You find ways to make peace. That’s the real world.

Inside organizations, you often have many folks fighting for space on the page. You need to find ways to make peace. That’s the real world.

More “Real World” Constraints

About 95% of our work is done remotely. We solve problems for clients with a distributed staff of widespread team members. And with each project, the team composition is different. I need to be able to share ideas quickly with anyone I happen to be working with, wherever they are located. Face-to-face meetings are rare. Being able to collaborate remotely with as much efficiency as possible is key. I use Axure Share because I can just send them an HTML link to the prototype that they can open on any browser. They don’t need to have a copy of Axure to see it. I can also make real-time changes during these conversations to adjust the interactions as we iterate.

Convincing the Team

There were many questions we had to work through as a team. How do we incorporate those other products? What would the content look like? How would the transitions look and feel? How would you interact with it? What happens when you scroll down the page? How would it look on various devices? The simplest solution was to quickly build a prototype to simulate what this would feel like and share it with everyone on the team during the design exploration stage. I was able to focus the conversation on the carousel interaction and how that affected the overall experience. Doing that gave us additional insight to things we needed to avoid or change. This was all done in a distributed work environment using Axure Share.

The simplest solution was to quickly build a prototype to simulate what this would feel like and share it with everyone on the team during the design exploration stage. I was able to focus the conversation on the carousel interaction and how that affected the overall experience. Doing that gave us additional insight to things we needed to avoid or change.

Evolving the Design in Real Time

The original concept was to slide the images from left to right. But with this concept, where we showed the product overlaid on multiple backgrounds, worked much better as a fade. We also were able to fine tune the duration and style of the fade once we got to see it on the prototype I built with Axure. I was able to quickly make enhancements to the wires to test out the concept and share that with my colleagues in real time.

We wouldn’t have been able to work through all the complexities of the interaction with just a wireframing tool. When you work with an interactive prototype, it helps us think through all the visual requirements. In this case, when we prototyped the interaction, we realized that the rotating images had to be perfectly angled and aligned with the fixed image that’s overlaid on top for the entire concept to work. Once we figured that out, we were able to develop guidelines for the content based how our final iteration in the prototype.

Looping in Developers

We’re usually given a project proposal document and a basic design brief at the start of a project. These are living, breathing documents that change as we go along. We typically build wireframes and get a round of feedback from our client. When the wires are approved, we move on to the visual design and copywriting phase. After the client signs off on the copy and visual designs, the project moves into development and quality assurance. I like to do checks with the development team along the way to make sure what we’re designing is realistic. That helps to reduce development cycles later.

Outcome

Before we presented the concept to our client, we were able to get internal consensus by flushing out all the issues and incorporating everyone’s tweaks through changes we made in the prototype. This got us alignment internally, so when we made our presentation, we were all behind the proposal.

Internal alignment is key to getting external buy-in.

Often, the client would ask questions of various team members about what they think or whether something would work. When you have internal alignment, each person can respond that they’d already considered the various aspects and discussed it with the team. Internal alignment is key to getting external buy-in. That was true in this case. I’d say the prototyping exercise we did over Axure Share helped us get there faster, reducing what would have taken at least two meetings with the client into one. All this took took a little more than four weeks from concept to launch.

Key Takeaways

Align internally before presenting externally. Politics notwithstanding, clients are more hesitant when they sense a lack of alignment on project direction. The default behavior is to solicit the opinion of the person on the team with whom they have a relationship. That could be the developer, the visual designer, the business analyst or someone who may only be tangentially involved in the project. Secure their support before making the big presentation. It’s especially important when that person works in a different location, leading to an out-of-sight, out-of-mind tendency.

It’s okay to break design rules. In this project, that meant using an image carousel, among the most scorned UI elements. But when there are many stakeholders and limited screen real estate, carousels can help accommodate more interests. “Inside organizations, you have many folks fighting for space,” John said. “You need to find ways to make peace. That’s that real world.”

Use prototyping tools that let you collaborate online in real-time. There is a saying that a prototype is worth 1,000 meetings. For this project, being able to demonstrate the concept and make modifications in near real-time using Axure Share helped overcome reluctance over using a carousel. Starting with several initial mockups, shared via a URL link to distributed team members, John’s team was able to think through the design as John modified the designs to take into account a number of scenarios brought up during the meeting. Changes are reflected in the shared file, which other team members can view from any location.

About John Henry Krahenbuhl

John is a Lead User Experience Designer with Epsilon, a global digital marketing firm with more than 7,000 associates working in 70 offices worldwide. Prior to joining Epsilon, John spent 19 years as an engineer and user experience prototyper at Motorola, where he earned nine patents for his work designing hardware interfaces. He’s also the author of three books about Axure (Packt Publishing). The latest, “Axure Prototyping Blueprints,” came out in August. John is pursuing a Master’s Degree in Computer Science at the Illinois Institute of Technology and has a Bachelors of Science with a focus in eBusiness from the University of Phoenix as well as an Associate of Science in Computer Science from Harper College.

Please Note: Because much of John’s work is confidential, we are unable to divulge the name of the client and several other details of the project. The opinions expressed in this article are the opinions of John Krahenbuhl, and do not reflect the opinions or views of Epsilon Data Management, LLC, its parent company, affiliates, and/or subsidiaries. Reference herein to any methods, strategies, services, products, or other information, do not constitute or imply any endorsement by Epsilon Data Management, LLC, its parent company, affiliates, and/or subsidiaries, of such methods, strategies, services, products, or other information.