Requirements gathering workshops were held with different teams across the business to gather feedback on the existing solution, understand stakeholder expectations, and identify pain points.
We then conducted usability tests to gain a better understanding of where users were getting lost in the experience, what information was missing, and where there were opportunities for improvement. To facilitate these sessions, we used a number of techniques, including card sorting and post-experience surveys, to understand which features of the experience were most important to users and gain candid feedback.
Finally, we conducted a current state audit of the content, usability, and information architecture to give us an in-depth understanding of the current solution in its entirety. These activities produced important insights into the user journey and business priorities, which in turn informed the design of the future state solution for the Print & Copy experience.
Ideation and testing
Our plan for the project was to create a series of deliverables that could then be validated through user testing. To provide some structure to the project in the early stages, we created a draft Information Architecture (IA), which we validated through tree testing.
The existing website was suffering from page bloat due to the sheer number of products in the Officeworks catalogue, and tree testing helped us identify how users categorised different products and where they expected them to be located. In response, we created polyhierarchies (where a single page is linked to from numerous locations) and modified category names to make products easier to find
Flow overhaul
We also designed a streamlined product flow to allow for a consistent browsing experience across product types and categories. This not only makes it easier for users to orient themselves to the site and find the information they are looking for, but also has the additional benefit of creating efficiencies for the business by making it easier to create, update, and maintain their extensive range of product pages.
This new product journey was illustrated using low-fidelity wireframes that helped internal stakeholders visualise our plan for the website, and also formed part of the component-based approach that the front end build would take down the track.
Iterative prototyping
Our next step was to develop a prototype of the new user experience that could be tested and validated with real users. Working in two week sprints, we built a high-fidelity prototype of key features, using real copy and product images to make the experience as close as possible to our vision for the final product.
At the end of each sprint, we ran a series of user testing sessions that allowed us to gather feedback on the product flow, copy, visual design and interactivity of the prototype. Testing iteratively with each sprint allowed us to incorporate feedback early and pivot quickly where needed, reducing the amount of rework required later in the project. By building prototyping into the design phase, we were able to ensure we ended up with a solution that really worked for users before rolling out the designs across the whole product range.
To wrap up the prototyping phase, we created a detailed, comprehensive functional specification document that outlined how each feature worked and what would be required from a technical standpoint. This document would go on to become a key resource for the remainder of the project and was an essential step in our handover of the project to Officeworks’ development partner.