Optimising information architecture in e-commerce to design intuitive product categories.

iDonate

UX DESIGN UI DESIGN

LOGO DESIGN E-COMMERCE

Role:  Sole UX/UI Designer and Web Developer

JW Tools UX UI Design

Background

JW Tools is a family-run garden machinery retailer, located in Galway City, in operation for over 35 years.

JW Tools have an extensive in-store customer base for both the retail side of the business and also the repairs and maintenance side. In recent years, they have become one of the few licenced Husqvarna dealerships in the West of Ireland and have shifted their focus more towards the sale of robotic lawnmowers.

They wanted to increase their client-base and create a web presence, specifically for e-commerce. The website would also be used as a selling point for their range of robotic lawnmowers, showcasing the many features and answering many of their customers’ queries, optimising the face-to-face time with the customer.

In designing and developing the new e-commerce web solution for JW Tools, site architecture and the organisation of products into well-defined and intuitive categories was a central focus point to ensure an optimal user experience and increase sales of products online.

I worked on the entire product design as the sole designer from research to conception, visualisation and development.

Process

Research

Stakeholder Interviews

I worked closely with the owner and manager of the business and conducted a series of interviews in order to determine an insight into the industry and the overall goals of the website design.

I also attended informative seminars outlining the features and functionality of the Husqvarna range of Automowers in order to fully understand the selling points around the robotic lawnmowers in order to present these efficiently on the website.

Competitive Benchmarking

A competitive benchmarking exercise was conducted in order to get an insight into the industry standards and user expectations and mental models when it came to shopping online for garden machinery.

Looking to use a positive user experience design as a competitive advantage over other businesses who had already been operating online for several years, I looked at several competitors on a local scale, but also internationally too. I studied local sites like The Green Reaper and Mow Direct, but also Husqvarna’s webiste in order to understand industry norms and user expectations, but also identify pain points that could be improved on to gain a competitive advantage online.

It became evident that most of the online shopping platforms for much of the industry was based on outdated and old-fashioned design concepts, likely not updated in several years. The sites that had a more modern design approach lacked greatly in a positive user experience, making finding simple information about a product incredibly difficult before an even more difficult basket and checkout process.

There were a lot of opportunities to build upon. 

Card Sorting

Working with the team at JW Tools, we organised an Open Card Sorting exercise with a sample group of users. Using the tool Trello, we created an individual board for each user.

Along the left-hand side, the user was presented with a list of products. The rest of the page was a series of unnamed columns.

Each user was tasked with sorting the list of products into columns, grouping them together as they would believe they should be grouped. No assistance was given to the user beyond this. The products were listed in a random order and it was up to the user to determine what products should be grouped together.

Once they had created the groups of products, they were asked to give a name to each of the columns. Essentially, to name the groups they had just created.

From this, we had gathered a list of categories of products, as real users understood them, rather than sticking to the biased knowledge of the industry professionals.

Analysis

Product Categories

The card sorting exercise brought about some interesting results and highlighted some potential user frustrations before any design had taken place, which made it a hugely beneficial exercise.

Users did not understand what some products were at all. Some users even created a product group called “I don’t know what this is”. Similar products appeared throughout these lists, highlighting the potential pain point of not understanding the product based on it’s name alone.

Working through the various groups created by the different users showed some consistencies that were worth noting. These groupings and some of the terminologies were taken onboard for the final site architecture design.

Of course, the industry standards set by competitors in the same industry have created some mental models and expectations that we didn’t want to deviate from too much, so the final design of the product categories used learnings from both the competitive benchmarking exercise and the card sorting workshop.

Design

Low-Fidelity Sketches and Wireframes

I roughly sketched out the design concepts on paper first to get a better “feel” for the layouts. Then I moved on to some low-fidelity wireframes to inform the rest of the visual and functional design.

JW Tools Design Sketches
JW Tools Design Sketches

Site Architecture Design

Particular focus was paid to the site architecture and organisation of information, specifically organising products into intuitive and helpful categories and using filters to help the user find the right product with ease.

JW Tools Site Architecture Design

Based on the findings from the card sorting workshop, it was decided to split the product categories into initial categories that would allow users of any level of experience to understand:

  • $Grass Cutting
  • $Hedges & Trees
  • $Garden Maintenance
  • $Safety Gear
  • $Accessories

Within each of these initial categories, were sub-categories that aligned more to the established mental models set by industry competitors: “Lawnmowers”, “Strimmers”, etc.

It was also decided to have the full menu for each category display fully as a mega-menu on hover state to leave the customer in no doubt as to where to find their product. Visual cues were also included in the form of a small thumbnail for each product category, showing the most common product for that particular category.

Within each product sub-category page, all products for that category are listed alongside a filter allowing the user to easily find the exact range of products to choose from. These filters were based on information provided by the staff at JW Tools, the most common factors that in-store customers based their decision making on.

Prototype

Clickable Protoypes

Early prototypes for the project were created using HTML, CSS and JavaScript to present the initial site design around product categories and site navigation to the user set that were used in the earlier card sorting workshop.

Validate

User Validation Testing

User validation testing was undertaken on the users who took part in the card sorting tests to see if the design solution worked for easily finding products. Findings were minimal and some refinement on the sub-categories and naming of product types, along with changing some of the thumbnail images for the categories were taken back to the design stage.

Design

High-Fidelity Wireframes

High-fidelity, fully annotated wireframes for each page were designed using Adobe Xd. Design deliverables included a full design system, interactive annotated wireframes with downloadable assets and style guides for future reference. I also developed the full website using the WordPress framework as a CMS with custom HTML, JavaScript, CSS and PHP.

JW Tools E-Commerce Website Design
JW Tools Product Design
JW Tools Product Page

Conclusion

Thoughts & Learnings

Creating an e-commerce website design based on our own assumptions can cause us to confuse our hostoric experiences online with our perception of what a good e-commerce experience is. Relying on our own assumtions is dangerous and can lead to the design of a poor user experience. And a poor user experience on an e-commerce platform has drastic and immediate consequences, in loss of sales.

Conducting the card sorting exercise and engaging users to take part gave me some invaluable research findings that I could use to inform my design decisions. By using quantitative and qualitative data from real users, we were able to create a site architecture that far surpasses other competitors in the industry.

The competitive benchmarking exercise highlighted the great number of pain points existing in similar online marketplaces in the industry and validated the potential to win online customers through a more positive user experience.

I would have liked to have had a more fluid timeframe in order to conduct full usability testing sessions and depth interviews prior to the initial design phase, but I did find the card sorting workshop to influence the most important aspect of the overall design, which was an invaluable exercise to undertake.

Services

UX/UI Design

Web Development

Graphic Design

Film & Animation

Let's start working on your project!