The Brief

As part of my RMIT User Experience coursework, I was briefed to share a hunch about a user flow problem within an existing digital product. I was encouraged to pick a product that is already well known, and people that I personally know would be likely to have used before. My role of User Experience Designer was to research this chosen product and user flow, deliver a recommendation and solution to improve the product, produce a prototype as well as test and iterate the prototype.

The Product

Why the Bunnings Mobile Site?

I love the experience of a Saturday morning trip to Bunnings! Doggies in trollies, plants, paints, and snags, what’s not to love? However, my experiences on the Bunnings mobile site leave more to be desired. Aside from the distinct lack of dogs and snags, my hunch is that this is because:

  • The homepage is cluttered - there’s a lot of irrelevant content crammed in.

  • The desired path for most users is to use a search bar, but to get to the search bar, you need to perform extra clicks.

  • Searching for products brings up too many irrelevant results, and the filters are not very helpful.

  • The filters menu cuts off at the bottom most of the time (sometimes it displays correctly). While Bunnings does also have an app, this was not advertised on its mobile site at the time I commenced the project and it’s not something I’ve personally ever thought to go looking for. This lead me to believe it’s not a well-known enough product for me to select for this project over the mobile site.

Research & Findings

User Persona

To kick my research off, I created a user persona - Harry. He is a 30-year-old white-collar worker who enjoys weekend DIY projects. He uses YouTube for inspiration and tutorials but isn’t familiar with the Bunnings DIY section. He relies on the Bunnings' mobile site to plan purchases. Harry wants to easily locate products for his projects online and conduct quick searches on-the-go from his phone. However, he finds the Bunnings mobile site slow and difficult to use when comparing products.

Quantitative Research

My benchmarking research included quantitative data on the website and a system usability scale survey. Although I don’t have access to the insider intel for the Bunnings site, I was able to confirm some assumptions I made in my persona via similarweb.com:

  • I found that 75% of users are on a mobile device, making this the primary user platform. Additionally, 80% found the site through organic search, indicating that Bunnings is top of mind. The largest demographic of site visitors is males aged 23-34.

  • Furthermore, the system usability scale I completed had a result of 57.25. This indicates there’s room for improvement. Although the survey had very mixed responses, two questions stood out: “I found the site unnecessarily complex.” and “I found the various functions on this site were well integrated.” Both of these scored poorly and could reinforce my hunch that the mobile site might be too cluttered, slow, and challenging to search for products within.

Qualitative Research

The quantitative research findings led me to the following questions to explore through interviews:

  • Does the mobile site effectively guide users to its products and advice, such as the DIY section?

  • Is the process of searching for products and services on the mobile site slow?

  • Is the Bunnings home page hierarchy correct?

  • Is the mobile site optimised for all major types of phones?

I interviewed four users, all in their 30s, and asked about their DIY experiences, material sourcing, and their interaction with the Bunnings mobile site. My top takeaways were:

  • The site works better on iPhone than on Android, but the user impact is still low.

  • It’s easy for users to find the search bar, but they wished they didn’t need to perform extra clicks to access it.

  • Product details were found to be very inconsistent and didn’t filter well.

  • The online information regarding where to find the products in-store is often incorrect.

  • Users had repeated experiences of visiting the store expecting help with selecting the right products, but upon arrival and seeking assistance, they were simply directed to the aisle and received no further guidance or advice.

Recommendations

My recommendations are as follows:

  • Make the site more user-friendly for Android users.

  • Enhance the speed and ease of online search.

  • Improve the accuracy of product data information and filters.

  • Provide better access to in-store advice.

Solutions

Crazy Eights

For each of the recommendations, I created a brain dump of 4-8 very quick and top ideas for solutions, then developed basic storyboards for the ideas that warranted further exploration.

Prioritisation

Next, I assessed each idea based on desirability, feasibility, and viability.

There were numerous excellent problems and solutions in this case study that I wanted to explore further, but one stood out as a no-brainer and became my priority:

Adding a search bar to both the home page and results page for efficient updates. Implementing 'Suggested Product Filters' following keyword searches to facilitate quicker and easier filtering (aiming to improve the speed and ease of online search).

Prototypes and User Testing

Paper Prototype

I created a paper prototype and wireframe for my solution and tested this out with 3 users from my original testing group. My findings were:

  • The paper prototype was easy to understand.

  • The position of the search bar was prominent and where they would expect to find it on the website.

  • The quick filters were easy to understand and mimic how users are already very familiar with searching online.

  • Builds: Ensure the quick filters provide suggested sub-category options to narrow down the search.

Mid Fidelity Prototype

From there, I developed a wireframe and clickable mid-fidelity prototype in Figma, integrating the insights gathered from the paper prototype testing. The prototype is available here: link. This prototype features:

  • A search bar on the home page, enabling users to commence searching as soon as they enter the site.

  • The same search bar on the results page for easy modification of search queries.

  • Quick filters with relevant subcategory options (as per testing feedback), providing users with easy filtering access.

Next Steps

Launch and Iterate

I have completed my work on this project. However, if I were to continue with the project and product, my next steps would be:

  • Hand over the project to user interface designers and developers for launch.

  • After the launch, monitor quantitative usage data and user feedback to understand how users are engaging with the new features.

  • Iterate based on feedback and data, adapting to new desired user pathways.

Additional Quick Wins Solutions

A couple of straightforward UI and developer issues emerged from the research, and I suggest implementing some simple solutions for them. These include:

  • Adding a feedback response when product cards are clicked on, informing users that their click has been registered, and the next page or action is about to load (either through a change in colour shade or a slight increase in size of the product card).

  • Reviewing how the different functions on the mobile site display on various phone types and correcting any errors.

Bigger Scope Solutions

Additionally, there were numerous recommendations and solutions identified from my interviews that require further exploration. These demand a broader scope of cross-functional resources from the business, such as:

  • Obtaining better and more consistent product data for comparing and filtering products side by side.

  • Ensuring systems remain up to date with accurate stock information and product locations in each store.

  • Enhancing customer access to in-person assistance in-store, extending beyond merely directing customers to the aisles where products are located.

  • While addressing these areas might demand significant time and resources, I believe they would significantly impact the user experience. Therefore, I recommend prioritising solutions for these challenges.

Next
Next

User Interface Case Study: AirBorne Airlines