notch-blue

How Low-Fidelity Helps Define Your Vision

By:
July 25, 2017

The Wireframe is a deliverable that is almost as old as the field of UX itself—people sometimes still mistakenly think the term “wireframe” and UX mean the same thing.

A wireframe in fact, is defined by Google as an image or set of images which displays the functional elements of a website or page, typically used for planning a site’s structure and functionality. Wireframes are a tool that we in the UX field use in the early part of our process to define the high-level framework of a site or application.

The wireframe evolution

In the early days of interactive, site design was fairly simple—there were no mobile devices to consider and the only real functionality was the ability to link off to another site. Web pages were basically magazines or brochures that were viewable on your computer.

Back then, it made sense to create a static wireframe for each of the site’s pages. These wireframes provided the UX practitioners, visual designers, and developers tasked with building the web’s earliest sites with a blueprint for each page on a site.

Over time, as technology has advanced, the functionality available online has expanded exponentially. Users now expect the ability to manage key aspects of their relationships with their financial institutions, insurers, and healthcare providers from all of their devices.

As digital products have evolved to be more interactive and feature rich, the 1:1 wireframe-to-page ratio is no longer a viable solution—we would spend too much time managing the wireframe deck and not enough developing a strategically sound design based on user needs.

Today, we transitioned to more of a systems-based approach. This process involves producing wireframes for what we call the “core site system,” which includes overall site navigation, key page types and design patterns to show how each unique type of content should be handled across multiple screen sizes.

The goal of this approach is to clearly communicate how the design system will work in the lowest fidelity manner. Experience tells us we can save time, money and a whole lot of frustration by getting the entire team aligned on the design as quickly and efficiently as possible— before any effort is spent on the back-end development.

Creating the design system

After nearly two decades of making wireframes in all shapes, formats and fidelities there is still one thing that is consistent about this step in the design process:

Many of our clients struggle to understand the purpose of this deliverable. They look at this low-fidelity, black and white diagram and wonder how it fits in to the bigger picture—how on earth is a static page supposed to evolve into the complex and transactional application their business requires?

We hear these questions when we present low-fidelity versions of the site to those new to our process:

  1. This is great but will it have more color when we build it?
  2. (referencing Lorem Ipsum text) It looks like you have the wrong language in here. Are you recommending we have a Spanish version?
  3. I only see a handful of our products here? What about the rest of them, you know we have over 3,000?
  4. Our site has a lot more pages then these
  5. When will you show us the rest of them?

It’s clear based on these questions that we as designers need to provide more context and a better understanding of we taking a low-fidelity approach is integral to the design process.

Low-fidelity concepts help to:

  1. Quickly communicate the primary patterns that emerge in a design system.
  2. Present concepts and strategies to establish the foundation of a navigation system and site structure.
  3. Demonstrate core site or application functionality.
  4. Validate that the structure can accommodate all of the content and functionality so we don’t “paint ourselves in a corner” during the visual design and implementation.
  5. Provide the foundation or a stake in the ground for a direction to move forward.

Low-fidelity concepts are not intended to:

  1. Demonstrate the visual design approach of the site.
  2. Be the final page and navigation structure that will be implemented.
  3. Show every permutation, variation, use case and content type that exists.
  4. Prevent or stifle innovation, change and the evolution of the design systems, and patterns.

Validating the process

While it may be challenging to get all team members fully engaged in the process, we use a few techniques that help make this part of the project more successful and efficient.

  1. We start by using a sketching methodology (hand drawn sketches) and involve key players from the client’s team to collaborate with us to ideate and hammer out the core components and patterns of the web site or application.
  2. We move quickly from hand drawn sketches to higher fidelity versions that aggregate all the great ideas into one single view. No colors, no photos, and no content. We want to separate the visual design approach at this stage from the site structure and strategy.
  3. We get everyone on board. Collaboration creates advocates for the best solution and all team members bring their perspective and can better understand the appropriate business approach to take.
  4. We continue to refine, add detail. We show visual design examples of how the site or application will look for the most common use cases. At this stage our client is not surprised by any of the decisions that have been made about the navigation and site structure and we can focus on the best visual approach to take.
  5. We constantly communicate the purpose of each step of the process, and why we use each tool (wireframes, prototypes etc.) to communicate the vision we’ve all collaborated to create.
  6. We demonstrate an iterative refinement process and manage expectations that good UX design evolves as we learn more about our target end users.
  7. We build a prototype of the core design system as quickly as possible and get it in front of the people that will use it (usability evaluation).

The goal of this part of the process is to create a hypothesis and invite actual users to determine if we got it right. From there we can evaluate what changes need to be made and what opportunities may exist that we may not have considered. At the end of this phase we have created a solid foundation and structure to build upon. We know exactly how the site structure, navigation and functionality will evolve to accommodate all the use cases, roles, products and enhancements.

If you would like to learn more about our design process and methodology or if you have questions about the most effective approach to take for your next web site or application design, contact us – we’d love to help.

By John Golden
Principal

John’s career in interactive media design began in 1995 and has spanned over two decades with a focus on developing simple, streamlined approaches for complex problems.

View John's Bio

notch-white

Let us know your name and email address and we’ll send you our newsletter.


First Name

Last Name

Email Address

 

 

Thank you!