Facilitating Collaboration Between Visual Designers and Other UX Roles

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 Shedd

I am a User Experience Designer with a passion for making people’s lives better through design. I have helped over a dozen organizations obtain a competitive advantage by delivering great user experiences across desktop, mobile, tablet and other channels.

View My Portfolio

Follow Me:

  • HI Catriona. I really liked your post because it made me think about design and it's disciplines.

    I have a degree in Communication Design here in Portugal, and the thing i found the most strange when i started to get accointed with the term UXD i found really odd that everyone was separating all the disciplines and the “visual designers” are sometimes outside of the UX process.

    I do understand usability, information arquitechture, wireframing, etc and why it makes sense to have them as sole disciplines…but in reality, design is already everything.

    Design is not about being “visual”, or a product, design is about the process, adequating form and function. Whenever you are designing something you are already going through all the process more or less intuitively.

    I have been doing webdesign for at least 7 years now and i realized i have been doing what everyone calls “UXDesign”. Because i have a process, from gathering information, to wireframing, to designing the interface and doing front-end development, but that is what i was thought design was, an integrated process, user needs are not something on the outside it's something that is a part of.

    That's why i found strange when i read in your post that “visual designers” are sometimes not included in the whole process…it just doesn't make sense.

    I really did enjoy your article and sorry about my english.

  • inspireUX

    Hi Nuno. Thanks for the comment! I'm glad you bring this up because I was worried I didn't make one point clear in this post. You're absolutely right that “design”, or “big D Design” as I referred to it in the article, is composed of many sub processes and functions.

    When I refer to visual design, I refer to the role that focuses on the graphical presentation of information, or designing the interface as you refer to it, which is distinct from other UX roles such as IA, usability, or interaction design. While visual designers (who have a lot of job titles, which could be part of the confusion) are a big part of User Experience, they have a very distinct skillset from other UX roles. It is relatively rare to find an expert visual designer who is also an expert IA, usability engineer, interaction designer, etc, though it is possible. As a result of this distinct skillset, visual designers are often separated from the rest of UX in organizational processes. Additionally, many organizations have visual designers that are traditionally trained as print graphic designers, and aren't as familiar with the end to end UX design process, which creates even further separation in some organizations (but that's a whole other topic on its own).

    So, you're right, ideally organizations treat visual design and other UX roles as a cohesive Design team. However, since there is frequently specialization particularly in the visual design field (which is not a bad thing!), we need to make a clear effort to involve people with this distinct specialty in the rest of the UX process.

    And just to clarify another thing, this post really could relate to all UX roles, not just the distinction with visual designers. Frequent collaboration across the board is the goal.

  • Pingback: Facilitating Collaboration Between Visual Designers and Other UX Roles | i, Buou()

  • This is such an excellent post – thanks for taking the time to put together such a valuable article!

    I would add that while some teams leave out the visual designer until near the end of the design process, there are others that (unfortunately) leave out information architecture and usability. This can be because their skills are self taught and possibly fail to fully understand these roles. In some cases, however, designers may believe they can fulfill all roles in their design process by including a sitemap and a wireframe they craft via their initial discussions with their client.

    In these cases, it is often the visual designer (and maybe the client) who decide architecture and content chunking. This was my experience working in the designer role prior to working at a company that included all of these roles under one umbrella and gave us access to each other’s knowledge and processes. I hope that as the industry moves forward, in addition to coding standards for the web, that we will work together do develop standards for the entire process and bring all roles into full recognition and respect for each other’s contribution.

  • inspireUX

    Great point, Mitzie. The situation you describe is probably even more common than the focus of my post, since there are far more “web design” agencies and freelancers that focus on visual design and don't bring in the other UX skillsets. The first step is to recognize the value all of the different roles can bring, and then you can focus on optimizing collaboration across all roles.

  • This can be because their skills are self taught and possibly fail to fully understand these roles. In some cases, however, designers may believe they can fulfill all roles in their design process by including a sitemap and a wireframe they craft via their initial discussions with their client.

  • Pingback: The Languages of Design - UX Booth | UX Booth()

  • Pingback: The Languages of Design | Web Design Kingston()

  • Pingback: The Languages of Design - UX Booth | UX Booth()