Climate change, biodiversity loss and disappearing meadow land are all contributors to a severe decline in the butterfly and moth populations in the UK. Butterfly Conservation aims to educate and encourage people to create their own wild spaces where butterflies can breed, feed and flourish.
The organisation Butterfly Conservation has business goals to halve the number of threatened species in the UK and create over 100,000 new wild spaces, as well as raise awareness about butterfly wild spaces among urban and minority groups. They needed to build a portal for users to create and register their wild spaces. Whether they live in a council high rise, a flat with a shared garden or a house in the country, the site should show users what they can do to contribute towards and impact the preservation of butterflies and moths.
From a large base of 600 potential users, Butterfly Conservation had already conducted preliminary research around target demographics, types of green spaces that people had access to, preferred ways to digest information and devices usage. They also gathered information on people’s awareness of wild spaces and reasons why, or why not, they were already involved in butterfly conservation.
This gave a good overview into the target user groups, however a challenge arose in not having been active in the initial research, or able to personally ask questions. The best solution to address this was to create “proto” personas (made up from the data we had) of 5 different potential user types and build up a basic problem statement looking at the 5 W’s of Who, What, Why, When and Where for the product. From this assumed user journey maps, for each user type, were built. This helped highlight potential user needs and pain points, outlining the different journey’s that could be taken through the product.
You can see the full initial research thinking here.
With a hard deadline, set to align with the end of the Big Butterfly Count, an annual event run every year to document the national number of butterfly species, timelines for the project were incredibly tight. Having created a full feature information architecture to get an overall idea of the possible end-product, a comprehensive scope of possible user stories was created.
However, given the timelines a lot of these were not achievable, so it was important to prioritise and scope a minimum viable product. This needed to take into account the initial business objectives from Butterfly Conservation and baseline features that would be most useful to our proto-personas.
To qualify the design thinking user testing was planned after the initial wireframe and prototype stage. There would be two different rounds of testing. These included moderated sessions with butterfly conservation experts who, although not the target demographic, had volunteered to be involved. They also had a large wealth information about the topic that would be useful in shaping the tone of voice and relevant from a conservation point of view.
For the second round some remote testing was decided on. The feeling was that there would be more engagement if the participants could do a shorter test at their leisure, rather than committing their time to longer face-to-face meetings. There were already a large number of participants from the initial survey who could be called upon. This was a mistake... This was confirmed when the uptake from testers was limited, each choosing not to record themselves, leaving us without the important video footage that would show people faces as they struggled or succeeded.
Rather than waste more time pushing the online testing, more moderated tests were set up. Despite delaying the project for the additional testing time, it was more important to highlight any problems with the functionality at this early stage. This would save much more time later on. The insight gained from free roam and AB testing of both the desktop and mobile versions was worth the delay.
Testing highlighted one main problem. An important part of the product was the ability to see other wild spaces around you, but due to privacy exact locations could not be shown on the map. Users struggled with this concept, not understanding what they were seeing or how it worked. This was overcome by some more obvious messaging around the map section.
The initial designs also showed different wild space types using icons with a key. This key was totally missed by users if it was below the map, and thought to be a filter or clickable functionality if shown floating over the map. To remove any ambiguity we removed the icons all together and used the names of the wild space types, which was less aesthetic, but the usability of this important feature had to take priority.
Having decided on a “look & feel” from several different UI ideas, it was relatively quick to update the wireframe files into UI using the already implemented design system. By starting the initial UX thinking with a “wireframe” design system in place (following the Atomic Design structure) and linking everything in the designs as reusable components right from the start, updating the files to a final UI style was a matter of simply changing the colours and styles of the core components.
As a lot of the design was built in a modular way, to work with a CMS, each repeatable section in the designs could be represented by an atomic organism, and when changed in the system, they were updated all across the whole UI. This was a massive time saver. Of course custom sections and more components were also added to the system as the designs evolved, creating a comprehensive tool for the developers to use to quickly turn the designs into code.
The site was delivered on time to Butterfly Conservation for internal testing and a soft launch with a small group of users, to test the value proposition and do further live user testing. The MVP covers all the main features that both the user base and the business required. There is also a large backlog of logged user stories, which can now be prioritised for the next phases of the project. The best outcome is seeing users already starting to log their wild space findings.
The full website can be seen at: https://wild-spaces.co.uk/
Current BC Wild Spaces enthusiasts and a new younger user base targeted at 22-35 year olds.
MVP portal site covering basic functionality and built to scale in future phases.
Increase Awareness of butterfly and moth conservation by educating and encouraging people to create their own wild spaces.
Responsive website
Due to and extremely tight timeline, the developers had to focus on functionality first, and getting the site usable, so a lot of the “nice to have” design features and embellishments on the site were left off until after the soft launch. This meant that the final UI did not quite match the complexity of the original designs. Difficult for a designer, but functionality always comes first.
Due to limited availability from the development team early on, some of the design thinking was rushed though and not done with the ideal collaboration between all teams, creating some dev pitfalls later on. This highlights the need for a team first collaborative process right from the beginning.
Due to the technical restraints in the backend, the site was built using two different systems, which meant that there were various limitations on what could be designed. With more time early on a deeper understanding could have been gained about these limitations and the wrong design decisions would have been flagged earlier on, leading to less problems and need for change later on.
It is important to not over promise functionality, and manage client expectation at each step of the process. This protects teams from scope creep. It is important to make sure there are sign off points at key stages (after wireframes and after UI) as well as a comprehensive backlog to build up functionally for the next phase, rather then trying to squeeze it into the current build.
Younger users interact with a website and digest information in a very different way to an older audience: characterised by fast scrolling, skimming information and skipping key content, to get instant gratification and immediate information.
