AIC Mobile Web Application

The AIC Mobile Web Application is a Node JS application which provides an overview of the work of the Agricultural Industries Confederation. The app is designed as a timeline of future, current and past events, with each item on the timeline represented by a colour-coded or graphical bullet point. It pulls in content from a number of different sources – Google Calendar, a bespoke briefing system, and a WordPress site – and authenticates users via a dedicated OpenID Connect server.

As the leading trade association in the agrisupply industry, the Agricultural Industries Confederation (AIC) is always looking for ways to improve how it communicates with its members – including printed publications, email and the web. As increasing numbers of people now access information on their mobile and tablet devices, the AIC decided to commission a web application dedicated to the delivery of information in a format more suitable for these devices.

Rather than attempt to recreate the complete AIC website experience within this mobile web application, the decision was taken to focus on the core activities of the organisation, and the delivery of timely and relevant information about these activities.

The design took this a step further by presenting the information as a timeline of events: future, current and past. These are displayed chronologically from future (top of the page) to past, with each point on this timeline categorised by a colour-coded or graphical bullet point.

The home page of the AIC Mobile Web App with its timeline of events

Future

Future events are displayed at the top of this timeline on the homepage as a list of upcoming events. The app shows the next five events from the current date, including AIC, Trade Assurance and other non-AIC related events – each represented by a different bullet point colour.

Events are categorised by colour into AIC, Trade Assurance and non-AIC events

Selecting any event displays additional information about that event; and selecting the Upcoming Events heading shows more events, with the option of loading in more.

Calendar

The calendar data is drawn from a dedicated Google Calendar account, and actually uses the ability to colour code events to differentiate the types of event – primarily because Google Calendar has no other way of categorising or tagging events. The intention is at some point in the future to develop the calendaring system further so that events only need to be added once for them to be shown in all of the different AIC websites and other systems.

Current

Beneath the upcoming events, current events are represented by the AIC’s member briefings.

Most of the work of the AIC is communicated to members in the form of member briefings, via their award-winning member briefing system. This is used to send targeted emails to members based on the industry sector to which they belong (or subscribe). As well as distributing these emails, the briefing system provides a comprehensive API which was originally created so that the briefings could be automatically added to the main AIC website for archival purposes.

The new mobile web app makes use of the same API to provide these industry sector briefings to members directly within the app. Unlike the main website, these briefings are available as soon as they have been sent from the briefing system.

The most recent briefing is highlighted, with older briefings displayed below

Members logged in to the app can specify which sector briefings are displayed so that only those briefings of interest to them are shown. Each sector is represented by a different type of graphical bullet, based on designs from the main AIC website.

Additional briefings can be loaded into the page, appearing in place and without the page needing to completely reload

Briefings

The Member Briefing API is written using the PHP micro framework Slim. Authentication is carried out via Jason Web Tokens (JWT) which transfer the authenticated details of the current user of the app to the briefing system – to ensure that s/he is authorised to view a requested briefing.

Past

Finally, the timeline of events includes two sections that focus on events that have already happened – Adding Value and the Journal. Adding Value is a record of the work of the AIC broken down by industry sector – highlighting the benefits and achievements of the AIC. The Journal is a quarterly document which brings together the diverse work of the organisation into a single publication.

The Adding Value section highlights the work of the AIC by industry sector

Within the app a number of Adding Value items are highlighted on the homepage – from each of the main industry sectors. Diving further into this section users can filter items by the same sectors to display additional articles. The Journal pages by contrast link directly to a PDF version of the publication – primarily because of the difficulty of easily representing the complex layout of that document within the app.

Content

In both cases the content for the pages is actually pulled from a simple WordPress site, which was created specifically for this purpose. The content is displayed within the app based on the categories associated with each WordPress post. The WordPress site uses the WP REST API plugin to provide JSON access to the content.

Technical

The mobile web application is written as a node JS application, and is hosted on a Digital Ocean droplet. Users are authenticated via a dedicated OpenID Connect server (based on the open source phpOIDC Project).