Constructionline (Adobe Premier) video still showing HTML prototype screens on laptop and mobile devices.

The Brief

Constructionline are the UK’s leading professional accreditation body for the construction industry supply chain which encompasses architects, builders, utilities, planning, environment and legislative bodies. The company was upgrading its membership platform and required research and recommendations for a major overhaul of a consumer-facing portal. The main focus of the UX research centred around developing an effective online sales funnel as well as communicating new features to the supply chain and internal marketing personnel.

Cluster maps help refine website taxonomy and key functions. As we worked through the discovery process, the sales-funnel became more distinct from information-rich areas of the site that are more concerned with increasing dwell-time and brand engagement.

Approach

UX Discovery Workshops, Information Architecture and Wireframes were followed by remote qualitative testing of HTML prototypes with existing members of the supply chain. Observed behaviours in these sessions challenged some early assumptions: In response, we were able to refine the user interface design and edit content in iterative production cycles that were running in parallel to back-end development of the membership management functions.

Deliverables

UX Discovery Workshops were followed by a second wave of inquiry, focussing on content and communications requirements in order to deliver the Minimum Viable Product (MVP) which was effectively an online sales funnel.

Marketing copy and creative assets were combined with data visualisations using the full extent of Adobe Creative Suite: Animated infographics were subsequently combined with live video footage to support the marketing proposition both internally and externally. Page content was specifically designed to facilitate repurposing for different channels including; social media, website landing pages, email marketing and offline channels such as print, trade exhibitions and ‘Meet the Buyer’ events.

Information Architecture takes shape with thumbnail sketches representing individual Umbraco CMS page templates and content types.

The Information Architecture plan created in Adobe Illustrator with colour backgrounds denoting distinct functional areas of the consumer-facing website. Each page element has a unique ID that relates to a separate spreadsheet entry detailing ownership and production status.

Wireframe page templates provide a visual guide for clients and production guide to UI developers tasked with building HTML prototypes based on key user journeys such as the membership sign-up process.

HTML prototypes and teleconferencing facilitated remote qualitative testing. Screen recordings were made of candidates as they completed set tasks to simulate selected user journeys. After each session, candidates completed surveys and some later engaged in face-to-face follow-up interviews.

Content spotlight visualisation helps to identify the target audience, assess relevancy and the suitability of different content types. It offers a simple method for communicating the various functional areas of a website and helps prioritise content creation so that it is more closely aligned with strategic goals.

Storyboards help clarify the commercial proposition and associated user-journeys. Embedded video is a powerful communications tool: Animated infographics are used to present interactions and services that only exist in the digital space. This also reduces the requirement for live camera work. The transcript and graphics are repurposed as web content, thus maintaining tone-of-voice and consistent terminology across all communication channels.

Layered graphics created in Adobe Photoshop are integrated with video content in Adobe Premier to create simple infographics and simulated user interface actions not yet available on the development platform.

Video still featuring high-fidelity HTML prototype and caption.

Video still featuring City of London construction site.