Responsive mobile browser design

What is it…

It is a Targeting, Inspection, Enforcement and Recording tool, allowing examiners to access real time data regarding DVOT and issue sanctions to drivers that break the law. An Encounter can be a roadside vehicle check, or an Operator visit carried out by Vehicle and Traffic examiners. An encounter carries out an intelligence data check on the Vehicle, Trailer, Operator, Driver, Journey, Weight and Goods. All data entered to the Encounter is saved immediately to their respective databases.

The check will help identify first time/repeat offenders with outstanding prohibitions and GFPDs (fixed penalties), allowing examiners to issue notices or immobilise vehicles immediately which can be used at the Magistrates Court and Traffic Commissioners Courts.

Discontinued recording device and examiners running checks

Current UI of the system

My role in the project

Training the client to work in an agile environment.

Helping the PO understand the need to simplify the IA/user journey throughout the application by determining the IA, through to wire framing interactive prototypes to final visual designs.

Designed a look and feel for the application incorporating gov.uk guideline elements where required.

Working collaboratively with the PO, stakeholders, BA’s, and the development team.

Delivering all design and UX for a team of PHP developers and a UI developer.

Notable successes

Identified critical issues in the user journey of the old application, and where improvements would enhance the users experience.

Developers had a good understanding of the requirements; through use of: Visual boards and interactive prototypes.

Handed over the user journey, full designs & wireframe prototype files to the UI developer allowing me to leave the project after a year.

The design of the application – which was still under development at the time – was well received by the Product owner, key stakeholders and users whilst feedback had been overwhelmingly positive.

Strategies, brainstorming solutions and planning

Prototypes

Add a vehicle

In order to start recording an Encounter you had to have either a vehicle or trailer.

In these set of interactive prototypes you can see the Operator and Driver are non-selectable because of the above rule.

The examiner would click on the ‘Add’ button, which would direct them to the Create a vehicle screen where they would input all the required info then save. Once they’d saved it they were directed back to the Encounter landing page where they could then navigate freely using the navigational info bar at the top or continue to record the rest of the Mode of Transport and Business Information section.

The Add button has now changed to ‘View’ so if you wish to view or edit the vehicle details you simply click on the view button which will direct you to the View vehicle screen, where you can either edit the details, or press cancel to go back to the Encounter landing page.

Removing recorded items

I had to give the user the easiest way to remove items from their encounter throughout the application . These prototypes show the simplest way of doing so.

Click the delete icon from it’s respective tile on the landing page. Confirm you’re happy to remove this item and then the item is removed and you can record the item again or move on.

Recording an offence

The identification of an offence was originally a 7 step process. After reviewing the process and working closely with the BA we were able to limit this to a 5 step process.

The examiner chose the type of offence and the vehicle or trailer it was attributed to. They then selected the category (group), followed by the section of that group and then the sub section of that section. They were able to view Notes throughout the process which would help guide them in making their decision of what type of offence the driver or operator had committed. Finally they would add the type of offence to the Encounter, where the offence would be recorded and ready to be issued as a notice or prohibition.

Icon designs

I designed all icons for the application by drawing them out in Illustrator and Photoshop.
I felt by adding icons it would enable examiners to readily relate what that represented, because in todays social media/digital world we are able to identify with icons more easily. I also felt it would lift the overall look & feel of the application and help steer away from a text-heavy based user interface design.

The outlined icons meant that item had yet to be recorded, whereas the solid icons meant the item had been added to the Encounter. The bottom row of icons related to viewing, editing, deleting, locations & warnings plus certain types of advisories and various weight indicators.