Project Result
Reduction in Time to Quote
Increase in SUS
Growth in GMV
Project Overview
New suppliers are taking noticeably longer to quote against RFQs, and we have concluded that this is due to the current document detail view's UX. It has a poor discernible structure and data hierarchy, and buyers are forced to tab between top-level and line-level data before they can quote or decline an RFQ.
Success will be measured in a reduction in TTQ, U-Turns, and Rage clicks, increased GMV revenue, and qualitative user feedback
Requirements Gathering
Users require a more intuitive way to interact with all documents (Document Detail View[DDV]) on the trading platform (Request for Quotation [RFQ], Quote [QOT], Purchase Order[PO], and Purchase Order Confirmation [POC]).
REQUIREMENT
Future Proof
The document view should be ready for the implementation of future changes, such as messaging and detailed transaction history.
REQUIREMENT
Industry Specific
The document view should include functionality that allows the user to distinguish between changes in value in the document chain (variance).
REQUIREMENT
Look and Feel
The document view should match our brand identity and style guidelines in order to cohere with the broader website.
Project Classification
Based on the UX strategy we had documented, the project was classified as research-heavy. Based on the classification of the project, we implemented a framework which would provide us the runway we needed to understand the problem thoroughly and iterate on the proposed solution.
Existing UI
We analysed the existing UI and watched our users interact with it. We noticed a considerable amount of tab-switching, U-Turns and unfocused searching for data.
Tools Used
Alongside traditional design tooling, we decided to focus on tools which would provide us with quantitative and qualitative data gathering and analysis.
Miro
Miro was chosen as a tool to ideate, collaborate with stakeholders and create lo-fi art initially.
Easy to collaborate
Non-visual
Perfect for user flow diagrams
Figma
Figma is a go-to tool for development-ready design and annotations.
Component-based architecture
Design and Prototyping
Easy developer handoffs
Dovetail
Dovetail provided us with a way to interview and categorise commonalities in pain points.
Easy to capture video interviews
Automatic transcription
Tagging and commonality cataloguing
HotJar
Hotjar provides us with a way to capture instantaneous user feedback.
Instant user tracking
Heatmap and engagement tracking
Rage click and u-turn tracking
Google Analytics
Google Analytics gave us in-depth insight into user activity
Comprehensive user tracking
Bespoke trend tracking
Easy to integrate with data visualisation tools like Power BI
Power BI
Power BI gave us a way to visualise data in a way that stakeholders could interact with easily
Easy to share engagement metrics with stakeholders
Robust integrations
Flexible data visualisations
Data Analysis
We started the project by analysing usage data of the trade platform to understand user behaviour and draw baseline metrics.
BEHAVIOUR
Users who interacted with the preview tab
BEHAVIOUR
Number of tab switches
We observed that many document submissions saw users switching tabs multiple times. Doing so increased the time it took to quote
BEHAVIOUR
Breakdown of TTQ by Product
Trade business users took the shortest time to quote but had the most quote submissions
BEHAVIOUR
Average time to quote
TECHNOLOGY
Browser types by percentage
We found that 63.5% of users used Chrome, 27.5% used Edge, 5.3% Firefox and 3% used Safari
DEVICE BREAKDOWN
Percentage of desktop users
BEHAVIOUR
Number of tab switches v TTQ
We observed that many document submissions saw users switching tabs multiple times. Doing so increased the time it took to quote.
BUSINESS INSIGHT
Revenue by platform activity
With trade activity accounting for the majority of Gross Merchandise Value on the system, the business impact of this design was classified as high risk.
Persona Generation
Through extensive user interviews, we constructed two personas to build our solution around.
James Smith
Age 69, Managing Director
James is managing director, having served over 3 decades at his company. He oversees the flow of work within his company, and speed and efficiency are his priorities.
Scenario: Finding RFQs
Every day, I use the ShipServ platform to simplify the process of quoting our clients for technical equipment. I tend to do this from our head office in London, however, I am known to visit clients.
RFQs come in many formats, and the bulk of my time is switching between ShipServ, my inbox and other pieces of software such as SmartPAL and SIS-Commerce
Scenario: Allocating work
I use the transaction list, as well as my inbox, to see RFQs being raised. I then forward or assign them to the relevant people and oversee the document life cycle.
It is imperative that I move quickly. Time is money, and understanding an RFQ is paramount.
Goals
For my company to win business and create strategic partnerships with buyers.
To be able to understand an RFQ quickly and then send it to the relevant parties.
To understand where my company sits compared to the broader market.
Frustrations
Information not being where I need it to be.
Has trouble sending attachments to the clients - attachments get lost.
RFQs slipping through the cracks.
Not understanding an RFQ and subsequently misquoting it.
Running into performance issues in regards to the ShipServ Platform.
Leanne Jones
Age 44, Sales
Leanne is a lead procurement manager, who handles multiple client accounts at a time. Leanne is hard working and efficient, and appreciates having the right tools for the job.
Scenario: Finding RFQs
Working with multiple clients requires lots of time, therefore, I would like to be able to use my time efficiently. Ideally, I would like to send my quotes once, without worrying that something went wrong. I often run into performance
Scenario: Quoting
Everyday, I use the ShipServ platform to simplify the process of quoting our clients for technical equipment. I tend to do this from our head office in Miami, however I am known to visit clients.
Working with multiple clients requires lots of time, therefore I would like to be able to use my time efficiently. Ideally, I would like to send my quotes once, without worrying that something went wrong. I often run into performance issues where I need to close and re-open tabs.
Speed, agility and intuitiveness is what I value in quoting.
Goals
Easily integrate ShipServ into my workflow. Not being able to do so is detrimental to my job.
To be able to quickly & easily quote RFQs, and to deliver accurate information to the client through the ShipServ Platform.
Become more efficient at work, so that I can do more in less time.
Frustrations
Changes to already functioning systems.
Information not being where I need it to be.
Has trouble sending attachments to the clients - attachments get lost.
Running into performance issues in regards to the ShipServ Platform.
Dot Voting
By utilising dot voting with our customers, we were able to sort document data from most to least crucial.
Research Results
Based on the research, we reached the following conclusions:
CONCLUSIONS
Simple
We noticed a demographic which skewed mature. Our solution must be simple, WCAG complaint and reduce cognitive load.
CONCLUSIONS
Desktop-first
While we value our mobile users we recognise that 90% of our procurement users are desktop-based and so we should prioritise their experience.
CONCLUSIONS
Consolidated
We see poor data hierarchy and discernibility as a direct contributing factor to cognitive overload of our users and need to introduce a refined experience.
Reimagining the interface
Based on our UX research, we launched a reimagined interface to our beta community to test our core assumptions.
UI DESIGN
Consolidation of Data to Carousel
By consolidating buyer data into a carousel, we provided an elegant way to access glanceable primary data without searching around the page.
Through reducing the amount of data on the screen, we were able to utilise the free real estate to incorporate both header-level data and line items into a single screen. No more tab switching.
UI DESIGN
Drawer for secondary data
Second-class data was relegated to a drawer, meaning that if users wanted to view more details about the document, they could expand the header details.
This meant that ancillary data could be included but not featured, freeing up valuable real estate.
Click Analysis
During beta testing, we observed confusion around where to find data and a heat map showing users frequently clicked “All header details” - not a good sign as it showed us we were hiding crucial information despite dot voting
Qualitative Feedback
We used the hotjar feedback tab to collect qualitative data from our beta community.
“Easy to manoeuvre and clear overviews”
"I can't find the data I need to quote"
"I'm confused."
"Looks great."
Interface Re-design
Based on analysis and feedback, we concluded that we were showing an insufficient amount of information for our users.
UI DESIGN
Changing carousel to action bar
We concluded that we were making too many assumptions on behalf of our users. Our sample size was too small, and so we omitted important data from the document screen.
The card carousel was swapped with an action bar, which related to ancillary document data such as messaging and related documents.
We could add additional pills as we develop more functionality moving forward.
UI DESIGN
Sidebar for secondary data
Instead of relegating what we had classified as secondary information to a hidden drawer, we utilised a scrollable sidebar pattern.
In this way, we were able to be efficient in our usage of real estate and provide our diverse user base a comprehensive view of the data they needed to quote.
Success metrics
Now that our product was released to the market, we needed to gauge its success to ensure our solution met the needs of our customer-base and business objectives.
IMPLEMENTATION OF DESIGN SYSTEM
Engagement Mapping
By tracking the concentration of clicks, we were able to deduce that we were successful in driving engagement to the action buttons.
Quote, acknowledge, decline and download ranked as the most engaged areas of the UI, alongside some of the sidebar items, which we confirmed were copy-pasted to the user’s ERP software.
IMPLEMENTATION OF DESIGN SYSTEM
Movement Tracking
Movement tracking helped to reaffirm our engagement mapping.
We can see a large concentration of movement around the CTA that we cared most about.
Additionally, we see that the document reference number was being copied and pasted in a similar fashion to other key pieces of information captured in engagement mapping.
MEASURE
Time On Task
We observed a noticeable decrease in Time to Quote. Once the feature was pushed live not only did we see a reduction in TTQ, but also a more uniform number of quotes per week, indicating a uniform and intuitive UX.
MEASURE
Net Promoter Score
Net Promoter Score (NPS) is a measure used to gauge customer loyalty, satisfaction, and enthusiasm with a company that's calculated by asking customers one question: “On a scale from 0 to 10, how likely are you to recommend this product/company to a friend or colleague?”
NET PROMOTER SCORE
NPS Distribution
MEASURE
$ ARR
We noticed a 10M increase in ARR post launch. While it’s difficult to attribute revenue directly to interface rearctitecture, it lends weight to the assumptions made regarding TTQ vs GMV.
“Easy to manoeuvre and clear overviews.”
“I use it all the time, excellent idea.”
“Easy to use, and it allows to modify the format or item to quote.”
“It seems to be well designed and very user friendly. It has everything you need!”
