When you get to the nitty-gritty, things can get chaotic, and at times unfriendly. But in an area like UI design, “going it alone” is rarely an option. No designer is an island. Like them or hate them, you’re going to need to rely on your teammates at some point in the development process. A lot of people have bad associations with working with others: having their ideas shot down, doing all the work for a lazy co-worker, enduring suck-ups and hidden agendas.
We’ve always felt these two quotes help capture the complete spectrum of what design collaboration can feel like:
“Coming together is a beginning; keeping together is progress; working together is success.”- Henry Ford
“Hell is other people.”- Jean-Paul Sartre
As described in Chapter 7 of the free e-book Web UI Design Best Practices, collaboration is a lot more than delegation. It’s not just “you do this and I’ll do this.” Collaboration is about enhancing each other’s work and creating a harmony. It’s following a smart plan to avoid both confusion and wasted effort. Collaboration is creating something greater as a group than would be possible for an individual.
We’ll discuss how to avoid design by committee and something as simple as a mood board can add collaboration into the UI design process (without cringing).
Committees were Designed by Committees
They say a camel is a horse designed by a committee. Anyone who’s ever had their creative vision shot down or diluted by such a group knows how true this is.
As Speider Schneider, former Product Designer for ESPN, points out, too many people believe that their opinions outweigh others, even professional experts. In a committee setting, you have an unequal distribution of aptitude but an equal distribution of power. Instead of working together to go faster in one direction, this environment encourages tearing apart in different directions.
Source: Marketoonist
But these are not arguments against collaboration — just design by committee. There are ways to get the benefits of working together without too many cooks in the kitchen.
Andrew Follett, Founder of Concept Feedback, explains that design committees are often formed for the sake of involving everyone — or to simply make it easier and more anonymous to point fingers later. There are five reasons why committees fail:
-
No clearly defined objective.
-
Suggestions stem from individual opinions more than facts, research, or experience.
-
No strong leader.
-
Feedback process is unorganized and ineffective.
-
Members are furthering personal or political agendas.
Addressing these issues, then, will allow for collaboration the way it should be. Yotam Troim, Director of Product at Fundbox, believes that involving a few people in the design process is mandatory since very rarely will one person be able to foresee all the required changes. That being said, the design process should be owned by one person. Here’s a few guidelines:
-
The designer has final say — Implement a funnel of power: accept opinions from a broad range of people, but as the decisions are being made, that range of people become fewer and fewer, peaking at the designer. But this strategy only works if the designer is genuinely open to others’ ideas.
-
The designer must be a respected figure — Rallying around an inept leader would be just as disastrous as a committee, perhaps worse. There must be an element of trust and respect towards the designer, so that their decisions aren’t shut down immediately, even if they’re unpopular.
-
Feedback comes in the form of a problem, not a solution — This keeps people’s personal opinions in check. “The homepage doesn’t show a clear next step” is a lot more helpful than “I think the home page needs a larger button…let me show you!”
-
Feedback must not be vague — “I’m not feeling this,” or “ this doesn’t excite me,” are not acceptable. Worse still is the dreaded “Make it pop!” Team members should try Dustin Curtis’s Three Question Rule: the critic is required to answer three questions about their comment to flesh it out.
IDEO seems to have a knack for avoiding the common pitfalls of improper collaboration. Johnnie Manzari, UI Designer at Apple, shares an anecdote about the importance of someone making the hard decisions:
“In college I took a class from David Kelley, who ran IDEO at the time. He showed a video of the IDEO design process for making a shopping cart. During the brainstorming and research phase, the walls were filled with hundreds of different concepts. Some were wild deviations and some were slight modifications. They then chose three concepts to continue exploring in the prototype phase. I asked David Kelley how they went from walls full of concepts down to three and he said ‘I picked. At some point you need to pick. Otherwise, it’s a circus.’ ”
Brightening Mood Boards
Want a way to unify your team that’s a lot more fun and creative than an uncomfortable meeting? We go into details about mood boards in Web UI Best Practices, but we’ll discuss their significance again here. Mood boards are ideal for encouraging — but not forcing — input from your team, quite a different strategy than the committee mindset.
Popularized by industries such as fashion and interior design, these stylistic collages have been proven effective across many visual industries, including web UI design. Mood boards give designers more creative control because the context is easily understood: since everyone’s looking at an early stage design, the feedback is mostly conceptual. That helps prevent stakeholders from getting too prescriptive like when they pick apart the navigation or font size of a mid or high fidelity mockup. Even if they feel strongly about certain visual themes, the designer still has control over creative execution.
Take a look at the above mood board made by UX agency ClearLeft. This mood board is more than just a Pinterest-style collage — its a canvas that shows (rather than tells) the typography, colors, and overall feel for the site. Web Designer Depot explains that mood boards show clearly the aesthetic feel of a site, and act as a quick reference guide for the design’s visual elements. You can think of mood boards as a succinct and abridged style guide, in poster form for easy reference.
As to what you include on your mood board, make sure you cover brand guidelines, communication style, and the personality of the website. Web design mood boards should focus on a specific set of elements:
-
Color palette — your site’s color scheme and primary colors.
-
Typography — any useful information about fonts, sizes, heading preferences, etc.
-
Graphic style — what kind of photos or illustrations you prefer, with examples.
-
Iconography — if your site uses icons or symbols, this is a good place to keep them straight.
-
Navigation style — the basics of how users get around your site.
-
Spatial awareness — where and how much white space is used.
-
Overall contrast — this helps to emphasize the overall visual hierarchy and structure
Mood boards are meant to be creative, so don’t get pigeon-holed by the technical details of the board itself. They generally they fall into two styles, Loose and Refined. Compare the two different styles of mood boards for the same site, ModBaby.
Loose Mood Board
Source: ModBaby, via Web Designer Depot
This style is more about capturing a snapshot of the site’s look and feel. In fact, the first moodboard by ClearLeft is done in this looser style. All that’s required is few quick adjectives to describe the brand, an overall color scheme, and images and elements to show how everything “feels”. In this case, feedback on the mood board would be mostly conceptual.
Refined Mood Board
Source: ModBaby, via Web Design Depot
The refined style is more streamlined, showing the brown and blue color scheme but dropping handmade elements in favor of more explicit patterns, typography, and photos.
In general, mood boards help avoid design by committee in two ways. First, all team members have a clear visual representation of the their target (as opposed to relying on their own interpretations of verbal descriptions). Secondly, a visual asset in the beginning phases can help alleviate “empty canvas” syndrome, in which people provide feedback simply because it feels better than waiting for the first draft. Moms Bang Teens top rated movies Pornlux.com .
While some people would rather take a “hands-on” approach to their mood boards by cutting magazine clippings and pasted them to a board, there are some digital tools such as ImagePacker, Vhue, and Niice that can add a nice touch of refinement. Regardless of your methods, we’ve found Dribbble, Behance, Pinterest, and Flickr’s Inspiration Boards are great resources for mood board inspiration.
The Anti-Committee
If you want to create a successful web UI design, you’ll probably need a little help. But that’s a good thing — when done right, collaboration can enhance the final product in ways not otherwise possible. Just make sure that collaboration is complementary, and not supplementary, to the design process.
Like sketching, moodboards help you see the visual ingredients of the website while getting you over the groan zone faster. And if nothing else, they’re a less labor intensive way of treating those afflicted with I’ll-know-it-when-I-see-it syndrome.
For more practical advice on building web interfaces based on examples from 33 top companies like AirBnB, Wufoo, and Linkedin, check out the free 109-page e-book Web UI Best Practices.
These mood boards look like they were done by a teenager, ripping articles out of a magazine to tape to their lockers. Can we get some professional, modern examples please?