Barr Beacon is a Local Nature Reserve in Walsall, UK. I was part of a small team that developed an app to support its heritage interpretation. I was responsible jointly for project management, ideation, design and front-end development.
-
Home screen
-
Quiz trail selection
-
Quiz trail map showing points of interest
-
Point of interest
-
Quiz question, shown on each point of interest
As part of a grant awarded by HLF to Walsall Council, we were commissioned to develop an app for Barr Beacon Local Nature Reserve (LNR) - one of a wider set of initiatves - to encourage the public to visit Walsall green spaces, and take up more exercise to improve general health.
Although working as part of a small team, my involvement on this project was qute wide-ranging, there is quite a lot that could be written; I summarise below the key areas of my involvement.
Class presentation & brainstorming
Part of the requirements was to source ideas from the local community for the app. Together with Walsall Council, I visited Barr Beacon High School, and conducted a presentation with a class of Sixth Form students and lead a brainstorming session to elicit ideas.
We also demonstrated Augmented Reality (AR) developed by another member of our team. Feedback was invaluable, and we came away with mind map diagrams produced in the group from which we collated the best ideas (images of which are no longer available).
Features & user experience
After discussions, we decided on the following primary features:
- GPS visitor map
- Two family-oriented 'Quiz Trails' following key points of interest
- Augmented Reality to view key towns, cities and landmarks from the horizon of the hill
In Balsamiq Mockups I created Wireframe diagrams of each proposed screen and linked them together for 'clickable' viewing. The wireframes went through iterations until the client was satified.
* Interactive wireframe diagrams allow you to click or touch hotspots embedded in the PDF to move between pages. This helps give a rough idea of what it would be like to use the app in practice.
Design & interaction
I adapted branding supplied by a third-party to create the look and feel of the user interface, including bespoke icons and additional graphics, including an illustrated proportional map of the location (see slide 3 above).
Three different visual themes were produced, this version named 'Grass' was the preferred design.
Content & photography
One of my colleagues was responsible for writing the quiz trails and other content, though I assisted with proof-reading, and I wrote the light-hearted scoring assessments at the end of the quiz. Multiple visits to the nature reserve also allowed me to take much of the photography used. As questions for the quiz were being decided, I brought a DSLR to the site and photographed corresponding nature or artifacts.
Development
For ease of porting between platforms, we developed as much as possible using WebViews. Our back-end developer created the frameworks necessary to interact with the WebViews, whilst I created the much of the front-end code. This was achieved with a combination of jQuery Mobile and the GSAP animation framework. I used PHP to generate all of the HTML from templates and supporting JSON data files. Our back-end developer created a bespoke Maps framework which tapped into GPS so we could position my illustrated map into virtual space.
Augmented Reality
Barr Beacon is one of the highest points in the West Midlands and AR was included to help users identify towns, counties and landmarks on the horizon. We chose to use a third-party plugin called Wikitude, which for my part required me to help the client choose suitable points of interest, obtain lat/long co-ordinates and style UI components.
Usability testing
Using a near-complete version of the app, I took three participants and conducted usability testing under controlled conditions. In particular, we wanted to see how users would interact with the Quiz Trails, and see if they knew what to do and how to go about it. We were not able to perform the test on-site, but were able to gather useful data.
For example, when attempting to view more information about a point of interest on the map, users were commonly tapping the text label rather than the balloon icon. This lead us to increase the tappable area to include both the text label and balloon icon.
Availability
As part of a three-year funding agreement, the app was available on the App Store and Google Play between 2015-2018.
Case studies
Through my career I have worked across the full development lifecycle, from UX and UI design, to development and project management. UX is the heart of everything I do. This is a selection of recent work.
