Facilitating Collaboration Between Visual Designers and Other UX Roles

In some organizations, “User Experience” is a treated differently from “Visual Design” (or “Creative”) and there is a distinct separation between the teams.  In others, Visual Designers are an integrated part of the User Experience team.  Regardless of team structure, however, there is often a pattern of UX deliverables such as wireframes or basic prototypes being handed off to Visual Designers to “skin,” or as some unfortunately call it, “make things pretty,” with little or no further involvement from the rest of the UX team.

There are some common problems with this approach:

• Information Architects and Interaction Designers feel they lose influence over the design process once it’s in the hands of a Visual Designer
• Visual Designers don’t feel they are involved early enough in the process to understand design inputs or to influence what goes into a given design
• There’s an inherent disconnect between the knowledge that went into wireframes/prototypes and what is translated over to the Visual Designer
• Design decisions are often seen as subjective as opposed to grounded in research and analysis

There are several techniques that members of the “big D” Design team (including all UX roles/responsibilities) can use to better collaborate to make sure the end design best represents an optimal user experience and is grounded in input from the entire team.

Before visual design begins

Goal: Capitalize on varying team perspectives to define the user experience and facilitate shared understanding of design inputs.

• Collectively define the overall user experience separate from architectural or design elements: Engage the entire team in defining design principles and the user experience strategy that will filter down into all design deliverables.   This helps keep everyone on the same page throughout the entire design process and helps to make sure that the visual design reflects design principles that may not be clearly visible in wireframe form.
• Have all roles participate in generative design activities: An example of a generative design activity is when each team member sketches out 10 ideas for a product in 5 minutes and then the team regroups to share ideas and discover patterns.  The idea is to get as many quick ideas on the table as possible to discuss overall themes and experience approaches.  Encourage all team members to participate in these activities to get input from all team members early in a project and to foster collaboration before any design decisions are solidified.
• Share early concepts with designers while they’re still in progress – IAs and IxDs should involve Visual Designers as early as possible to get their feedback about how a site/app will be structured both at a global level and at the page level.  Visual Designers can provide a unique perspective in regards to information hierarchy, element placement, and how to create overall design cohesion.  This can both help to refine wireframes and early prototypes as well as give Visual Designers a better understanding of  decisions that went into IA and IxD deliverables.
• Conduct user research that can influence visual design early in the process: While it is fairly common for UX Designers to validate user behavior and mental models with techniques such as card sorting, paper prototyping, or conceptual usability tests, we often neglect to perform early techniques that can specifically influence visual design.  Performing research techniques such as user-generated mood boards or getting reactions to storyboards of an experience can help feed the visual design process and help designers start to think about ideas even before wireframes and prototypes are complete.
• Discuss usability tradeoffs of high-level design approaches: Before a designer invests a lot of time into creating a visual design, the team should collectively discuss potential usability implications of various approaches.  For example, how a Flash site might pose usability problems that might not be present in a standard HTML site.  The team should also discuss how proposed style guides should be adjusted to account for things such as optimal readability.
• Document IA elements and interaction models that impact visual design: Wireframes and prototypes should be annotated to explain intended page-level interactions and any other specific details that might influence the visual design.  In cases where the Visual Designer is not actively involved in all stages of the project, this becomes even more critical to make sure that no aspects of the experience are lost in the transition from wireframes to visual design.

During the visual design process

Goal: Through frequent cross-team collaboration, treat visual design as an element of an iterative user experience design process as opposed to an isolated activity.

• Don’t “hand-off” deliverables: User Experience is a continual iterative process.  It is not simply a matter of checking off deliverables on a to-do list, passing those deliverables off to another team member, and never seeing it again.  All Design team members should remain involved throughout the visual design process.
• Conduct frequent reviews of the design: Design team members should frequently review visual design deliverables and be available to clarify what was presented in wireframe or prototype form.  Design reviews allow Visual Designers to explain how to best display elements of an interface while other UX roles can make sure that other key elements of the defined experience are incorporated into the design.
• Collaborate to effectively convey information hierarchy: An IA can help determine what information should be most prominent on a given page to help the user complete a task, while a Visual Designer can help translate those priorities into an elegant and effective design.  This is just one example of how multiple roles need to work together to achieve similar goals.
• Balance aesthetics with usability: The Design team should have an ongoing conversation regarding how to best balance aesthetic presentation with usability principles.  Heuristic reviews should be conducted to help the design reach optimal usability, while the Visual Designer should help determine how to best balance beauty and function to represent the brand in ways that appeal to the end user.  Ideally, the team should reach a point where aesthetics and usability are considered equal as opposed to constantly fighting each other based on varying team members’ priorities.
• Ask a lot of questions: The iterative nature of the design process should encourage team members to question specific design approaches.  Visual Designers should question decisions made by other Design team members and help to evolve the experience based on discoveries made throughout the visual design process.

After the visual design is complete

Goal: Encourage a united front in communicating the design to other project team members and foster a shared interest in analyzing the design’s performance.

• Document the rationale behind design choices: A design direction should be communicated to clients in a way that accounts for the inputs that all team members contributed to the end design.  Team members should present a unified rationale that solidifies the team as a whole as opposed to separate entities.
• Test the design: Conduct usability tests to make sure assumptions and design decisions made post-wireframing result in a positive user experience.  Visual Designers should observe these sessions along with other members of the Design team to receive first-hand feedback about their designs. All team members should debrief following the tests to determine how to address user feedback.
• Follow-through during development to make sure the design is developed as intended: All members of the Design team should take on the responsibility of reviewing designs as they’re developed to make sure that all of the detailed decisions the team made prior to development are incorporated into the product. This also includes things such as making sure the design is built to be accessible, optimized for search engines, and compliant across browsers.
• Monitor the effectiveness of the design to influence future iterations: Monitor web analytics and consider conducting A/B or multivariate tests to optimize the design post-implementation.  Having all members of the Design team involved in this process helps encourage design changes (including architecture, interactions, and visuals) to be based on data as opposed to subjective opinion.

What techniques have you implemented to facilitate collaboration across the entire user experience team?

Catriona Cornett

Catriona is a User Experience Designer who has helped over a dozen organizations obtain a competitive advantage by delivering great user experiences across desktop, mobile, tablet and other channels.

View My Portfolio