Category Archives: Mobile

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.

Bootstrap

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.

Personas

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.

Annual Report – iPad

 

Annual-Report-iPad

This was a very simple job for a City company who wanted their Annual Report on an iPad. The content had already been converted and a basic shell application was going to be used to display the content.

All they needed from me was a simple way to scroll through subject categories and the subjects within each category.

While it is always fun to try and come up with something innovative for an interface the fact is that the client didn’t want it. And they pay the bill.

The approach shown above is straightforward – swipe up and down to browse through categories (more artwork would be added to the Category boxes to be on brand) and then swipe left or right go through the sub-sections.

While some UX professionals might sniff at something so basic the reality is that users love this sort of thing. Tablet apps are still a novelty. Oh and they are shiny too!