Toolsaver is a B2B business that partners with independent merchants to offer a broader range of tools and accessories at competitive prices to meet the needs of the trade. There is a push to expand the business and provide a successful online desktop platform where traders can order their stock successfully from Toolsaver.
As the sole designer in the company, my role is to improve the overall experience and design standards of the B2B platform as well as their B2C desktop and mobile platform Toolstop.
After deploying a major design overhaul to the website from the out-the-box theme provided by BigCommerce, I decided to conduct some user interviews to gauge the reactions from our customers. I interviewed 5 individuals and sent out a survey to our wholesale team.
There was an occurring pain point(3 out of 5) raised. There was no place to store/save frequently bought items to a list.
Why is this important?
As users of the platform, they are not buying tools for personal use. Users are relying on the wholesale team and the website to allow them to fill their stores with the stock they want. As a business owner, you want to create the easiest and most efficient process to allow you to achieve your goal.
Currently, our online platform did not allow for this. Each time a customer wanted to order a product, they had to search for that product and add it to their cart. This was a regular occurrence, which would take up useful time that they could be investing elsewhere in their business.
I started looking at the user flow of how a quote feature could function across our website. I wanted to make sure I was considering what elements were going to be used as well as how many new pages I would need, and what those pages would involve.
I started with mapping out the process visually:
Once I realized I needed some sort of spec to work towards, I created an MVP to allow me to visualise what exactly would need to be contained in the features:
- At this point, I wish I spoke to the developers, as they pointed out that to implement another search bar inside a page that is not our dedicated search bar would be too much work given the resources we have and the other work still to be due. This was a large oversight on my part and one that completely changed the direction of the project — more on this further down the page*
I took this and implemented it into a user flow diagram. The diagram allowed me to go a bit more in-depth on the process and imagine the users' behaviors.
I started designing the architecture with sketches to layout where I thought the elements should be sitting that aligned with the current architecture of the website.
From here I took my sketches and started making low-fidelity wireframes. This allowed me to start moving elements around on a page and it also gave me in-depth visualisations that I could present to management for feedback.
Designing the Feature
The feedback from management was positive, and I, therefore, used the lo-fi wireframes as an outline to start designing the feature using the toolsaver branding that I developed from the previous update.
I took care in considering Colour, Typography, Information Architecture and the content of the page.
A few notable small design features:
- Providing an Add All Items to Cart button when there is only more than 1 item in the list.
- Providing Feedback to the user regarding the actions they have taken.
After completing the designs, I started working towards a prototype to demo for the internal teams. You can find the prototype here:
It was after demoing this prototype to the developers that we ran into some hurdles and where I realised my biggest oversight.
My development team raised the issue of how the feature finds products to add them to the quotes. To add another search bar separate from the current global search would be far too much work for the resources of the small team we have. This is where the project had to be revised and thought out once again.
We started to discuss the possibilities of where to take the feature from here. The quote feature was pushed from senior management to allow for users and wholesale to be creating lists and sending them back and forth to each other. It was a great way to increase sales on paper, however, I felt that this feature did not address the initial pain points that I had identified. The goal was to allow a user to create their own personal lists they use to buy the products they need.
We decided the best solution would be for a user to find products as they would naturally and once on that product page, have the ability to add it to their preferred list.
I went back to the drawing board, altering the user flow that I generated for the previous design to allow the implementation of the favorites list feature. This required changes to more webpages.
I started working on my designs again, creating the new style of the list as well as creating a dropdown button to allow a user to add a product directly from the product page. This was the workaround to allow us to continue working on the feature.
I needed to create a new prototype as I wanted to start conducting some testing with the internal marketing and development team. This was to make sure that I was not over-looking any content that should be included and the feature had no blockers to keep it from being accepted for the development stage.
You can view the prototype below:
I conducted one on one testing sessions with members of the marketing team. Through this, there were several points raised to some oversights regarding the content as well as issues with users being able to navigate the pages.
I took the feedback and started reiterating the current designs.
Reiterating the design
- A stock indicator (a recently added feature) allowed the user to see if the product was in stock if it was below 50, then how many exactly were in stock and if there was none in stock at all.
- A Box rate label. This is business critical, as they constantly add products with bulk rates, meaning — if you buy a number of products, you get a discount on each item.
- Out of stock labels. There was no place to see if the products on the list were actually in stock. This provided a usability issue as a user would have to go to a product page to check if there was any in stock. I added an Out Of Stock label which replaced the add to cart button. The label detailed when stock would be available to order again. On-top of this I disabled the price, quantity, and add to the basket button.
- A back button. There were issues regarding how the user got back to certain pages, they were overlooking the breadcrumbs bar so I decided that a dedicated back button would help allow a user to find their way through the new pages.
The Revised Design
After implementing the changes from the testing feedback, I presented the designs to upper management and I was given the go-ahead to get the designs ready for the development stage.
The Next Stage
The development team now has the feature in the backlog to work towards once there is the time and resources to allow it. I suggested that we conduct some user testing when the development team has created a workable version of the feature.
I want to make sure that the feature we are developing does not have any major pain points for users and that it has properly addressed the original pain point. It is not a large part of my companies culture but I try to push for this sort of testing when I can.
The design has taken a number of different paths to reach the stage we are now at. I have learned design is not always a linear process and have gained more confidence in dealing with constant changes, whether that is from limited resources or business needs. I realise that my responsibility is to balance these constraints and provide designs that work for everyone.
- Communicate more with the developers at the early stages. I need to communicate with other teams earlier in the design process to develop a greater understanding of potential limitations and setbacks that could occur.
- Push more for early-stage testing with real users and not just internal teams.
- Forward plan a meeting to discuss ideas of what the feature should be and what it should include.
Thanks for reading,