Transform Customer Experience on Websites
Ashley started to work remotely from home due to the pandemic. She googled "no green screen background removal" and found Personify Inc. She opened the website but not sure which products to try and where to download the software. She clicked the "Try Free" button to sign up and finally able to download the software. After playing around with the software, she encountered some issues but couldn't find the answers from the website. She didn't hear back from the support team after submitting a ticket for 4 days. She was frustrated because she couldn't make the software work.
This story above summarizes some of the biggest user pain points and major UX issues. The revamp project aims to conduct hypothesis-driven lean UX design to improve the workflow and streamline the journey to drive sales on websites.
Role
UX Architect, Content Strategy
Duration
2 months, launched in Aug 2020
Process
Data analytics, user journey, hypotheses, streamline information architecture, validation with wireframes, prototyping.
Success Metrics
Increase in download rate; Increase in upgrade rate; lift average time of users finding information.
Problem Statement
How might we help users to quickly understand the value proposition of the products and streamline the customer journey on the website?
User story
As a salesperson who just started to work from home and needs tools to enhance video conferences, Ashley wants an end-to-end service on the website such as upgrading subscription and find answers from FAQs, so that she can efficiently resume her work remotely and minimize her time on troubleshooting.
Discovery
User Journey Map
Starting with mapping out the user journey of our website, our business goals, and the current site map to identify the areas that we can work on for improvements.
Data-Informed Hypotheses
I monitored session times, bounce rates, goal completions, and user behaviors on Google Analytics. We formed the design hypotheses of each phase based on the analytics, and discrepancies between the sitemap and the user journey.
What should be done?
Reorganize the information architecture!
1. Make navigating on the site easy and smooth
2. Present the complex information in a clean way
3. Establish a sense of place and clear relationships within the page content
Design Process
Hypothesis-Driven Ideation
The ideation phase is based on translating key observations and opportunities into actionable solutions. I worked with different internal stakeholders on the brainstorming, including using deliverables to explain the UX concepts.
From Confusion to Clarification
Case 1 - Download
Problem Statement
1. The user is a cautious online shopper who needs to easily access and because she makes purchase decisions based on her satisfaction after trying products.
2. Users were unable to see any sign of "download software" in the previous journey without log-in, they must sign up for an account. This led to a high drop-off rate after landing on the sign-up page.
Hypothesis Statement
If the user can download without log-in and get an overview of the system requirements, then they can easily access to try the product without failing the installation.
Design Decision #1
Cleared up the information architecture on the site map while putting download in the navigation bar.
Design Decision #2
Users are able to download both Wins & Mac versions of the software while getting informed with the requirements, and a link to all the previous versions on one page.
1
2
3
Reorganized FAQs using collapse pattern clean up the page.
Reorganized FAQs using collapse pattern clean up the page.
Reorganized FAQs using collapse pattern clean up the page.
📍 I also designed the mobile version to ensure the design is responsive.
📍 High Fidelity Prototype
From Ambiguous to Obvious
Case 3 - Content
Problem Statement
Website visitors who just started their new remote working life need a way to understand what are the core value and capabilities of Personify's products in order to know if the products are the right tool for the next online presentation.
Design Decision
I reorganized the layout of the information, rewrote the copies, and chose the images that can best represent the value of our products. The value proposition of the products and features are clearly stated. So website visitors can grab who we are and what Personify is offering in a quick glance.
Validation
I presented the mid-fidelity prototype of the new design to 7 users for usability testing and 95% able to successfully achieve the goals of
1. Exploring and understand the products (Awareness)
2. Easy access to software (Consideration)
3. Shorten the time of finding solutions to designated problems (Post-Sales)
Therefore, we moved on to high fidelity prototyping and staging.
⚠️ The old site map shows a messy architecture of the workflow.
Design Goals
From Inefficient to Optimized
Case 2 - Support
Problem Statement
The previous FAQs of both products were hidden inside all the resources. By clicking FAQs, it brought users to an article with all kinds of questions (without order) listed in it. The way it was presented led to countless support tickets every day because users couldn't find the information they need, would rather jump to contacting us.
Hypothesis Statement
If the user can download without log-in and get an overview of the system requirements, then they can get the answers ASAP and would not have to reach out to support.
Design Decision
#1
The new design of FAQs greatly utilized the collapse and expand patterns to keep the layout clean when other information is not needed. For easy navigation, the questions are categorized under two software, between "General" and "Troubleshooting" while Tips go to "Featured Articles".
#2
Questions are listed in links form and by clicking it, users will see the answers expanded (please refer to the image below). Save the time for users to find the answers by themselves.
#3
Users can directly access the support form once they enter the "support" page from the navigation bar, which greatly shortens the journey of post-sales support.
Reorganize information architecture, design graphics and copywriting.
Reorganize information architecture, design graphics and copywriting.
Reorganize information architecture, design graphics and copywriting.
Conclusion
After the new IA and design are implemented, we've seen a tremendous 120% increase in the download rate since users are able to easily access to try the software. Moreover, a 37% increase in the subscription rate as the content on the website gives clear messages on the capabilities of our products. Last but not least, the number of support ticket decreased significantly by 79% as FAQs is easily accessible.
(For confidentiality reasons, I have omitted the actual values for these metrics.)
As our team took the Lean UX approach on this redesign project, we need to keep monitoring live site data in Google Analytics and iterate accordingly.
Takeaways
Data is a crucial friend
The live site data of your website on Google Analytics tells you a lot of insights even without conduct a usability test. The following metrics are essential to monitor and iterate accordingly- conversion rate, drop-off rate, goal completions, and navigation summary.
Visual communication changes the game
An efficient visual communication could replace a million copies. It is also vital to communicate with visual designers from a user standpoint and promote the UX vision.