The Brief

With a gap spotted in the ‘freecycling’ of building materials in Scotland, government-funded Zero Waste Scotland had big ideas for a website that would make it easy for those in the building trade to get rid of excess materials in a productive and environmentally-friendly way.

The application needed to work across the whole of Scotland and cover a range of sectors, as well as appeal to the target audience in a friendly way. The user experience also needed to be spot on so that users would find it easy to navigate and use regardless of technical ability, and for those that might be working on site when using the app it needed to work on a whole range of devices and browsers.

The main objectives of the project were:

• Design and build a simple app with brilliant user experience
• Give the app a friendly personality to entice a wide range of users
• Build an app that would work ‘in the field’ on mobile devices
• Encourage users with hint and tips and other interesting content
• Capture data to market the benefits of the initiative and encourage return visits.

This was a project that needed the full service agency approach to achieve its aims within the budget. We started with an in-depth discovery workshop with the team at Resource Efficient Scotland to find out who their users were and what content was needed and from there we were able to draw up all the functionality needed in a bespoke User Requirements Document.

Once the User Requirement were signed-off, we drew up interactive wireframes so the team in Scotland could see exactly how the app would operate and where the key content would be. This approach meant that the feedback process was quick but thorough before any of the complicated design or technical work was started.

Design

The initiative already had brand assets such as a logo and typography that needed to be used for the app, but the team were keen that it would have a fun and friendly look to encourage users to try it out. Our illustrator, Tom, got to work on some characters and scenes that would represent the app’s purpose and ensure that the website wasn’t too formal.

Tom details how he made the digital designs for this website using original sketches and Photoshop in depth on our blog (so we won’t repeat it here!) but the finished product was a colourful web banner that really tells the story of the app’s purpose and brings a relatively banal subject to life. The result? Feedback from users tell us it makes recycling seem that little bit cooler!

Build

The key functionality for this web app was the ability for users to easily post or share the materials they have left over on to a public forum for others to browse and, if interested in the materials on offer, get in touch with them. Our development team created a bespoke system where users can sign up and create posts, either about surplus materials that they want to dispose of or for materials they need. To make it as user-friendly as possible we designed and built a fully fledged user dashboard where registered users can view and manage posts they have created, or any posts they have decided to "star" that they might be especially interested in.

Next we needed to build the search functionality so that users can locate the building materials they need. The user can use their postcode or town/city name for the search, though it was decided that material search needed to have a specified dropdown of options to make it as user-friendly as possible. It’s estimated that up to 16% of the population has difficulties with reading and writing and so using a dropdown menu for materials eliminates potential errors with the spelling of the huge range of building material terms.

Results from search are mapped out and listed based on distance from the search location so that users can see their results in the format that is most useful for them, and even print out the list if required. In our User Requirements discovery session it was identified that as many workers in the building trade travel long distances and may want to collect materials near a site away from where they are based it may be beneficial to eliminate the location option in search. The result was a Materials page where users can see all the different materials available through the web app and can simply click the icon of the material they are interested in to get a list of posts for that particular item.

Finally to make the user system as informative and useful as possible we built reporting and notification functionality into the user dashboard. Each time the user logs in they can see detailed information about their own posts including graphs of how many posts you have and how many users have engaged with your posts. A notification system emails the user each time another user responds to their post so that the materials can be exchanged as quickly as possible.

Optimise

As use ‘in the field’ was a key objective for the project content was thoughtfully considered at every stage of design and build. Using real users to test the wireframes that were first produced for mobile at the outset, we made sure that the search functionality users required was served up first with its own icon and discreet slide out menu.

The web app was designed and built fully responsive and tested across all browsers with more than 1% usage so that no matter which device a user had the app would work whenever they needed it. Added to the location search functionality we included GPS geolocation search on mobile devices and tablets so that those in the building trade could find the materials they need nearest to them.

Evolve

The app is set to launch very soon and Resource Efficient Scotland are delighted with the finished product. We’ll be sure to let you know more results and feedback once the site has been unleashed to the public!