What are Wireframes?

Wireframes are the blueprint for all page layouts of the website. The wireframe comprises ugly boring plain boxes but what they represent is critically important.  

The wireframe defines the placement of front-end technology (technology the consumer uses to assist his/her buying journey i.e. navigation tools, up sells, filters, product comparison), content (copy, images, video, interactive elements), calls to actions, navigation structure, and how they all intermingle with each other.  

Wireframes focus on what each page layout will communicate to the consumers and prioritises the hierarchy of content. Both usability and the user experience are defined at this stage.   

Many consider wireframing the first stage of the design process. It should not be looked at in this way. Think of it as the last stage of the planning process. This mindset takes the wireframing process more seriously.  

When moving to the design phase, there is a sense of excitement about bringing the plan to visual life. If wireframes are a subset of the design, it becomes rushed and is thought of as an inconvenience, it is keeping the retailer away from the ‘sexy’ part of the project.   

There are also dynamic wireframes known as prototypes. Prototypes are “clickable” wireframes and an effective tool in defining consumer journeys and planning the experience.

Wireframes are a valuable reference point for all teams involved in the project and becomes the visual backbone of the digital strategic plan

Making Wireframes work for you

First comes strategy

The strategy (or unified focus) defines the planned interactions between eCommerce pillars. This unified focus combined with the use of wireframes manages and preempts the ‘stakeholder collision‘ before the design process begins.   

Wireframing develops a visual representation of how all pillars co exist with each other in order to effectively deliver the strategic plan.   

This is how and why wireframes preserve the unified focus throughout the project stages.   Without this, the unified focus becomes diluted through scope creep from stakeholders who have no right to be influencing the project in new directions.

 Villanova University stated of all the causes of scope creep or ‘kitchen-sink syndrome’, the single biggest contributor was insufficient or poor planning.  

Without focus, organisations are reactive, disorganized, and deliver tactics in silos.  Not a fun place to be.

Wireframes simplify the design process

Design is arguably the most difficult project stage to achieve client sign off. Wireframes confirm page layouts for the entire site before it goes to the design team, providing a precise creative brief, leaving no room for ambiguity. 

The focus for the design team is to visually bring all page elements together in one coherent view.  The design becomes less about creating something new and dazzling and more about drawing the consumer’s eye to specific areas of the page to enhance user experience and usability.  

Without wireframes design becomes subjective. Personal opinions, agendas, and individual philosophies form the basis of decision-making.  

The process of design sign off can remain in a vicious cycle of design amendments and feedback from the client, bringing the entire project to a halt.  

Wireframes take the subjective influence out of the design process. Wireframes do not diminish the need and value of design, in fact, it enhances the design process.   

Wireframing fosters collaboration

The problem stated earlier about the collision of stakeholders is not actually a problem. It is exciting to have the varied expertise and knowledge to contribute to the plan.  

If, for example, the strategy is customer centric, the user experience and usability stakeholders become the main influencers during the wireframe stage but call upon all others to assist.


Example of the types of collaboration that could occur in a customer centric unified focus

  • Create layouts to ensure consumers are able to move seamlessly from one step of their buying process to another until they reach their goal (Usability, User Experience).
  • Consumer develops brand affinity through brand content and an engaging experience (Branding, Usability, User Experience).
  • Consumers have a consistent experience across multiple touchpoints/screens (IT, Usability, User Experience).
  • All touchpoints load quickly (IT, Design, User Experience).
  • The right target consumers arrive on the site and in many cases land deep within the site at relevant locations relating to their needs (Marketing, Usability, User Experience).
  • The new website has predetermined mapped consumer journeys for specific consumer types (Data Analyst/Insights, Usability, User Experience).
  • The website understands all the consumer questions/objections/content requirements and has pages and page layouts to communicate all of this at the right place and right time of their journey  (Data Analyst, Marketing, Usability, User Experience). 

Side Note. Though usability (the science) and user experience (the art) have extremely tight relationships, they are two separate disciplines.  

In the wireframing process its important to understand this distinction and relationship. Usability is goal orientated, ensuring the customer can get from A to B as quickly and frictionless as possible.  

It’s all about ease of use. While user experience is more emotional with the focus being to deliver positive interactions in order to develop an affinity to the brand/retailer.  

Wireframes identify the gaps

Wireframes are valuable for smaller organisations who do not have the army of stakeholders to call upon during the planning phase. They may only have representation of four stakeholders or less.  

As long as there is a unified focus (strategy) the wireframes will highlight stakeholder knowledge gaps. The result could be specialists being brought in temporarily to assist.

The wireframe step identifies the problem before proceeding to design.   

Who creates the wireframes?

Ideally, you (the client) do. If you don’t, you will be given template wireframes from vendors with no consideration for your strategy.  

The wireframes reflect your business strategy so there is no one better to do it. Because this is a collaborative process, you are never alone, but you should control it. 

There are excellent wireframing tools available making wireframe creation extremely simple and straight forward. There are even wireframing tools for iPhones. 

If you are interested in seeing how a wireframe can facilitate and guide the direction of page elements, review my last article.

It talks specifically about the layout of the product detail page but a wireframe was created to provide context for all recommendations. This one wireframe deals with 30 different page elements.