{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

When conducting the design phase of any new website build (or redesign) the fundamental pillars of ecommerce simultaneously collide: digital and business strategy, user experience, usability, creative, branding, marketing, IT (infrastructure), and data/insights.  

This collision is made difficult when contending with the varying opinions and views of multiple stakeholders. They all want to have a say on what is to be presented to consumers.  

Normally the influence during design stage reverts to positional power within the organisation, with business goals overriding all others including the needs and goals of the consumer. Not anymore. 

The purpose of this article is to shed light on how to properly utilise wireframes, how this tool maintains the integrity of the strategic plan and how it can simplify the implementation of the project, shorten timeline and reduce costs.  

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.

Greg Randall

Published 20 November, 2013 by Greg Randall

Greg Randall is a senior digital consultant with Comma Consulting and a contributor to Econsultancy. You can connect with Greg on Linked In and Twitter

19 more posts from this author

Comments (5)

Yves Goulnik

Yves Goulnik, Digital strategy director at Strategik & Numerik | Indigenus

» When conducting the design phase of any new website
» build (or redesign)...

Entirely agree with the value of wireframing (I've long been using Balsamiq Mockups, great tool). It's not limited to websites though, it's equally valuable with tablets / smartphone apps, the design of which of course are fast converging.

over 2 years ago

Avatar-blank-50x50

Greg

@Yves

I completely agree with you. The focus on planning for mobile is as important. All comments made in the article above includes mobile.

In fact, wireframes add more value to tablet and smartphone page layouts because the user experience and usability elements requires more focus. One example of this is, the content hierarchy requires rethinking thus changing the UX dynamic.

over 2 years ago

Avatar-blank-50x50

Joel Siddall

Great article. I think the more people that understand the value and importance of the wireframing and prototyping process the better.

over 2 years ago

Greg Randall

Greg Randall, Director at Econsultancy Small Business Guest AccessSmall Business Multi-user

@Joel

Thanks for the feedback. It's interesting, when I am asked to come in and fix new build or re design projects that have been poorly implementated, 90% of the time the wireframe process was either skipped, or very little time and effort was put into it.

The wireframe process not only assists the implementation process, when management knows its a big part of the process, they are forced to be ready and prepared for it.

over 2 years ago

Avatar-blank-50x50

Robert Osborne, Head of Development at garden4less

Great article, we are in the process of creating new wireframes at the moment. We have referenced many articles from econsultancy and have since tweaked the wireframes. It should all go live in November but the initial screens we have created from the wireframes are a massive improvement on the cluttered pages that we currently have,

11 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.