Landing Page Re-Design
As part of G2Xchange company's first UX team,
I worked with 4 UX Designers to modernize G2Xchange's landing page.
Our design helped increase total account sign-ups by 65%.
Timeline
3 months
Team
1 Project Manager
4 UX Designers
My role
UX Design
Project type
Responsive design
UX Collaboration
SaaS
Government Contracting
Understanding about government contracting
A government contract = an agreement between a government agency and a business, in which the business provides goods or services to the government in exchange for payment.
In the bidding process,
1. a business must register with the government agency and then submit a bid proposal that outlines what they are offering.
2. The government will then evaluate the proposals and award the contract to the best-qualified bidder.
For businesses,
winning a government contract = a guaranteed source of income, as well as credibility and stability in the market.
Better Intelligence, Better Decisions.
Stay in the Know with G2Xchange.
As a market intelligence firm, by providing timely and actionable insights for business development professionals, G2Xchange seeks to help them win federal contract opportunities.
G2Xchange is proud to provide:
-
Member Network: G2Xchange connects professionals with a network of 3,000+ professionals and 450+ corporate members who trust G2Xchange for our services, events and awards in the bustling federal contracting marketplace.
-
The Daily Take: the most trusted source of federal contracting news with curated industry stories that keep business professionals informed to stay ahead of the competition.
-
Events & Awards: G2X membership includes access to our unique Industry-focused events and prestigious awards to celebrate the brightest in federal contracting.
Ironically...
"We are losing thousands of dollars to keep this business alive."
Looking into the current website's metric, we saw that an average of 7 out of 10 customers would leave G2Xchange website in less than 15 seconds. There are weeks where the number of sign-ups is zero. We are not having many active users.
Let's look more into it.
The bounce rate for our website is 80-90%. Why is the bounce rate so high?
Let's get into some lightweight research like qualitative interviews or a usability study. To support strategic design plans, I led my UX team to run a UX audit on the original landing page to answer:
-
What is working, and what is not?
-
What does our data tell us about user needs?
-
What questions do we need to validate in a user interview?
See below for UX audits on G2Xchange's original landing page.
Listening is the secret to discover great stories.
After interviewing current G2Xchange users, our team validated questions that arose from our UX audit. We also discovered interesting stories about our users' experiences that could give us strong evidence for our design strategy.
In order to identify our users' needs and pain points, I conducted an 1-hour empathy map workshop with my team and we synthesize 150+ data points to insights.
How might we motivate users to sign up?
Current G2Xchange users feel stuck with unclear, insufficient information. Users want:
• to stay informed with real-time updates on their mobile devices.
• to understand G2Xchange values and credibility.
• to quickly and easily find information on contract opportunities and procurement processes.
.png)
In order to win, we need to know who we’re up against.
Displaying information in a clear and easily digestible way was our primary design approach. We created a list of G2Xchange’s direct and indirect competitors in order to understand the hierarchical structure of their webpages and how they advertise what they offer users.
Some of the direct competitors included GovWin, Bloomberg Government, and GovExec. Indirect competitors included GovTribe and Washington Technology.
Exploration is curiosity put into actions.
Users are not certain about what G2Xchange is and the benefits G2Xchange offers.
To win over a customer's 10 seconds of attention span, we need to clarify all the information about the company and the product.
I kept this in mind and focused on designing the landing page and think of it as the most important page for users. After multiple iterations, I asked my team and stakeholders for feedback. Not only did this collaboration reduce technical complexity, but it showed that we came up with similar solutions that had common design patterns:
1. A clear hero section
2. Product details section with a CTA button
3. A testimonials section.
Voting on the design as a team
Piecing the voted designs together
to create the final layout
Design iterations upon feedback
Iteration 1
👎 Users were confused why info about FedCiv and Health were put in narrow columns
👎 Too many CTA buttons in a single section distract users from the main information
Iteration 2
🤔 The big 80% is confusing, put it after the testimonials section
🤔 Information about FedCiv and Health is listed in an easy-to-understand way, however adding agencies' logos would help build better trust with users
👎 Pages in the navigation menu are inconsistent and have lack of information to build trust with users
👍 Appreciated the testimonials from real users
Iteration 3
👎 What does 80% mean? It is not easy to understand right away
👎 Pricing might be a blocker. Only want to sign up for a free trial first.
👎 Confused about "cut through the clutter", not really catchy. Email field is distracting and not effective.
👍 Appreciated the logos of big companies
Iteration 4
👍 Much clearer headline, very catchy!
👍 Appreciated the "8 hours -> 10 minutes", the pleasure is nice
👍 Testimonials in the interactive flipping form is great, showing clearer quotes and company logos
Now we've gained clarity on how to create a trustworthy experience,
how do we show it?
As the first UX designers of G2Xchange, we gathered hi-fi shippable assets into a Figma file so the company can start to use an existing design system going forward.
The goal of the landing page re-design is to motivate prospective users to sign up for membership. Hence, the main colors blue (trust + intelligence) and orange (change + energy).
"Design is how it works."
First, we need to grab user attention and convince them to stay.
-
A catchy headline informing users of what G2Xchange is about.
-
Easy sign-up process: no credit card required.
-
A permanent ‘Start Free Trial’ CTA button fixed in navigation bar always visible during scrolling -> leads to more successful conversions.
-
Logos of the popular companies that have used G2Xchange services as social proof to establish trust with users.
Now we focus on explaining what users are there for.
-
We specify key features of G2Xchange in a precise and clear manner that allows users to quickly convey the benefits.
-
With CTA, we encourage prospective users who are discovering about G2Xchange for the first time to learn more and sign up.
-
We ensure the CTA buttons remain visible throughout the landing page. CTA aligns with accessibility guidelines (WCAG).
-
We address how G2Xchange provides the solution to busy professionals' pain points.
-
My suggestion to add a video for each feature was considered effective in reducing bounce rates and increasing conversion rate. The videos are no longer than 60 seconds but intuitive, informative, showing users how G2Xchange can help them achieve their goals.
Trust is built throughout our landing page.
-
With easily recognizable logos of popular agencies who work with G2Xchange, we establish credibility with users.
“There’s no better introduction than a recommendation."
-
We share quotes from happy users as an "online recommendation" to build trust and at the same time to show that we value our clientele.
-
Users are more likely to give us a try if they trust the credibility of our testimonials, thus we include users' identity and their organizations as well as their logos.
Stitching all the sections together
Responsive designs
Why design responsively?
• One of the main user pain points is not being able to access G2Xchange on mobile devices
• Target user is business professionals whose goal with G2Xchange is to stay informed with real-time updates on their mobile devices.
-> Creating a responsive website was top priority to enhance G2Xchange users' experiences and increase conversion rate.
Outcome from our design
💙
67%
3-day retention measured by
revisiting resources.
🤍
78%
Conversion measured by users navigating to at least one resource.
🧡
55%
Weekly retention measured by users revisiting the website.
"Alone we can do so little.
Together we can do so much."
I was fortunate that G2Xchange offered me this opportunity as my first full-time job in the UX field despite the pandemic, especially with me being in Hanoi ! Despite the struggles of working nocturnally, I was able to:
Learn how to collaborate within Agile, business-heavy, cross-functional teams.
This was my first time working under the sprint-based framework, thus turnover rates were quick and changes were pushed frequently. Having the opportunity to collaborate within Agile, business-heavy, cross-functional teams of business and engineering allowed me to think critically within those lenses and apply product-based thinking to my designs.
See that B2B enterprise services still can be human.
The common stereotype with government contracting design is that it is “boring” and “federal”, but after interviewing and working with executives, I realized that at the end of the day it is people who are using these services. I learned to embrace imperfection with an open-minded to improve. I demonstrated team leadership in responsive design, and improved my management skills when enhancing teamwork during research and wireframing process.
Overall, I really enjoyed my experience at G2Xchange, and I was able to see the real impact of work.
💖 If you're all the way down here already, thank you so much for taking the time out of your day to live this journey with me!
You may also like...
.png)
Nomad News
How might we help users verify election news' credibility?
Safe Pocket
A mobile app makes sending and receiving money in foreign currencies easier.
Alexa for Airbnb <in progress>
Using Alexa's voice recognition system to improve guests' experiences during their stay with Airbnb.
.png)