Timber Trade Federation

A corporate website

TTF is the voice of the UK timber industry, supporting and promoting our members’ interests. Our members constitute of timber importers, merchants, agents and manufacturers.

 

TTF has been supporting timber traders for over 125 years and has seen climate change become a defining feature for the government, regulators and customers. As well as supporting their members’ interest, TTF works to maintain and enhance timber’s sustainable reputation at a national, European and international level.

 

Note
The current website may not reflect my initial design given changes has been made in subsequent updates.

Structure
TTF committees oversee the TTF’s policy development and provide a conduit for them to communicate with members. Their Governing Board approves the overarching TTF strategic plan and provides oversight of its implementation.

 

The Governing Board consists of representatives of our Softwood, Hardwood and Panel Products Divisions and their Regional Associations. Within the Governing Board also sits the sustainability and compliance committee, Forests Forever.

 

Each product division has an executive committee which governs the agenda of the division. By joining a TTF Committee, Regional Association or Working Group our members can vote and have a say on the future of the timber industry.

The site opens with a series of strong panels to promote key site messages and current lead articles. We decided to use a ‘carousel’ slider to run several items here – each piece with its own background image, headline, introduction and calls to action.

 

Above the slider, we used a narrow primary navigation strip, with a ‘Join’ button to the right. For logged-in members, this would be replaced with an avatar and personal greeting, with links to the member MySpace for personal content and account management.

 

Below the slider, we have included a member layer. This layer uses a dynamic map of member locations as background with content and call to action related to Member sign up and searches in the foreground.

 

Further layers are can be reached by scrolling:
– TTF resources give an overview of digital assets in the Technical and Trade area.
The last layer is a preview of news and social media, as TTF and industry news, and the TTF twitter feed.

Create a corporate website

The challenge & my role

Role: UI Designer

Client’s brief & Ideation
The challenge was to design a new website which should be more visually attractive, easier to navigate, user-friendly and generally more modern. TTF is highly visible to private businesses (members), public sector organisations, NGOs and the general public – the new website should present a modern, professional and engaging image to this audience

 

My Role
I led the design of TTF since the outset of the project.

 

The team
I partnered with project managers,  managing director and Wordpress developers (custom plugin) and front-end to uncover insights and translate concepts into features that address user behaviours and intentions.

Experience Strategy & Vision
As part of the team, I have collected information and resources to be able to create the correct audience of the website.

 

The results define the following audience

  • TTF Full Members via fee-paying (Timber importers, distributors, traders, agents and merchants)
  • Potential new members, as per Full & Associate – not currently signed up
  • TTF Members’ Customers: Timber Merchants, tradesmen, builders, architects, contractors, procurement managers, quantity surveyors etc.
  • TTF Associate Members: Non-fee paying (NGOs, overseas suppliers, sawmills, interested parties)
  • Outside organisations or other, as per Public sector bodies in related fields – DEFRA, DfID, APHA, Forestry Commission etc.
  • Other Trade Associations linked to TTF e.g. Confederation of Timber Industries, Structural Timber Association (STA), British Woodworking Federation (BWF), Confederation of Forestry Industries (Confor), Builders Merchants Federation (BMF), Construction Products Association (CPA) etc.
  • General public interested in timber-related issues
The Member detail page will contain the member’s own profile to introduce the company, with the following features:
– Lead image & logo
– A brief overview of the company with details of products and accreditations.
– Contact points – main company contact points and a location map; visitors can send private messages and tenders.

Features used in the project

Search, filters & facets

Bootstrap grid
As the grid helps to structure all the components and put them into the appropriate sizes and proportions, I have chosen, as usual, the Bootstrap grid. The grid system provides a quick and convenient way to create responsive website layouts. The latest Bootstrap version introduces the new mobile-first flexbox grid system that appropriately scales up to 12 columns as the device or viewport size increases.

 

Navigation hubs
Due to the huge amount of information for logged-in members, and also considering that the users tend to limit themselves to using only one branch of the navigation hierarchy during a single session, we created several landing pages to give better scalability of the content.

 

These landing pages provide stopping places along the way with groups of links, that enable easy lateral movement to sibling pages in the same category and help with unfamiliar or technical terminology.

 

3 clicks
I used navigation hubs over the 3 clicks theory because, although limiting the amount of effort required to access key information or to accomplish a task is important, the 3-click rule is arbitrary.
Moreover, due to the specific content, the 3 clicks threshold was not achievable and there was the possibility that users will get frustrated.

 

More important than focusing on the raw number of clicks, I aimed to ensure that navigation was well organized with clear pathways, with content getting progressively more specific the deeper into the site structure the users went.

Search, filters and Facets feature
Especially in the logged-in content, I have considered several features to use. I introduced search and filters for the generic content open to the not logged-in user. Facets were introduced for the logged-in members’ content.

 

After reviewing and researching best practise, I agreed that “Search” forces users to work more because, not only must they come up with a query, but they also must type it.
Typing has high interaction cost; it is error-prone and time consuming even with a full keyboard (and even more so on a touch screen). The interaction cost of the search is greater than that of browsing. I excluded autosuggestions because it usually works well when the query is fairly common and simple.

 

Filters and faceted navigation — are sometimes used interchangeably. There is in fact quite a lot of overlap between these concepts: they share the same basic mechanism of analyzing a large set of content and excluding any objects that don’t meet certain criteria.

 

The difference between the two is essentially one of degree, but it is an important difference. Ideally, faceted navigation provides multiple filters, one for each different aspect of the content. Faceted navigation is thus more flexible and more useful than systems which provide only one or two different types of filters, especially for extremely large content sets.

 

Because faceted navigation describes many different dimensions of the content, it also provides a structure to help users understand the content space, and give them ideas about what is available and how to search for it.

Target audience, metrics, validation

Usability testing process

Usability testing were conducted repeatedly. In the early development usability test based on design comparison was run internally with the client.
Before the product release, test were conducted on staging website to gather invaluable data form the difference audience: TTF Full Members , Timber Merchants, tradesmen, and general public.

 

Workflow with clear objectives were created to test participants through different action based on real scenarios of interactions. Tested feature were: registration member, search resource in logged in area, create and add content to member landing page.

 

Selected associate members and potential new members were asked to complete logged in functionalities. Client side were acting as general public and website admin role.

Metric were established to value the test. I was focused on success rate, the time a task requires, the error rate, and users’ subjective satisfaction.

 

Analysing the results of testing and prioritize the findings provided insights and pain point as in resource search and managing member’s data in Zoho CRM Integrations.

I create a following up survey after the session to ask a few simple questions about the product, task and overall impression that the test participant experienced.

 

The insights of the testing plus the follow up survey the with client stakeholders and internally to verify if our vision was aligned with business needs.

Amends were introduced until the user journey and experience was validate.