This phase makes sense of the data providing set specifications and schematics.

The design workshop session generates lots of information in a creative freeform way. This phase makes sense of the data providing set specifications and schematics. What I have written here is a cut down version of experience design for small businesses mainly focusing on information architecture.

Information Architecture

Experience design itself is a very broad subject covering User Research (UR), User Experience (UX) and User Testing (UT) as well as Interface and Interaction Design (UI). Carried out to optimise the user experience of a given website aiding emotional and functionally engagement to create a better experience and hit higher performance indicators. In full this type of Design and Research is usually carried out for larger businesses where traffic is high, meaning the percentage increases make a valuable difference.

Site map

Forming a structure of all the different pages laid out in a vertical flow chart pattern. Starting with Home leading off to each main menu item, which in turn flow off to the different pages, sub pages and inter-connectivity. This sitemap is put together through the discussions of the journey mapping in the workshop, current website if one exists, looking at competitors, the marketplace and what customers need to fulfill the outcomes set in the workshop.

Audience

Having deciphered the different audiences in the workshop we need to be sure the design and architecture speak correctly to these people.

Keyword research

Checking what words or phrases these desired audiences are using to find services such as yours (or those of the new website). There are detailed tools such as Google Analytics but also basic free ones that can aid this such as http://keywordtool.io/ - this doesn’t show volume but if you type in a word it will let you know whether it is viable. For example if I am designing an Estate Agent website and I want to link to a Valuations page I find this is too broad - I would be better writing ‘House Valuation’ to attract the right traffic. The same can be said about page titles, it is important they are catching, informative and containing keywords related to the business. ‘Get a Valuation’ or ‘See What Yours is Worth’ may be too broad, but ‘Value my Home’ or ‘See What Your House is Worth’ will bring more targeted traffic. Taking this a step further to see whether ‘House’ or ‘Home’ is more intuitive is again beneficial not just to search engines but to customers as well.

Navigational structure

If you have a large menu structure (ie lots of pages below the main menu) it can be worth cutting out each box from the site map and asking a selection of clients to move them into hierarchical groups as they see most intuitive. As with ‘House’ and ‘Home’ above this also brings up words that although the norm in an industry may be un-intuitive to a customer. This process is called card sorting to make sure the sections created on the sitemap are in the most obvious menu section for the user flow.

Carrying out a short survey once the site is live to check that clients can find certain services or complete certain tasks is another way of checking navigation.

Wireframes

Drilling down from the site map to the on-page layout. I often get asked what a wireframe is so to explain it’s somewhere between a sketch and an architectural blueprint. A sketch showing vague ideas of what something is, and a blueprint showing the exact detail. A wireframe or ‘wire’ ‘frame’ is a line drawn outline - by hand or computer software - of a website. Wireframes may be flat or interactive in the form of prototypes.

The point is to be able to concentrate on the objectives of the website, the outcome the user needs to fulfill and the different interface elements and technical functions that the website must do to reach these goals. It is not to dictate what the design will look like but make sure that each of these elements and functions are on the page in the right hierarchy so laid out in skeletal form with no visual design, colour or typography.

Wireframes can be created to show the on-page layout across each breakpoint. A breakpoint, created by a media query, is set to the width at which the website reorganises optimally for that device usually used to define a mobile, tablet, laptop or desktop.

Prototypes

A prototype takes many forms as well and may be an interactive version of the wireframes or the final designs. A prototype allows a test user or client to carry out certain actions but does not have the full functionality of the website behind it. I show a design prototype for feedback using Invision this allows my clients to click through the pages seeing them in browser at the different device sizes.

Call to Actions (CTA’s)

I talked about ‘call to action’ in the workshop article discussing and creating clear actions or promotions on each page avoids users coming to a dead end and leaving, but instead signposts them to a suitable conclusion. These take 2 forms:

Direct conversion rate actions such as, call, fill out a form, send an email.
Indirect actions suggesting further reading, supporting services or awareness of other products. How often do we hear customers say “Oh I didn't know you did that”.

And finally, if you wanted to take user experience design (UX) further you would be looking to conduct:

Focus groups - a small group of clients or correctly demographied respondents in a room discussing the the website around a preset discussion guide.
Customer surveys - a set of questions and ratings sent out for clients to fill in.
Audit research - collection and analysis of online data to pinpoint the good, the bad and the possible.
Personas - creating a fictional person for each audience type, that personifies demographic, likes, frustrations, ability, etc.
Design testing - immediate design feedback also called gut tests, sending out designs to a large group of users and asking a simple question.
Prototype testing - remote or lab usability creating a prototype to ask a small group of individual users to fulfil a task.
Live testing - conversion rate optimisation also known as MVT or A/B testing showing different versions of certain pages to collect results moving to the better performing test.