DEFRA

The solution

Technology isn’t the problem. Creating a ‘hook’ is!

We knew how we could technically build the app; however, the problem with this project is how to ‘hook’ the public’s interest and actually get them to use it. Let’s be honest, the sound of Natural Capital doesn’t exactly jump into fun and engaging mode unless you’re already passionate about the subject.

The discovery session

Our UX designers, developers and members of the CWT team targeted audiences and began to empathise. On a high level, the app had to relate to a large scope of people – family’s, students, grandparents and so on. Some audiences just by their nature would enjoy the app and would easily be able to use it. However, the key challenge is to engage those who aren’t interested in nature and how to get them hooked on the app while creating an experience that is easy to use for different levels of user usability.

Together we came up with a variety of ideas for the mobile app hook:

• Community Photos Upload
• Physical activity
• Gamify with trophies
• Educational
• Climate change

After gauging our ideas with potential users and the team at CWT we drew the following conclusions:

• We couldn’t promote on-site activity, as much of the land is unsuitable for the general public, and in some cases, it would be actively discouraged
• Photos and Activity apps would be hard to deliver educational content and really make the general public see what the benefits of natural capital services are.
• Collecting cards would be a good engagement and educational element.

The chosen concept – gamifying the user experience with quizzes and collectable cards

Using the discovery findings, we had finalised our idea. The concept would be to design a mobile app around nature reserves where users can ’Discover the sites near you’ (see images below). Each reserve would have an overview of information, how to visit and a star rating of up to five for nine natural capital categories.

To take this one step further, we would gamify the user experience by giving users the power to collect digital cards. And to collect the locked cards and add them to their profile, a user would have to take a quiz relating to individual reserves. All of this, with a beautiful UI design, we believe, would engage the user and be the hook that this project is looking for!

Mobile app wireframes & prototype – natural UI design with maximum accessibility

Our UI designer built the wireframes as seen in the scrolling images below, bringing the idea to life with a simple flow to the app with the intended features and showing the user journey.

We circulated the wireframes back and forth with the CWT team, where together, we collaborated and addressed potential problems before signing them off for a splash of colour. We then decided to do a micro branding exercise, so we could give the app a professional look and feel. Our designer then put together a prototype of the app for the first phase of user testing (see prototype below in scroll images). 

Key UI design features:

• Typography for mobiles
• Natural green colours and all Call To Actions in a vibrant green throughout
• Photos in a spaced swiping gallery
• Navbar at the bottom throughout
• Iconography used throughout for key points, natural capital categories and navbar

Mobile app prototype user testing – more informative and fine-tuning accessibility

We took the prototype through the next set of user testing with a Facebook group and one-to-one Zoom sessions. We analysed the feedback and made a summary of the key problems:

1. Users needed a better understanding of ELMS
2. Users needed to understand the off the notion of Natural Capital.
3. Users wanted clearer guidance on the accessibility of a location and whether they could visit the nature reserve or not

To address the above 1 and 2 feedback, we proposed that the app would have more information about ELMs on the welcome screens in order to inform the users, also, for Natural Capital, a key would be added to every reserve for more information about what it means. Similarly, for the above feedback 3, our UI designer implemented a toggle switch where the user could hide private sites that they couldn’t visit. Also, on the private sites, the nature reserve would have a padlock icon clearly showing that this location is NOT for public access. 

Progressive web app development (PWA)

We chose to build the app as a PWA as this has many benefits, but most importantly, flexibility to iterate and gain feedback keeping our methodology Agile.

A progressive web app is a special type of web application that can be installed on a mobile device and be used offline. It’s unique because you don’t need to publish it in the Apple Store, or Google Play, you can install it just by going to a website. This was very beneficial for the project, making testing the app much simpler, as we won’t need to publish the app and maintain different versions, we can simply direct people to a web page. It meant that we could achieve more in a quicker space of time versus traditional native app development. 

We built the PWA using Nuxt.js and TailwindUI for the build, with the data provided by a Prismic.io Content Management System so the CWT team could enter and edit content into the app. 

Key technologies: 

• Nuxt.js 
• Tailwind UI
• Prismic.io
• Netlify