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 solutionI created a mobile-first design for the website that centred around searching for a pest or crop.
How I approached the project
- 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.
- 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
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.
- 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.