Environmental Enforcement App

Innovative App for Environmental Enforcement Officers

Develop App to

  • Enable remote filing of paperwork
  • Allow remote access to departmental databases
  • Increase productivity
  • Increase time spent in field

The Cayman Islands Department of the Environment wanted to develop a tablet app for use by their Enforcement Officers. The aim of the app was to streamline certain processes, allow the officers to file paperwork remotely and increase productivity, allowing them to spend more time in the field.

Getting Started

The delivery team was made up of myself, coordinators from the Department of the Environment and academics from Bangor University. An initial meeting allowed the different team members to agree a broad scope of the project and a delivery plan.

Iterating and Refining the Design

I delivered further iterations of the interface design over subsequent meetings. I was able to present designs to the End Users of the app, the Enforcement Officers and obtain their feedback. In the first meeting I worked up some rough paper designs. I took these and built some basic wireframes in Axure to present at the next meeting. These in turn got annotated and reworked until we had a design that met the Enforcement Officers needs.

Developing Limited Axure Prototype

The wireframes became more detailed as the project went on. I had to add in some interactivity to my Axure model to help demonstrate a couple of areas of functionality to the Enforcement Officers

Map Interface

A lot of the app was based on a map, that could superimpose different layers of GIS data to the Enforcement Officers. It also allowed them to prepopulate geographical coordinates into any form they were completing via the app. I found that prototyping this functionality helped to demonstrate my proposed UI which in turn led to some specific feedback that got integrated into my design.

Database Integration

Enforcement Officers also were being given the ability to search databases of vehicles and known poachers. Matching data could in turn be inserted into a forms on the app. The Axure repeater functionality really helped to bring my initial UI ideas to life, which in turn led to more feedback and a more robust design.

Paper Prototyping captures requirements quickly and allows for immediate revisions
Intially a portrait layout was considered and worked up into a wireframe

GOV.KY 4.0 – Consistent Look and Feel

The portfolio of sites we managed had been developed incrementally. Although most of our sites shared some common features, each had a distinct look and feel. These were time consuming to produce and maintain also potentially confusing for our users. We felt that a common design would be of benefit to our users: Browsing any site would help provide familiarity with any other site developed using the same framework.

The key things we wanted to achieve with the design were:

  • Promote Clarity – we wanted to cut back on the image and details and deliver a simple, clean design as we felt this would make it easier for users to find information.
  • Modern Design – The Cayman Islands Government was often considered conservative and old-fashioned. We felt a modern design would help highlight the forward-thinking, progressive side of Government.

Flexible and Scalable

The Cayman Islands Government included agencies of varying sizes from small two person units to large ministries employing hundreds of people. We needed a framework that would work well for the smaller units with less information to publish as well as the larger entities who published new information daily.

We developed a modular design that worked in a stripped down version, yet could be easily expanded by agencies with more complex requirements.

Allow for some individuality

Although we felt there were clear benefits in having a consistent design for all we also know different site owners would still want their sites to have some individuality. We achieved this in the following ways.

  • No set page layout – although we had a standard layout as jumping off point, it was possible to customise this by adding in additional components, or different versions of components.
  • Logos and other graphics – If agencies had their own logo we were able to incorporate it into the header area of the site. There was also some scope for incorporating custom graphics in certain areas of the site.
Inclusion of agency logos while maintaining consistency
Basic site showing new look and feel
More complex sites maintain consistency with modular page components

GOV.KY 4.0 – Improving Findability

When reviewing user feedback, a consistent theme was the difficulty people had in locating information. Often this information had been published but was just hard to find. Information was organised according to government agency, and we realised that users often did not know enough about the organisational structure of government to find what they were looking for.

Develop meaningful structure of entire web estate

The sites we managed fitted into three tiers:-

  1. One single main government site acted as a primary destination.
  2. Ministry/Portfolio sites published policy and aggregated news.
  3. Individual agency sites housed contact details, online services and news and other documents.

Defining ‘Web Services’

We started trying to identify what people wanted when they visited government websites.

Information Sometimes people were looking for a specific report or document but often they were looking for guidance on a particular process.

Download Forms Often people were looking to download certain official forms.

Online Transaction In certain cases, online services existed allowing users to perform certain transactions online.

We felt that a lot of these could be considered as ‘web services’. We did some work to make sure that this content was labelled in a clear and consistent manner, and in some cases collated information to make more comprehensive ‘guides’.

One Index to rule them all

We developed a new gov.ky portal site containing key information on the Cayman Islands and it’s government. This portal also contained an index of all the web services we had indentified. This meant that users had a single destination from which they could be redirected to other content. This content was indexed by meaningful categories to help connect users to the content they required.

Embracing the PDF

We realised that a lot of government information was circulated via PDF document. In the past we had tried to mark up this up and publish as HTML. There was a significant resource overhead to this approach. We decided to accept that the PDF was the currency of information with CIG, and develop the framework to make it easier for government employees to publish PDF’s and for users to search and locate information in this format. We developed our document publishing to enable the creation of document collections, including updated versions of documents. We also developed tools so that users could filter their searches by publication date, document title and publishing agency.

I developed a structure & guidelines for entire Government Web Estate
We produced a categorised index of key government information in a single location
We developed collections that grouped related documents handled multiples versions and included metadata
We devloped tools to help users locate documents and collections of interest

GOV.KY 4.0 – Responsive Design

We identified Bootstrap as the best way to allow us to produce fully responsive websites.

Update our site templates

With a bit of trial and error we successfully referenced the bootstrap libraries from the page templates within the Oracle Portal CMS. We were able to build a demo site and start getting to grips with the tool to build responsive webpages.

Develop modular page layouts

Once we had got to grips with the naming conventions in Bootstrap we started developing some basic page layouts.

On Mobile First I produced some desktop wireframes in Axure and added mobile views. Not mobile first, more ‘mobile very early on’. I then worked on both in parallel in Axure, and added in intermediate layouts. I had four views of each wireframe, mobile phone portrait and landscape, tablet portrait and desktop/tablet landscape

At this stage I did a fair bit of work within Axure, sketching out some basic pages, and working with the rest of the team to quickly build prototypes using our CMS in our development environment.

We iterated a few times, learning more about bootstrap, building some pages and testing on our mobiles devices.

Develop common components

At this point we had a working page that rendered nicely in multiple devices in both portrait and landscape orientation. It included a header and footer, and some initial page components to display contact details and recent press releases.

Page Components

In Oracle Portal, content is added as an ‘Item Type’. These allow content of varying forms – text, HTML, documents, images etc to be added to a site using an online wizard. The content is stored in a database along with associated metadata. When added to a page they are wrapped in some custom html.

We developed new versions of our page components that were wrapped in Bootstrap compliant HTML. We also developed summary and reporting components to display multiple items, again wrapped in Bootstrap compliant HTML.

Pattern Library We added all new components to a demo site so we could easily review them as we worked. This allowed us to work faster, and maintain consistency

As we developed more sites using the framework, we needed to build some different components.

  • We confirmed that a new component was required
  • We reviewed our other sites and came up with requirements that might work on multiple sites
  • We reviewed the visual design of our existing work and made new components consistent

Test on mobile devices

We utilised online tools too emulate certain mobile devices, but nothing beats testing on real devices. All of our new work would be tested on whichever devices were available. Obviously throughout the team we had a selection of mobile devices and tablets to use for testing. Also we asked any visitor to the team about their mobile devices to see if we could do some quick testing on a new platform.

Initial wireframes show proposed mobile page layouts
Axure allows for development of responsive versions of wireframes
Mobile and desktop wireframes of Press Releases component
Completed versions of component taken from live site