The one where we went mobile

Designing a responsive Plantwise Knowledge Bank

46% of users in the past year had visited from a mobile or tablet but the site was not mobile responsive leading to a poor user experience on any device with a small screen

The solution

Grayscale wireframe of search results on the Plantwise Knowledge Bank
Grayscale wireframe of search results on the Plantwise Knowledge Bank
I created a mobile-first design for the website that centred around searching for a pest or crop.

How I approached the project

Grayscale wireframe showing no search results on the Plantwise Knowledge Bank
I designed for every state of each page, including a blank state such as no search results
  • I led the user research exercise, using our existing personas and an on-site questionnaire. I used Google Analytics and FullStory to find out what information users are looking for and the pathways that they take to get to that information.
  • It was clear that most users were coming to the Plantwise Knowledge Bank to find information about a specific pest. They usually knew the name of the pest and many were looking for information specific to their country.
  • As the user journey was different to what was thought when the site was originally designed, I pushed to completely redesign the site rather than just convert the existing site to be responsive. While users wanted to filter their results by country, they didn’t want to start their journey at a country homepage as previously thought.
  • I ran a sketch workshop (Crazy 8s) with the Plantwise Knowledge Bank team to get everyone’s ideas for mobile designs of each part of the site
  • I created interactive wireframes in Axure based on our sketches
  • As the main page that users visited was the pest species page, which has a lot of information on it, I created distinct sections with large images so that users could check that they were looking at the right pest
  • I added in HTML, responsive, versions of content that had previously only been in PDF so that users could easily view this on a mobile device
  • I also added ‘share’ options as agricultural extension officers like to share the pest management information that they’ve found with farmers they are helping
  • I tested the wireframes with plant doctors in Kenya. They were able to complete tasks such as searching for pest information. They also gave me a great insight into how they would use the website as part of their job.
  • The interactive wireframes allowed me to test how people would use the site but they also helped to specify how it worked to the visual designers and the developers

Impact

  • Feedback on the wireframes from plant doctors was positive with them particularly happy that they could view key content on their smartphones or tablets, and that they could share content with farmers on WhatsApp
  • Since launch of the new site in July 2019, there has been a 28% increase in pageviews
  • The ‘mobile-first’ approach worked really well. It meant that I was confident that everything we put into the design would fit on a small screen before working out how to take advantage of larger screens.
Plant doctor assisting farmer using Android tablet in Kenya
Plant doctors can now easily access crop advice from the Plantwise Knowledge Bank on their smartphones and tablets