Meeting the challenges of collaboration in web design
One of the biggest challenges in web design is that teams can often lose sight of who they’re designing for. Managing the goals of a web project can get stressful when balancing the interests of several groups of well-meaning stakeholders. If unmanaged, the disparate feelings and expectations of all these groups can morph together like a Frankenstein’s monster, and you end up with menus inside of menus inside of menus and 20 distinct options all clamoring for your immediate click! Design fail.
These web-tastrophes can be averted by focusing first on building empathy with the end user of your website, typically the consumer, potential client, donor or student, etc. One of the most important responsibilities of a web designer is to champion actual users and help partners build consensus around how to connect with them.
So this past May, the Gainesville chapter of the Florida Public Relations Association (FPRA) invited us to lead a collaboration workshop at its annual Professional Development Symposium.
We wanted to give communications professionals a new tool to help them foster collaboration in the early stages of the web design process. One of the most successful and engaging ways to chart these pathways to user empathy is called…
Design Studio Method.
Design Studio Method was developed and popularized by idealogues and UX shamans Todd Zaki Werfel and Will Evans, and has since been reconfigured, repurposed, and customized by countless others. It brings together the website’s stakeholders to rapidly prototype potential designs using the skills they have available: their hands, pencils, and papers.
It’s important to remember the Design Studio Method is a step in a process, not a final solution. While it will generate a whole slew of new ideas (potentially a month’s worth of work in a single afternoon), it doesn’t necessarily yield a final product. Rather, it helps create buy-in around a common vision. You’ll still have to work out the details afterward.
“But I’m not a designer!” you may protest. Well actually, you (probably) are. As psychologist Herbert Simon said,
“Everyone designs who devises courses of action aimed at changing existing situations into preferred ones.”
That quote is often used, but it’s darn good. In other words, if you seek and devise solutions to problems, you’re a designer.
Design Studio Method is built on the belief that everyone can sketch. In this case, sketching is just arranging symbols for where key pieces of content, like images, menus, titles, body copy, login fields and miscellaneous widgets should go on a website.
Every website has a distinct purpose. Before you get started on the process, you need to have a pretty good idea of what that is. For the FPRA workshop, we focused on a community based network called “Gainesville Inspired”, with the purpose of communicating how attractive and vibrant our community is for young professionals and entrepreneurs, and driving users toward meet ups and gatherings. The key tools for the initiative will be a website that serves as the main area for stories and activities, job opportunities, citizen spotlights, and blog articles.
Remember earlier, when I mentioned empathy? Just as important as knowing the mission is knowing who you are helping. Before your design spaceship arcs into conceptual hyperspace, you need to make sure you’ve worked to create a strategy around who your audience is and what they want.
We used provisional personas and base our methodology on the book, About Face. It’s a pretty lengthy work, but here are the basics.
- Based on real research and data
- Aggregates of themes and analysis from the research phase
- Fictionalized stories to help us empathize.
- Similar to “an audience,” but tailored based on research
I want my skills valued by a group of my peers.
– Gavin Belson, Primary Persona
So where do I share?
– Monica Crews, Secondary Persona
Personas are crucial to ANY initiative. Figuring out the who and the why BEFORE you start designing is the cornerstone of good design. Most people have a cloudy idea of “the user” in their head, and it can be all to easy to bend that user into any shape they want. Personas are the flux capacitor to your DeLorean. They are more than just a face and a name, they are sages, advisors and ambassadors to the real world.
Focusing on personas rather than cold, robotic metrics helps us address a more human experience and paves the way for meaningful, engaging design. These should be prepared before launching into Design Studio, and believe me, the more time you can spend on these the better your outcome will be.
As we mentioned, Design Studio Method is really ideal for teams with a diversity of expertise who need to solve challenges quickly. You’ll want to make sure you have people representing the business interests of the website (strategy, management, sales, marketing, operations), the designers of the website (graphic designers, interactive designers), and the technical experts who have to code out the functionality (web engineers and developers). Getting the product owners in on the party is extra-ideal- It promotes buy-in and peels back the curtain for them on just what the hell design teams do all day.
Ideally, you’ll want about 3 to 5 people per team and at least two teams. It’s a nice, manageable number that gives everyone time to participate but doesn’t bog down the process.
The core of the Design Studio Method is based around a series of actions: Sketch, Pitch, and Critique. You repeat each of these steps, gradually upvoting what teams agree on during each round. Here’s how a typical round would go:
Sketching is where you start to create early iterations of how you think the website layout should function based on the persona. The goal here is to get as many iterations documented as possible to best address the challenge and persona. 5 minutes is all you get, so keep it fast and loose, aiming for six to eight. Just remember that the next step is to pitch your ideas, so don’t sketch what you can’t pitch.
Take 2 minutes to pitch your work to the rest of your group. You should explain the benefits of your design and how it helps the target persona, focusing on empathy.
My design addresses the primary persona’s need for real stories, by featuring quotes from locals right there in the first impression.
– Workshop Participant
As a group, take 3 minutes and have each person in the group share feedback. Keeping the persona in mind, acknowledge one or two ways the design solves the problem. Then offer 1 to 2 opportunities for it to improve. Remember, critiques should be objective, rather than subjective. So try not to get attached to your work, and just let the oncoming critique wash over you like a cleansing mist.
While I love the simplicity of the spotlight section, I’m concerned that the prominence of the quotes will obscure a clear navigation, which is important to the secondary persona.
– Workshop Participant
Repeat and Next Steps
Once everyone in the group has pitched and received critique, repeat the process with fresh designs that incorporate the feedback from the critique phase.
Stealing is totally okay! Just remember that if you take someone else’s idea, make it better.
After another round of sketch-pitch-critique, it’s time to zoom out and bring your ideas to the other teams. Nominate someone to sketch and someone to pitch, and synthesize the best ideas from your team into one prize concept. Now, have teams pitch to each other. Ideally, you’ll set aside 3-5 hours for this, repeating the process and narrowing down what works.
Design Studio Method is a radical way to generate concepts and test out ideas. You’ll learn a ton about how to collaborate with your peers, how to work with web designers and engineers, and how to think about your users. Weirdly, the insanely short time budget actually stimulates a wealth of great ideas into the open. Most will fail, of course, but you will glean some great concepts that can be further developed into prize designs.
Success consists of going from failure to failure without loss of enthusiasm.
– Winston Churchill
About Chad Paris
Chad wanted to own the happiest business in the world and that goal fuels everything he does. Chad’s role is all about relationships and communication with clients and with the Parisleaf team. Chad’s passion lies in giving back to the community—some may call this networking. Chad attributes Parisleaf's success to refusing to be sad. Seriously.