Impact
This new feature provided Online Metals with a large competitive advantage by allowing customers to buy their quotes electronically any time of day.
Saving valuable hours of our customer service representatives’ time, and boasting immediate success with a 50.22% increase in quote conversion & 57.24% increase in average quote value in the first five months, this project won the company’s “Best Website” award of 2023.
🔍 To kick off this project, my team headed directly into research, starting with gathering context & benchmarking competitor quote experiences.
Competitor Weaknesses: We learned that many competitors handled quotes solely through email, had poor/misleading lead times and long waits (several days) for a quote response.
Competitor Strengths: We also discovered that a few competitors offered dynamic quote creation from the cart, and allowed customers to create their own quotes and see the quote status in their account.
Opportunities:
- We have quick quote turn-around time, especially compared to competitors! Improve the communication of our lead time expectancy across the quote experience.
- Allow customers to purchase their own quotes from email & My Account.
- Allow customers to view their Quote History & Details from their account.
- Future: dynamic quote creation (customers can create their own quotes)
As our quotes experience at Online Metals is very complex, we decided to create user flows to help us visualize the various touch points & steps that we would be addressing in the current quote flow journey.
We collaborated as a team using Lucidchart & Lucidspark to visualize our current user flows in the quote experience, color-coding pain points & inconsistencies along the way in red.
Next, we created customer journey maps & performed an analysis on our Quote Notes to further understand these identified points of friction and areas of inconsistency throughout the customer quote journey.
We created new user flows that addressed the identified friction points in the current experience as well as to help articulate the flow for allowing customers to purchase their own quotes. As I built out the wireframes, we added screenshots of the new designs into the flows for visual reference between old and new experiences.
Referencing our flows and journey maps, I created wireframes based on desired improvements in the flows to request modification, requote, and to purchase quote (from email or My Account), and created a prototype to test with customers.
Quote Details Top Summary
Responsive Design Solutions
Desktop:
Shipping Address, Billing Address, Quote Details & Order Summary displayed horizontally on one line.
Tablet:
Shipping Address, Billing Address & Quote Details displayed horizontally on top line, Order Summary displays beneath on second line.
Mobile:
Problem: Too much information to show on scroll, pushes conversion CTAs (Buy Now, Request Modification) too far down the page.
Solution: Quote Details & Order Summary deemed the most important information to display outright. Created an expandable/collapsible dropdown within the card to "See More"/"See Less" (Shipping & Billing Addresses) if desired.
Quoted Cart Modification Warning Popup Modal
For the scenario when customers decide to buy their quote and continue through the checkout process, I needed to create new designs to warn customers who try to modify anything in their Quoted Cart (adding/removing items or quantities), as any changes they make would cause their quoted cart to revert to a regular cart, where they would lose their quoted pricing. However, their previous quote would still be accessible from their My Quote History.
1. How might we communicate this quoted cart modification warning to our customers in a clear way that allows them to make an informed choice on how to proceed?
2. When a customer has proceeded to make a modification to their quoted cart, how might we clearly communicate that their modification was successful, that their quoted cart pricing has reverted to regular pricing, and where they might go to retrieve their previous quoted pricing, if desired?
I brainstormed solutions to review with the team, and decided to:
- Leverage our popup pattern for this warning
- Create informational copy for the warning popup details
- Give users an option to continue or cancel
- If user cancels, they return back to their quoted cart without modifications
- If user chooses to continue, they will receive a success message popup
- Create informational copy for success message popup details & include text link to quote history for user to easily retrieve quoted pricing if desired
User Testing
As a team, we wanted to be intentional about our customer outreach for this project, as the majority of quotes tend to be placed by our B2B customers - our Pro Buyer & Shop Owner personas. Unsurprisingly, these B2B customers are historically the most difficult for us to recruit for usability testing.
We brainstormed compensation ideas that might be meaningful to these customers and decided to offer a choice of a gift card or a special shipping discount. I met with our Sales team manager to set up the special shipping discount code details, and began user testing outreach to a pool of 90 B2B customers from our beta testing list, as well as 4 B2B customers who regularly place quotes from the Sales Team.
🚨 The Challenge:
Lack of customer interest/participation: despite our efforts, I was only able to successfully schedule & conduct one usability test from this outreach.
💡 My Solution:
I decided to reach out on some Facebook bladesmithing/blacksmithing groups to recruit non-customers who fit our B2B demographic and who regularly placed large quotes for materials. This would also allow us to gain insights into the impressions that first-time customers (who aren't familiar with our website) might have on our new quote experience.
Ten usability tests later, we clustered our insights from the interviews to synthesize the feedback and identify common patterns.
💡 One discovery during our user testing was that several B2B users were familiar with the experience of placing quotes from some indirect competitors (Fry Steel & Rolled Alloys) - I conducted an additional research gathering & benchmarking on these experiences to gain inspiration on flows & functionality that our B2B demographic was familiar with.
👉 My overall takeaway was that there was good opportunity for future improvement to our quote experience to serve more of our B2B demographic down the road, specifically in allowing customers to CREATE their own quotes. (Our new quote feature would allow customers to purchase their own quote from various touch points, but they still have to go through an agent to create a quote.)
After iterating on the designs according to customer feedback & our takeaways, I ran a second round of usability testing on the improved designs with two of our Round 1 interviewees, as they would already be familiar with the project context and initial designs & prototype.
💡 Our Round 2 usability tests provided design validation as well as customer feedback on additional improvements to make (Ex: hyperlinking call/live chat/quote number in the Quote email).
We also obtained great ideas for future improvements to our Quote experience, such as dynamic quote creation, a create appointment feature & guest quote creation/purchasing.
🚨 Additionally, we realized that we had not yet addressed designs or functionality for Requesting a Requote, and that needed to be flushed out.
👩🏻💻 I presented the new Quote changes during our Sprint Review with the business, and received additional business feedback on desired content updates to the new Quote Email design. I collaborated with the business & customer service team to learn of internal customer service representative pain points & goals to incorporate into the quote email design iteration.
Quote Email & PDF Iterations
NEW: Request a Requote Variations & Flows
As I brainstormed design solutions for our new "Request a Requote" flow, I prototyped three variations to discuss with our dev team in terms of level of effort (LOE) and functionality:
1) Simple: "Request a Requote" button takes to success message popup. After closing popup, success message persists to Quote History/Details page.
2) Confirm CTA: "Request a Requote" button takes to popup which asks to confirm this action and "Submit Requote Request". After this step, success popup appears, and after closing the popup, success message persists to Quote History/Details page.
3) Request a Requote + Request Changes: "Request a Requote" button takes to popup which asks the customer to include any changes they would like to make while making the requote. After submitting the changes + requote request, a success popup appears, and after the popup is closed, the success message persists to the Quote History/Details page.
Demonstration of "Request a Requote" variations:
I prepared a dev handoff file of responsive designs for Desktop, Tablet & Mobile devices and interactive prototypes.
We wrapped up UAT at the end of August, and this new feature was released in early September 2023.
Impact within the first 5 months of this feature release:
✅ Quote conversion rates increased by 50.22%
✅ Average quote value also increased by 57.24%
Stay tuned as we continue to measure the impact of this feature over time and refine the experience!
Our new Self-Purchasing Quotes feature was awarded the Online Metals "Best Website" award in 2023 as a result of the immediate quote conversion success! 🥳
Takeaways & Reflections
1️⃣ One big takeaway from this complex project was that it would be helpful to collaborate with our execution team to standardize the format of our dev annotations.
👉 I prepared examples of different annotation styles that may be helpful in communicating the necessary design details & changes, and scheduled a meeting with our developers & product owner to demo these examples, get their input and align on a direction for future projects.
2️⃣ Another takeaway was that gaining B2B-specific insights within our niche metals/plastics industry was a big challenge.
👉 To help increase our future study participation and insights, I spearheaded an initiative to expand our internal customer testing list (successfully added over 1200 new customer beta testers to this list), and also collaborated with our parent company Thyssenkrupp to add Sprig & User Interviews to our arsenal, so that we would be able to leverage B2B recruitment services for user testing when necessary, and also be able to offer unmoderated prototype studies that would allow customers to participate on their own timeline, with the hope of increasing B2B participation in our studies.
3️⃣ My final reflection was the importance of keeping content page designs up-to-date in our files - in the past, small site changes such as copy updates, etc...that did not require design work were not updated until needed in the designs, which over time created great inconsistencies between our design wireframes and the live site. This made for a lot of upfront design updates to prepare prototypes for user testing.
👉 To address this, I aligned with Content & Marketing Teams, and started a new process for collaborating cross-team via a Microsoft Teams channel to be sure that quick website changes made by the Content & Marketing Teams could be communicated quickly & easily so that I could keep the designs updated accordingly. This also greatly helped to increase cross-team awareness of content page updates.
