Cecilia Huster, User Experience Designer

 Portfolio  |  Resum√©  |  Linked In

Lo-fi and Hi-fi: Sitemaps & Wireframes from an Intranet

These deliverables were produced for the redesign of the intranet of a social landlord group. It was a familiar scenario: Employees refused to use the intranet because it was perceived as a waste of time. An inventory found many serious issues e.g. out-of-date content, broken links and broken images, balkanisation of navigation and look and feel, etc.

Lo-fi Sitemap

Overview sitemap for Operations department

The plan for this project was not to deliver a ready-made intranet, but rather to empower each department and the organisation as a whole to build up the intranet on top of the framework delivered by the agency. Advice and training were to be a key part of the project. For this reason, there were no detailed sitemaps. Those should be created by the content editors during and after training.

The sample included here is an early draft overview sitemap for one department. The overview sitemaps were meant to play the dual roles of key deliverables and training tools.

Wireframes from Lo-fi to Hi-fi

Low Fidelity Wireframe

Blocking out a menu page

This example shows a low fidelity wireframe of a menu page. It's the kind of wireframe that is vital to developers and designers but that can require a lot of skill to help clients understand it. Depending on the client, it may be better to show only more detailed wireframes and treat the blocking-out wireframes as an internal work document only.

High Fidelity Wireframe

More detail on the menu page

Here I have added more detail to show how each of the blocks can be used.

The call-outs in pink serve to point out specific elements. However the main part of the description of the wireframe is in the left hand column. It includes both detailed lists of what each block can contain, and explanations for how the solutions will work for the client.

Low Fidelity Wireframe with Sample Content

The meny page blocked out with sample content

This wireframe demonstrates how business priorities shape the layout of a page. This type of wireframe is very helpful for clients who have a hard time deciding on priorities. It will make it very obvious that no matter what they do, they will end up with a hierarchy of emphasis, so they may as well make the most of it. Prioritisation can be a very delicate task and even more so on an intranet.

High Fidelity Wireframe with Sample Content

Detailed sample content on the menu page

Using detailed sample content, ideally taken from the client's own sources, is often the best way to bring home to a client how a wireframe will work and what impact it will have. Particularly adding images is very helpful.

< Return to Portfolio page