Signwaves
B2B ecommerce for one of the UK’s leading sign and display manufacturers
Website UX & UI
Research
Task flows
Wireframes
UI design
Design lead
Signwaves design, manufacture and sell a market-leading range of signs and displays
Overview
Signwaves is the UK leading signs and displays manufacturer. They sell to trade customers and end-users through their online account-only platform.
The online experience was underperforming, creating additional work for the sales and customer services teams. A lot of their enquiries and issues should have been handled more easily and effectively online. Our brief was to rethink the UX and visual design to increase the percentage of trade customers ordering through the platform. I led the UX and UI activities for this project, from pitch through to the delivery of visuals designed to meet both business objectives and customer needs.
Demonstrating innovative ideas and a design-led approach
Our pitch
Signwaves is an innovative, design-led business and they were looking for these qualities in their chosen agency. Our brief was to demonstrate our ideas for the platform.
I worked closely with our development team and together we explored some exciting functionality ideas that would elevate and enhance the online offering for customers. Our options included the facility to view custom artwork on a 3D model of a sign and a delivery planning matrix, to give customers an overview of delivery options and help them plan purchases more efficiently.
Signwaves were ready to update their brand and I presented some options, designed to challenge their current thinking and inspire them to consider moving in a strong new direction.
I also proposed some playful touches to their messaging and tone of voice, riffing on the idea of “looking for a sign”. Our pitch was warmly received and Signwaves were excited to explore the possibilities for their new platform.
Some functionality and visual ideas presented during the pitch process.Increase online orders and accounts
Challenge
Through my research activities, I discovered the current platform wasn’t fully meeting the needs of trade customers. My challenge was to improve the online experience by making it clearer and easier for trade customers to complete key tasks. I responded by seeking to fully understand the problems users encountered and by hypothesising some potential solutions.
Refining the experience to make tasks easier to complete online
Goals
Reduce the volume of calls received.
Increase the percentage of placed orders online.
Increase the number of online account sign ups.
Getting to know the customers and the complexities of the business
Approach
I facilitated interviews and workshops with the key stakeholders and team members to discover how the business and existing site were currently operating. We delved into their complex configuration options, pricing structures and the need to communicate lead times on artwork and bespoke products. As we defined the problems to solve it became clear there were several key issues that must be addressed. The research I conducted included:
Stakeholder and team interviews and workshops.
Competitor analysis.
Site map. Documenting the current structure and taxonomies.
Key task flows.
3 key problems to solve:
Prices are available online when users are logged in, but many account holders were using the site without logging in, and then requesting a quote or calling for prices. Both of which were creating extra work for the CS and Sales teams.
Many users struggled to find information about artwork specifications. They required this information at several stages of the sales journey but it wasn't readily available.
The products weren't very discoverable and users didn't recognise the products by name. The categories were convoluted and didn't encourage users to explore the extensive range and find new products.
Image shows the task flow for a trade customer's first order.Explore > Discover > Evaluate > Order
Wireframes for the product list page, product detail page, an 'added to basket' modal and the basket page. These pages were the main focus in solving the 3 key problems identified during research.Wireframes
Solving the 3 key problems
To help make products more discoverable I proposed a product listing page that would allow all the products to be viewed at once, with filtering and sorting functionality to allow the customer to refine the selection.
I addressed the issue of customers calling for a quote instead of logging in by adding a call to action to ‘log in for prices’ where you would conventionally find an ‘add to basket’ CTA. I also added messaging and login CTAs to the quote form.
Previously artwork specifications for print designs had only been available in an account dashboard, so I surfaced this information at several points, the product page, in an ‘added to basket modal’ and also in the basket and checkout process.
Collaborating with Signwaves in-house design team
Visual direction
Following our pitch Signwaves tasked their internal team with a full rebranding activity. They have a strong team of in-house graphic designers who created a new identity that better-reflected Signwaves’ market-leading status and values.
Signwaves really liked the ideas I’d presented when we pitched and were keen for the designs to have a similar feel. I created several options and worked with their team to refine and finalise the designs.
An early sketch which wasn't too far off!Simplicity and clarity
Visual design
My goal during the visual design process was to create a clear, component-based system that would create a consistent experience for users across the site. The design is dynamic and striking but my guiding principles are always simplicity and clarity . Allowing the customer to focus on each task as they move towards their goal, is the priority.
Accessibility
A new accessible palette
I worked with the in-house team to refine the brand guidelines for online use, by creating a colour palette that meets WCAG 2.1 level AA guidelines for text colour contrast. The previous site wasn’t meeting this requirement and after we discussed this, it was one of their motivations for updating the brand.
Challenges and next steps
Outcome
This project wasn’t without its challenges. The attributes and configurations for some products were extremely varied and for the development team it was a very complex build with a tight deadline. As is often the case, this meant some compromises were made in order to launch the first phase of the project. the project was built on the Magento e-commerce platform and whilst a lot of the development was bespoke we also utilised native functionality where we could.
At the time of writing, the project has recently launched and we are awaiting the performance metrics. I would like to see an increase in orders placed online and a reduction in phone calls to the team. I would conduct user testing and an evidence-based approach with conversion rate optimisation as an ongoing activity.
Agency
Selesti
Tools
Figma