HTML prototype for an Intranet Web App using jQuery Mobile

Overview

I was tasked with designing a way to give employees of a UK-based PLC access to common internal company documents via a web-based service.

Historically these documents were stored on internal servers, spread across multiple locations, with the possibility of each location having a subtly different version of the same document.

If employees want to access a document outside of their own office they have to call that office to request someone to email or fax it to them. Or worse still, if no one is present in the office then they will have to wait until they return to the office the next day to access it. In short, a bit of a nightmare.

Solution

I firstly looked at the obvious solutions of using cloud-based services such as Dropbox, but the complicating factor was locking down access to files and also integration with the company’s current CMS.

After several rounds of collaboratively sketching with the Mission team, we came up with a very simple user experience using a drill down navigation approach (in the same way as when users browse and play music on iOS).

Users log in, select a business/function and then choose from a list of categories to display a list of documents available for download.

At the same as sketching the user experience the Mission team and I brainstormed different approaches of how to document and communicate the experience to the client.

Due to the multi-device requirement we decided to build a prototype instead of using traditional wireframes. This allowed us to mock up functionality and demonstrate it to the client with minimal need for annotations and/or confusion.

We then subsequently took the prototype that was built using the jQuery mobile framework and used it for the basis of the front end HTML/CSS.

Results

In summary, our approach resulted in the following:

A clear user experience as a result of collaboration and rapid sketching
A functional prototype that the client could understand and manipulate
Minimal amend requests from the client
A reduction in the time and money spent on developing extra front end code

Whiteboard sketches from the UX brainstorm — Exploring the Web App functionality through iterative whiteboard sketching.

Welcome screen — Users first select a business/function from the faceted navigation menu.

Select a business of function screen — Users are then shown a list of document types.

Select a document screen — Users are finally presented with a list of documents available for download.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.