RWD, taxonomy and Bootstrap

Primary Task

The primary task was to take an existing catalogue of big data assets and provide a prototype version of the next iteration for a presentation with a fixed deadline.

For the presentation a web application would be viewed on iPads but the design needed to be used for further Business As Usual (BAU) work in future.


I recommended the best approach to this was to create a Responsive Web Design (RWD)  based on the Twitter Bootstrap framework .

This would allow me to create prototype wireframes using Bootstrap components and so cut down development time and UX design iterations.

The first deliverable would run full screen in Safari on the iPad.

The core of the application was based around category search of a number of diverse data assets.

Taxonomy First

Very early in the project I realised that the main problem was that of the taxonomy. Different people, sometimes with the same job role, described the same things using different terms.

The UX design was secondary to the taxonomy in terms of project work as what people were searching for had to be formally identified before the UI could be considered.

After discussion with the client I led a taxonomy workshop for those representing the User Group. I used the example of describing animals to explain the purpose of the workshop and ways to think about the problem. This proved extremely useful as the users easily identified with this.

The end result was a classification of existing ‘data assets’ into three main types of animals (although I would later argue the animals were really different zoos.) From this I could then move on to the UX design itself using Bootstap.

Search Models

One of the initial search models I looked at was ‘Elastic Lists’. Although I considered this ideal for the type of search required (a simple and powerful way to filter data assets) it was evident that users did not fully understand the way Elastic Lists worked so it was decided to adopt a simpler search model.

This consisted of an initial keyword search across the database and then selection of categories using standard form components such as lists, check boxes and radio buttons.

Although basic this was a significant improvement on the current version.

During the UX design a fundamental principle was data integrity. In the existing database a significant amount of descriptive data was of little use as it was unstructured.


Another issue I faced was clear identification of the different high level persona groups. Due to the deadline I could I only categorise them into normal users who would only search and advanced users who would search in a sophisticated manner and had the ability to add, edit or delete records.

For the personas authorised to create new records the interface design I created restricted free text entry to one descriptive field.  This improved data integrity and consequently the quality of the search results.

RWD Benefits

Through the use of media queries it was possible to create one UX experience which would only display editing functions to authorised users on the appropriate device.

Although the primary use case of the iPad version was a client facing sales role the same RWD was also deployed when an editor was viewing the same site on a desktop device.

The UX design also accommodated widescreen (16:9) laptop use.