Wireframing Best Practices, Part 2: Wireframing With Your Team In Mind

By Jason Kolaitis, Senior User Experience Designer View Comments

Wireframing Best Practices, Part 2: Wireframing With Your Team In Mind

In the first part of our Wireframing blog series, I discussed the top 10 tips for designing usable wireframes. The #1 tip is to get to know all the different people who will be involved in the web project and interacting with your wireframes. You’ll need to learn who’s on the web team (internal and external), their roles and their needs before you start designing. Each person will use wireframes differently and needs different information. It’s important to understand each person’s expectations and requirements early in the process to minimize rework and avoid project delays.

In my eight years of designing websites, I’ve identified 16 possible roles involved in the design and development of digital projects. Sometimes you’ll have small teams where players perform multiple roles and wear many hats, but the key responsibilities and objectives will remain the same.

Key roles in the wireframing process and their needs:

Key Players/Role

Needed from Wireframe

Benefits

Your Team as A Whole

  • Shared location for wireframes
  • Change log
  • Ensures that everyone is referring to the latest version of the wireframes

Back-end Developer:Develops code to support technology behavior and implements the content management system (CMS)

Technical Architect: Determines the overall plan for organizing all back-end systems and databases.

Development Lead: Works with the entire development team to ensure the technical feasibility of the website

  • Web features and functions
  • Sitemap
  • Allows developers to provide feedback on feasibility and technical architects to determine the technology requirements
  • Reduces rework and code bloat

Front-End Developer: Develops the code to support the site design and layout

  • Break points for responsive design
  • Sections that will be rearranged, hidden and visible at each break point
  • Allows developers to prepare for responsive design
  • Improves website quality across all devices

Visual Designer: Translates wireframes into visually stunning designs and ensures they align to client’s branding standards

User Interface Designer: Ensures the visual presentation is intuitive for end-users

Information Architect:Determines the overall plan for organizing all web content

Content Strategist: Develops copy and media files for all web pages

  • Accurate page ratios/dimensions
  • Visual assets associated with client’s brand (i.e. style guide, color palette, icons/glyphs)
  • Ensures website is created with the correct ratios
  • Allows information architects and content strategists to determine real estate for web copy
  • Ensures the new site adheres to client’s brand

UX Lead: Sets the foundation for the website and works with the design team to ensure quality user experience

  • Consistent wireframe standards
  • Common wireframe application
  • Wireframe owner
  • Brings consistency across all wireframes
  • Makes it easier to build upon one another’s work

Interaction Designer: Creates the behavior for how computers will interaction with users

User Researcher: Uncovers the characteristics of the end users—how they think and interact with systems

  • Wireframe annotations
  • Site behaviors
  • Interaction/scenarios of interface
  • Allows designers and researchers to provide input on the best approach for making the website usable

Project Manager: Ensures the web team is meeting all the needs of the client—including timeline and budget requirements

  • Overview commentary on each functional schematic wireframe
  • Helps define scope of the project to plan timelines and budgets
  • Reduces scope creep
  • Ensures each business case is being met

Training Documentation Specialist: Educates client on how to manage and maintain its new website

  • Wireframe annotations
  • High-level overviews
  • Low-level task instructions
  • Helps them understand how everything works on the website
  • Leads to better quality training documents

Clients and Stakeholders:Set the objectives and goals for the web project and owns the final product

  • Conceptual wireframes free of technical jargon but rich on feature sets
  • Helps set expectations for the proposed site
  • Allows clients to provide feedback on features and functionality

Quality Assurance (QA) Engineer:Ensures all aspects of the website visually and technically behaves as they should

  • Map requirements to correlated system functionality
  • Helps QAs match deliverables to what was promised
  • Accelerates the QA process

With so many different people using wireframes for project success, it is critical for each team member to have all the information they need from the wireframe early in the process. Just remember never to create wireframes in a vacuum and always involve team members and stakeholders early on in the process to get the most out of them!

Learn how Celerity's synergistic teams are winning the digital race.

Posted in: Web Design & Development, Wireframing