We first did an audit of their current website to get an overall view of it’s performance, messaging and effectiveness to see where we could add our input and improve on it. We quickly noticed that the website was being slowed by too many unnecessary plugins and the use of large image sizes.

One of the main points of concern was the complex menu system and labelling making information hard to find, and the lack of a functional global search further buried information.

Once the audit was complete and we had wrapped our head around the task, we were able to make a new site map that prioritised important pages such as the “data marketplace”, “Services”, and “Pricing” pages. After a couple revisions with their product owner, we had reached a final version.

With the new site map in place we could work on fleshing out some of our ideas into low fidelity wireframes. These early-stage wireframes are key in deciding how the user will navigate through the website and whether they could easily access the information they want. One of the key sections we focussed on was the “Data marketplace” as this had the most functionality. Another key aspect of low fidelity wireframes is to see how elements would react to different screen sizes, especially mobile sizes.

While the user experience was being built, we could simultaneously start creating a design system. There were two main rules we had to follow. It must align with their current branding and must be reproducible and applicable for all their products under the Agrimetrics brand.

We built the design system in Figma to make use of styles and symbols which helped a lot in the UI stage. This system consists of various UI elements that can be used to build a product/website. It defined the type scale, input styling colours and empty states. Later we also added website sections that could be re-used with different copy and imagery to create new pages.

With the low fidelity wireframes and design library approved and ready to go, it was a relatively quick process to create the new high-fidelity wireframes and jump into development.

When developing this project, it was key to optimise every element that went onto the server to keep load speeds quick. We also made use of features such as “lazy-load” and “load more” to ensure the user is not loading content they might never see. SEO was also very important to the Agrimetrics team and that meant using meta descriptions and data, assigning alt tags, creating a semantic heading structure and adding keyword tags where necessary.