UX Deliverables – Information Architecture, System Specification, User Interface Wireframes and Production Assets

UI Wireframes and creative asset styling.

UI Wireframes and creative asset styling for job-seekers website.

UX deliverables such as information architecture plans and wireframe diagrams are used to communicate design concepts to key stakeholders involved in a digital project.

This collateral provides the necessary detail that allows developers to begin the build process and also assists others in making the imaginative leap from marker sketches and sticky-note concepts to something more ‘real’. Essentially, UX deliverables allow early evaluation of the design prior to committing programming resource to a project.

Information Architecture diagram

Information Architecture diagram

The example shown here was part of a large-scale web-build involving in-house and offshore developers. Co-ordinating specialist resources using waterfall production methodology required high-fidelity graphics and detailed specification documents in order to clearly communicate the brief.

In this instance, Adobe Illustrator and Photoshop were used to create pixel-perfect, web-ready graphic elements that formed a kind of construction-kit. This facilitated easy assembly by developers so that they could concentrate on coding back-end functions. By contrast, in collaborative lean/agile environments where designs are built iteratively, low-fidelity wireframes are usually enough to inform the production process.

The bulk of the website consists of data-entry, query and search result screens. During project scoping sessions, these functional elements were explored using a combination of information architecture flow diagrams, taxonomy tables and wireframes.

Information Architecture diagram

Product endorsement video featuring BBC Apprentice star Karren Brady

Design for the home page was more in the realm of traditional advertising, addressing the need to quickly establish the commercial proposition, differentiate customer types (candidates/employers) and then provide an appropriate sales funnel.  Secondary elements included the design of banner advertising panels and embedded content, including digital video.