Intelligent support operation system website redesign
Created interactive prototypes and information architecture and developed solutions for AI to give their users a better understanding of their product using their website.
Project Overview
The Loops Intelligent Support Operations platform utilizes AI to provide customer support and success teams with visibility, insights, and automation across the support stack (including ZenDesk, Salesforce, Slack, etc.). However, the current website does not clearly explain the product's functionality. As the industry moves towards proactive customer service, it's crucial for clients to have an effective way of communicating the product's benefits to their customers.
My Role
Team Project: In this project, four designers were involved in redesigning the process: myself (research and data synthesis), Ife (product management and client relationship), Kalayda (research and content strategy), and Eric (design lead).
As one of the four project designers, my role was to lead research and data synthesis, and I was involved in every phase, from research to delivery. My primary responsibilities included user research, Information Architecture, Interaction design, UX writing, and Visual design.
Tools
Figma
Trello
Project Duration:
Sep 19, 2022 - May 9, 2023
Methods
Current Website Analysis
Heuristic evaluation
Competitive Analysis
User Research
Affinity map
Storyboard to define the problem
Journey Map
User flow
Information Architecture
Prototyping
Usability testing
Problem statement and challenges:
The Loops intelligent support operations platform website's technical jargon and overwhelming information architecture are causing confusion and hindering effective communication of the product's benefits to a subset of Saas companies. This persistent problem is evidenced by the fact that the hero message on the website, 'Supercharge your support operation with AI,' is not easily understandable by most users, leading to a lack of demo or free trial requests from potential customers.
The challenge for this UX design process is to improve the website's communication and messaging to make it clear, concise, and easily understandable by the target audience, with the ultimate goal of increasing revenue for Loops.
Goals
Simplify the language and reduce technical jargon to make the content more easily understandable to the target audience.
Streamline the website's information architecture to make it easier for users to navigate and find the information they need.
Develop clear value propositions and calls to action to encourage sign-ups for demos or free trials.
Focus on highlighting the key benefits of the Loops product in a clear and concise manner so that users can quickly understand the value it provides.
Current website homepage
Process:
Discover: We conducted heuristic evaluations, card sorting exercises, user interviews, usability testing, surveys, as well as competitive and comparative analyses to gain a comprehensive understanding of users' needs and requirements.
Define: We analyzed the research data and defined the problem statement, user personas, and design criteria. This helped us to identify the key requirements and constraints for the design solution.
Develop: We conducted brainstorming sessions, sketching, wireframing, and prototyping, and tested the design with users. We then iterated potential design solutions to ensure optimal outcomes.
Deliver: The final phase involves implementing and delivering the final design solution. We created visual designs, user interface designs, and interactive designs, conducted user experience testing and delivered all required materials.
Competitive and comparative analysis
We started the research face with competitive and comparative analysis to gain insights and identify opportunities for improvements.
Competitive analysis
Comparative analysis
Key Findings:
Based on the evaluation of the competing companies, we decided to focus on the following:
Clarifying the company mission and product description.
Highlighting and centralizing customer testimonials.
Providing prospective customers with a view of the product before scheduling a demo.
Clearly communicating ROI.
Creating a pricing/packages information page.
User interview and usability testing
Conducted usability testing for the current website to evaluate how easily and efficiently users can accomplish the tasks on the website. It helps us to identify any usability issues or obstacles that users may encounter while interacting with the site.
Task 1: The user will be able to learn about TheLoops platform and identify the different features they offer within 3 minutes or less, and with no more than 2 errors.
Task 2: The user will be able to schedule a demo within 30 seconds or less, and with no more than 1 error.
Task 3: The user will be able to sign up for a free trial within 30 seconds or less, and with no more than 1 error.
Task 4:The user will be able to sign up for the newsletter within 1 minute or less, and with no more than 1 error.
Usability test results
System usability score
Key takeaways:
The site's language was difficult to understand.
Users could not easily discern the products or services offered by TheLoops.
The navigation was not intuitive, and users often became lost.
Primary Persona
Story board defining Jades’ problem:
Solution
Based on Jade’s need and frustration, we came up with the initial solutions
Creating a better homepage and hero message will show her how Loops can help reduce the time she spends on CX-related issues.
Creating an ROI calculator can help her monitor her investment with Loops.
Creating a page that explains how Loops works and how the centralized dashboard helps coordinate teams and improve customer experience to increase revenue would be beneficial.
Information architecture:
Based on the research and the results of card sorting, we completely changed the information architecture,
Including some main changes such as adding an FAQ section to the resource page to provide answers to common questions that Jade may have about a product, service, or company,
Providing pricing details to help Jade make informed decisions about whether or not to purchase a product or service and
Creating a "How it works" page that showcases all use cases on a single page can help Jade visualize how the product can be used in various scenarios, which can help her better understand its capabilities and how it can solve her problems.
Sketches
We used a five-minute sketching approach, where each designer rapidly ideated and iterated on design concepts. This helped us to generate a wide range of ideas and refine our thinking before starting detailed design work. Additionally, it provided a way to gather feedback and validate design concepts with users.
Low- fi Wireframe
Annotations
Home page
Annotations
FAQ page
Prototype
To guide Jade through each stage of the customer journey, from initial awareness of the product to making a purchase, we utilize the concept of the customer funnel, which includes four stages:
Awareness
Interest
Decision
Action
In the awareness stage, we made the home page more intuitive and clarified the product by changing the hero message. Additionally showcasing all use cases on a single page can improve the user experience by providing an easy-to-use interface that allows Jade to quickly and easily navigate through the different features and benefits of the product. This can also help businesses establish themselves as reliable source of information and build trust with potential customers.
Home page
How it works page
Moving into the interest stage, we created an ROI calculator to pique Jades' interest in the product.
Home page ROI calculator section
ROI calculation page
In the decision stage, we developed a FAQ page and a pricing page to help Jade evaluate the product.
Finally, in the action stage,
We changed the name of the demo call-to-action to "Get into theloops" to provide a sense of urgency, which can encourage Jade to take action
Additionally, we removed the free trial option upfront, so the website can better qualify leads and ensure that only serious potential customers are requesting a demo and the website can encourage more engagement and interaction with the product. Jade is interested in trying this product, so she can spend more time on this website and interact with the demo and video, which can increase her understanding of the product's value proposition.
Qualitative insights of usability test
We conducted a usability test for the hi-fi prototype, and we found that
100% of users could understand the product and services within 2 minutes.
80% of users liked the ROI page and FAQ page.
20% of users didn’t understand the pricing page interaction
20% of users struggled to find Demo CTA and did not recognize the “Get into the loops” Demo CTA.
Next Steps:
Simplify the pricing page interaction: For the 20% of users who didn't understand the pricing page interaction, consider simplifying the design or providing clearer explanations or visual aids to help users understand the pricing structure.
Improve the demo CTA: For the 20% of users who struggled to find the Demo CTA or didn't recognize the "Get into the loops" Demo CTA, consider making the CTA more prominent or providing more context and information around the demo process.
Expand on the success of the ROI and FAQ page: Since 80% of users liked the ROI and FAQ page, consider expanding on this success by adding more detailed FAQ sections throughout the website.
Consider adding additional features or tools to improve usability: Even though all users understood the product and services within 2 minutes, consider adding additional features or tools to further simplify the user experience and make it even easier for users to understand and use the product.
Conclusion:
The Loops platform website was hindering communication of its benefits due to technical jargon and overwhelming information architecture. A UX design process was initiated to simplify language, streamline navigation, and increase revenue. The process involved research, evaluation, and user testing, which led to the creation a better homepage. The solution addressed the target audience's needs and improved the overall user experience.
Takeaways:
This project has provided me with the knowledge of developing a website that can steer customers towards making informed purchasing decisions. Additionally, I have also learned the art of enhancing user experience by employing effective UX writing. Overall, I now comprehend how a website can act as a valuable sales tool for any business and how to exploit its capabilities to the fullest.
Interested in working together?
Get in touch today.
I’d love to learn more about you and your next project! Send me a message, and let’s get to collaborate.