Transforming a B2B Website to Drive More Business

Transforming a B2B Website to Drive More Business

A UX case study about homepage redesign

image

Overview

Completing a large-scale B2B website transformation in just 9 weeks has been a significant challenge for the team. As the lead designer, I was on a very tight deadline and developers needed to start building soon. To simplify the process, I prioritized the product quoting workflow feature over others to reach one of the business goals - revitalizing the brand to attract more business customers by 3 design strategies:

  • Make proposition clear
  • Streamline the menu of services available
  • Add instant value for getting a quote

Timeline

July-September 2022 (3 months contract)

My Role

UX Designer (wireframe, information architect, user journey, high-fidelity prototype), concept strategy

Collaboration

VP of marketing, Project coordinator, UX manager, 1 engineer

Outcome

Increased web traffic through getting a quote from a 24 hour turn around time to immediate

The Client-WTIA (Washington Technology Industry Association)

image

  • Who: WTIA is a technology trade association and business incubator with comprehensive product listings for assisting tech startups.

  • What Services: WTIA’s key offerings are HR services, apprenticeships, business consulting, and other offerings to startups internationally.

  • WTIA's customers: C-suites, HR, Insurance sales.

Business Goal

Increase conversions by helping WTIA’s prospective customers to better understand its brand value and sign up for services quickly.

Problem

image

*a bounce rate between 26% and 40% is considered to be average for most websites

Customers lack an understanding of what WTIA does and the value it can offer

“People come to us for health insurance because they go through a broker, but They don’t really know what we do.

-Heather, Marketing director of WTIA

Solution

A clear value proposition through a quoting workflow!

image
image

image
image

Research

Validate hypothesis: WTIA’s value is difficult to understand.

  • Budget limitations: Gathering testimonials and conducting interviews with current and past clients was challenging, as many of WTIA's clients were reluctant to share their names, particularly smaller companies with shorter operating histories and less notable results.
  • To prioritize service redesign, I tested the current website with three potential customers from my network. The results revealed comprehension and access issues with the website.
Research Process:
Research Sequence
Research Methods
Why
My key Learning
01
Google Analytics
Track what people do
-48% of site visitors solely visit and exit the homepage
02
Heuristic Evaluation
Efficiently identify problems prior to user testing
-No differentiation of experience for users -A lot of noise in the design
03
Competitive Analysis
Competitors: Gusto, Founder Institute, Workday, Graham & Walker, Woz U
-Founder Institue has Flexibility of use -Gusto has minimalist design -Workday’s streamline service is the key.
04
Five Stakeholder Interviews
A better understanding of the business model and problems
-Stakeholders want more storytelling & user support
05
One Critical User Journey
Identify the user’s main pain points
-Users need efficient accession WTIA - maximize productivity
06
Four User Interviews
Gain the end users’ insights
-Users want a clear roadmap to achieve their goal in business -Efficient access to support

4 Key Insights from User Journeys Testing Existing Website

When things look fuzzy with ongoing stakeholder interviews and user interviews, I use the user journey map to pinpoint key user pain points, insights, and UX opportunities.

image

Design Explorations

3 Divergent design concepts to tackle the problem of how to communicate WTIA’s value.

  • Two failed trials: I first focused on communicating WTIA’s values from two features’ design. One was promoting membership through banner, the other was to help users choose products through a manual quoting flow, but both of them didn’t work well during testing.
  • Inspiration from insurance companies: Inspired by the insurance company’s quoting workflow, I came up with Design Concept 3: Streamlining the product quoting flow, which worked the best during user testing.

image

Design Concept 3 was selected

To balance user needs and business goals, I added a wizard design to help users understand core services quickly. The client was happy with moving the free quote feature to the top for better user interaction.

image

Design Iterations

The quoting feature seemed to communicate WTIA’s services much more clearly.

User Testing:

image

Three major improvements during my iterations:

Improvement #1 Show clear proposition through quoting feature

After presenting the original wireframe, I received feedback from my UX manager to reduce the number of core service cards from 9 to 6, highlighting key products for a simpler and cleaner design. During user testing, 4 out of 5 users were able to recall WTIA's core products within 3 seconds, understand the services offered, and easily navigate to get a quote.

image

Improvement #2: Simplify the quote process with clear guidance and no lengthy signup

WTIA tried to build a portal twice to manage quotes and membership, but failed due to technical limitations. During a mockup presentation, my client suggested an alternative approach to avoid login and assist users who were uncertain about their needs. To solve this problem, I proposed a four-step survey to get a quote without a lengthy signup process, and added a section titled "Not sure what you need? Let's find out.

image

image

Improvement #3: Get a quote from 24 hours to immediate!

The original quote process was slow and required manual generation within 24-48 hours. After discussing with the VP of Marketing and discovering that most products could be offered outside Washington, I streamlined the quote flow by creating a 4-step survey for each product, offering immediate dashboard delivery. The engineer believes affordable survey tools and design options are available. This enables instant quotes and a checkout button for faster decision-making.

image

After I re-ran the user testing with a different group of 5 end users, I was able to positively impact all metrics.

Final Impact

✅ Increased clicks on getting a quote by 20%

Users liked the streamlined quote process, they found the process is more engaging and satisfying

✅ Lifted satisfaction by 20%

Users understand how the service work and would like to switch to WTIA’s products from other HR companies and platforms.

✅ Increased turnaround from 24 hours to immediately

Users don’t have to wait for 24 hours to check their email but to view and download the quote immediately, which increased the check out rate.

Next Step

Increase WTIA’s credibility and value with statistics and a competitor chart.

Based on the 10 users’ feedback from two rounds of testing, they would like to see how WTIA compares with other competitors so they can see the value of choosing WTIA. Therefore, The next step for me is to add testimonies of successful customer stories and design a chart to show WTIA can do all the services its competitors do at cheaper bundle prices.

Figma Prototype (Clickable) - Alternative link

More projects:

Projects Database