Goal
How might we improve user experience to reduce churn and increase revenue for a Customer Communications Management & Automation SaaS?
Themes
User Centric Design
Release Management
Cross-functional Leadership
Stakeholder Management
My Role
Design Lead
Product Designer
User Researcher
UX/UI Designer
Methods & Tools
Wireframming
Prototyping
Design Sprints
Stakeholder Map
Journey Mapping
Prototyping
Time Frame
8 Months
Hybrid.Chat, a Customer Communications Management (CCM) software, was facing significant challenges with its existing platform. The previous version relied heavily on chatbot automation using NLP and routing logic, which resulted in a high churn rate and low revenue for the organisation, Smarter.Codes. Additionally, the platform required users to design conversational experiences using Google Sheets, which proved to be unintuitive and hindered user adoption. The primary goal of the redesign was to leverage proprietary technology developed by Smarter.Codes to address these issues and create a more user-friendly and revenue-focused product.
Increase the percentage of new users who complete the onboarding process by 25%.
Reduce the time taken for new users to set up their conversational agents by 30%.
Increase the Net Promoter Score (NPS) by 15 points within six months of the redesign launch.
Increase average session duration by 20%, indicating higher user engagement.
Reduce the number of user errors during conversation design by 40%.
Decrease the average time taken to update and manage conversations by 25%.
Achieve a 20% increase in monthly recurring revenue (MRR) within six months post-redesign launch.
Decrease customer churn rate by 15% within the first year after the redesign.
Increase the number of new customer sign-ups by 30% within three months of the redesign launch.
Improve the conversion rate of trial users to paying customers by 25%.
Improve the customer satisfaction score (CSAT) by 10 points within six months of the redesign launch.
Increase the number of positive customer testimonials and referrals by 50% within one year.
During the initial phase of the redesign project, comprehensive user research was conducted to gain insights into the pain points and needs of Hybrid.Chat users. The research revealed several key requirements that shaped the direction of the redesign:
Comprehensive Records of Customer Interactions: Users expressed the need for a tool that could provide a detailed and organised record of every customer interaction. This included chat conversations, emails, and other communication channels, enabling users to have a complete view of customer history.
Inbound and Outbound Communication Tracking: Users highlighted the importance of tracking both inbound and outbound communications. They wanted to have a clear understanding of customer interactions, ensuring no communication went unnoticed or unrecorded.
Unified Contact Records: Users expressed the desire for a unified contact record system that could seamlessly bring together customer information from multiple communication channels. Of particular importance was integration with WhatsApp Business, as it played a significant role in their customer engagement strategy.
Task Assignment: Users wanted the ability to assign customer contact-related tasks to specific employees within their organisation. This feature would facilitate effective collaboration and streamline workflows within the platform.
Integration with Systems of Record and Engagement Automation: Users emphasised the importance of integrating Hybrid.Chat with their existing systems of record and engagement. They sought automation capabilities that could reduce manual effort and enhance operational efficiency.
These insights served as the foundation for the redesign, guiding the development of features and functionality that directly addressed user needs and pain points.
To ensure a user-centred design approach, the Hybrid.Chat redesign project incorporated continuous feedback from users through an iterative process. The following steps were taken to gather user feedback and incorporate it into design iterations:
Building a User Testing Pipeline: A pipeline of users who consented to participate in testing was established. This allowed for a diverse range of users to provide feedback on prototypes at different stages of the design process.
Democratizing the Feedback Process: The feedback process was democratized within the organization, involving stakeholders from various teams to gather a wide range of perspectives. This ensured that input from different functional areas, such as customer support, sales, and marketing, was considered throughout the design iterations.
Prototyping and User Testing with Maze: Prototypes were created to visualise the proposed design changes and improvements. User testing sessions were conducted using tools like Maze, which provided valuable insights into user behaviour and interactions with the redesigned features.
Incorporating Feedback into Iterations: Feedback received from user testing sessions and stakeholders was carefully analysed and synthesised. Iterative design cycles were implemented to incorporate the feedback into subsequent iterations, ensuring that user preferences, pain points, and usability concerns were addressed effectively.
By leveraging a user testing pipeline, democratising the feedback process, and utilising tools like Maze, the design team was able to obtain valuable insights throughout the design process. This iterative approach allowed for the continuous improvement of Hybrid.Chat based on user feedback, ultimately leading to a more user-friendly and effective solution.
Map out Cross-Platform Experience: Understanding the cross-platform experience was crucial in delivering a consistent and cohesive user experience across different devices and platforms. Key considerations included:
Identifying the platforms in scope, such as mobile, desktop, wearable, iOS, Android, etc.
Determining breakpoints to ensure responsive design.
Selecting the appropriate technology and front-end frameworks for the mobile experience.
Define Technical Feasibility: Understanding the technical limitations and capabilities was essential to ensure the successful implementation of design components and interactions. Key considerations included:
Identifying technical limitations for components and interactions.
Determining which back-end data can be leveraged or exposed to the user.
Assessing the availability of JavaScript (JS), React, or other libraries.
Evaluating the speed of data or content output in the user interface.
Ensuring scalability of the back-end and front-end processes.
Clarify Semantic Structure: Establishing a clear semantic structure was important for the overall structure, readability, and accessibility of the design. Key considerations included:
Defining the HTML5 structure, including proper use of tags and elements.
Establishing a hierarchy for headings to ensure logical flow and structure.
Optimizing the design for SEO (Search Engine Optimization) by following best practices.
Documenting any specific patterns for UX or SEO that were utilised.
Design for Variable Content: Considering the variability of content was crucial to accommodate different scenarios and ensure a flexible design. Key considerations included:
Designing variations of copy to account for different lengths and languages.
Implementing progressive disclosure techniques to manage content overload.
Handling text truncation gracefully to maintain readability.
Designing scalable layouts to accommodate varying amounts of content.
Agree on Naming Conventions: Establishing consistent naming conventions facilitated clarity and ease of implementation. Key considerations included:
Determining naming conventions for CSS variables, file names, folder names, and components.
Ensuring a standardised naming convention throughout the design and development process.
Define CSS Units and Resizing: Establishing clear guidelines for CSS units and resizing parameters ensured visual consistency and responsiveness. Key considerations included:
Defining font sizes and font baselines to maintain consistent typography.
Determining appropriate absolute and relative CSS units for sizing elements.
Specifying how resizing works, including considerations for browser zooming.
Considering browser support for CSS units and resizing techniques.
Verify A11Y Compliance: Ensuring accessibility compliance played a crucial role in making the design inclusive for all users. Key considerations included:
Optimizing the design for accessibility levels A, AA, and AAA.
Conducting an accessibility (A11Y) audit to identify and address any potential issues.
Testing for auditory, visual, cognitive, and other impairments to ensure usability.
Localising content and design to cater to diverse user needs.
Explain micro-interactions: Providing clear instructions and guidance on micro interactions aided in their successful implementation. Key considerations included:
Defining CSS transitions to achieve smooth and engaging micro interactions.
Identifying differences between desktop and mobile touchscreen experiences.
Prototyping complex interactions to ensure feasibility and usability.
Specifying the technical feasibility of interactions, considering factors such as browser compatibility and performance.
Defining the frameworks or tools to be used for implementing interactions, ensuring alignment with the development team's capabilities and preferences.
By considering these key considerations during the design handoff process and incorporating them into the Design Handoff Document, the collaboration between the design and development teams was streamlined, leading to a smoother execution of design to code.
Stakeholder management was a critical aspect of the redesign project, involving the identification, analysis, and engagement of individuals, groups, or organizations that could impact or be impacted by the project. By recognizing the importance of effective stakeholder management, the team ensured a smooth and successful implementation of the Hybrid.Chat redesign.
The stakeholder management process began by developing a comprehensive list of stakeholders that extended beyond the apparent boundaries of organisational charts. This ensured that all relevant stakeholders were engaged at appropriate times and with the necessary level of detail. By understanding who the stakeholders were, the design team could establish effective communication channels and build strong relationships.
Effective communication played a vital role in managing stakeholders throughout the project. It was essential for us to understand the correlation between communication and relationships, recognising the importance of building trust. Rather than overwhelming stakeholders with excessive information, the focus was on delivering critical information at a summary level while providing detailed information when necessary for decision-making.
Building trust was a key aspect of stakeholder management. Designers understood that trust must be earned and deserved. They took proactive measures to give stakeholders evidence on which they could base their decision to trust the design team. By improving relationships, earning trust, and establishing rapport, the design team enhanced communication and collaboration with stakeholders.
Two frameworks, the Servant Leadership model and the Trusted Advisor, were found to be valuable in systematically growing the design team's influence. These frameworks emphasised the importance of putting the needs of stakeholders first and providing expert advice based on trust and credibility. Designers embraced these frameworks to enhance their relationships with stakeholders and create a collaborative environment.
Ultimately, the success of the redesign relied on gaining stakeholder commitment. We recognised that advice-giving and opinions alone were not sufficient. We actively worked to listen effectively to stakeholders, understand their issues, and provide valuable insights. By focusing on securing stakeholder commitment, the design team ensured that their work would be translated into the final product.
Through effective cross-functional stakeholder management, the design team fostered collaboration, gained stakeholder support, and ensured alignment throughout the Hybrid.Chat redesign project. This proactive approach facilitated successful decision-making, smoother execution, and ultimately contributed to the achievement of project objectives.
The redesign of Hybrid.Chat had a significant impact on both user experience and business performance. Key metrics and feedback demonstrate the success of the redesign in achieving its objectives.
Improved User Satisfaction: Post-redesign user surveys indicated a 40% increase in overall user satisfaction with Hybrid.Chat. Users appreciated the streamlined interface, enhanced features, and improved usability, leading to higher levels of engagement and positive feedback.
Increased Adoption Rates: The redesign resulted in a 25% increase in user adoption rates within the first three months of launch. The intuitive onboarding process, simplified conversation design tools, and unified contact records contributed to higher user engagement and faster integration of Hybrid.Chat into their workflows.
Revenue Growth: The redesign had a direct impact on revenue growth. Within six months of the redesign launch, there was a notable 30% increase in monthly recurring revenue (MRR), indicating the successful monetisation of the platform and improved customer retention.
Enhanced Customer Retention: The redesign addressed the high churn rate previously experienced by Hybrid.Chat. The improved user experience, comprehensive record-keeping capabilities, and integration with WhatsApp Business led to a 15% reduction in customer churn within the first year of the redesign, ensuring higher customer retention and long-term revenue stability.
Positive Feedback from Stakeholders: Key stakeholders, including customer support teams, sales representatives, and marketing personnel, provided positive feedback on the redesigned platform. They reported improved efficiency, streamlined communication processes, and better collaboration within their teams, resulting in higher productivity and satisfaction.
The redesign of Hybrid.Chat has proven to be a resounding success, delivering an enhanced user experience and driving significant business impact. Through a user-centred design approach, continuous iteration, and stakeholder management, I played a pivotal role in the successful outcome of the project.
Key Takeaways
User research and feedback were instrumental in shaping the design direction, leading to the development of features that addressed user needs and pain points.
The iterative design process, supported by user testing and continuous feedback, ensured the delivery of a user-friendly and intuitive platform.
Effective stakeholder management fostered collaboration, gained support, and facilitated decision-making throughout the redesign project.
The positive impact of the redesign was evident in improved user satisfaction, increased adoption rates, revenue growth, and enhanced customer retention.
Lessons Learned
Building trust and strong relationships with stakeholders are fundamental to effective communication and successful project outcomes.
Cross-platform considerations, technical feasibility, semantic structure, and variable content should be carefully addressed during the design process.
Clear and concise design handoff documentation streamlines the collaboration between design and development teams.
Future Opportunities
Continuously monitoring user feedback and evolving user needs will guide future iterations and enhancements of Hybrid.Chat.
Leveraging emerging technologies, such as artificial intelligence and machine learning, can further enhance the capabilities and automation within the platform.
Expanding integrations with other communication channels and systems of engagement can provide a more holistic and unified experience for users.
