Case study: Staff profile pages

Overview

My role

Project process

Conceptual sketches

Initially some 'inspirational' visuals were sketched to demonstrate potential forms the user interface may take. These loose conceptual sketches were as much tools to trigger ideation and conversation as starting points for wireframe diagrams.

Sketchy hand drawn webpage layouts.

High level wireframe diagrams

Working from sketches and conversation outcomes initial wireframes were created. These were used to help test feasibility and solidify ideas. The resulting visuals were also more easily consumed by some stakeholders. New design and content configurations were still experimented with during this stage of development.

Detailed wireframe diagrams

Higher fidelity wireframes were created to test and refine favoured designs from previous rounds. Designs were distilled to a reduced set of options for consideration by stake-holders

Final design mockup

As a final action in the design phase of the project accurate desktop, tablet and mobile mock-ups were created. Content from actual data sources was also inserted to demonstrate that interfaces catered for real-world usage.

Coding of finished front-end

Using the final design mock-ups as a guide the HTML, CSS and JavaScript was written to create a complete static version of the page. Responsive design techniques were employed to deliver a single page that caters for a variety of screen sizes from mobile to desktop.

Once reviewed and tested the front-end code was delivered for implementation. Once implemented testing and refinements were undertaken in an interactive fashion.