What do you envision when you think of user experience (UX) deliverables? If you’re like most people outside the UX world, wireframes are likely the first thing that comes to mind. Wireframes are created to provide a visual representation of how a website or application should be constructed. This often consists of vetted information architecture, page layouts, and user interactions that support an optimal user experience. Wireframes, in their most common form, are low-fidelity black and white depictions of where information should be located within a website or application.
Wireframes are most often the largest (and in some case only) deliverable output from UX professionals. Wireframes are regarded as the “meat and potatoes” of UX and are an expected deliverable for any project. In the past, low-fidelity wireframes were presented to stakeholders for approval and passed on to design for the next step in the linear process, but was this enough? As projects evolve and stakeholder expectations change, low-fidelity wireframes are not always sufficient to satisfy the task at hand. Stakeholders often disregard them in anticipation of design or don’t understand how wireframes will translate into the exciting experience they desire. So what can be done? How can we evolve the role of wireframes to accommodate all projects?
Use wireframes internally. Create low-fidelity wireframes to be used for internal discussions and requirements. This still ensures that the framework for the experience is created with the user in mind, but doesn’t require a formal presentation to stakeholders (which may lead to confusion or disappointment). Instead, hours typically spent creating presentable wireframes can be used for collaborative activities during the requirements gathering, creative, development, and quality assurance (QA) stages of the project. Depending on project needs, internal wireframes can range from whiteboard or paper sketches to clickable html prototypes.
This technique works best for projects with tight timelines or clients who are more design focused with little to no interest in viewing or understanding wireframes.
Create medium-fidelity wireframes. Find a balance between outlined boxes on a page and full creative comps. Create wireframes that demonstrate a more comprehensive experience in addition to the skeletal layout of the site or application. Experimenting with different shades of gray and including contextual copy and “for placement only” (FPO) imagery help stakeholders understand where the site or application is going without seeing full creative.
This technique is helpful with lighter, marketing-focused projects.
Team up with design. Instead of presenting wireframes as a unique deliverable during the process, find ways to include design elements in conjunction with the wireframe presentation. Conduct brainstorming sessions with designers to create a shared vision of the site or application. Together, UX and design can create wireframe concepts with design elements that support the design process. This can range from a simple inclusion of high-fidelity elements within the wireframe itself (colors, sample imagery, etc.), to accompanying mood boards, or even to fully vetted creative comps of key pages. While this approach may go against traditional wireframes, it does help give stakeholders an understanding of the entire experience beyond black and white.
This technique is best used for projects that require wireframe development and review but also need additional elements to paint the “big picture” for the clients.
Every project is different, just like every stakeholder is different. Some stakeholders are receptive to traditional wireframes and can understand the intent, while others are unable to look past the low fidelity that comes with wireframes. The approaches suggested above may not work for every project, but hopefully open us up to alternate ways to approach wireframes that help stakeholders gain an understanding of the anticipated experience without confusion or disinterest.
In the end it’s all about creating a great experience for the users. The processes and approaches used along the way don’t have to follow a cookie cutter process. Experiment. Break the rules. Find ways to evolve UX deliverables to meet the changing needs of the digital world we live in. Create an even better experience.