Chat Widget
Goal
Collaborating with external suppliers, we integrated a chat service and live shop floor broadcasts to gently encourage user engagement and tailor it to their specific experience.
Problem Statement
Users encountered two distinct widgets at various points in their journeys: one for chat and the other for live video streaming. This approach was found to be disruptive, perplexing, and irrelevant when consistently presented throughout each stage of the journey.
Crafting the Three Live and Three Store Now widget on Three.co.uk, facilitating seamless and user-friendly collaboration between the two tools on a single page.
What does success look like
Designed and implemented personas tailored to suit the target audience
Addressing a challenging requirement where two chat widgets were positioned to overlap one another
Created a matrix detailing specific widget placement when the user hit different URLs
Research
In the initial discovery phase, my focus was on evaluating and comprehending the existing user experience.
I delved into analytics, heat maps, and user testing data related to the current experience, which provided valuable insights into identifying pain points.
Simultaneously, I researched into competitor websites, industry best practices, and other pertinent widgets that could contribute to shaping the new solution.
This thorough exploration laid the groundwork for our subsequent steps.
Process
Wireframes and Design
The challenge of displaying two different widget types to users at various times was a complex endeavor to communicate effectively. In response, I devised a systematic approach to address this complexity.
My solution involved the creation of a matrix that outlined the specific URLs at which each widget should be presented.
To provide a comprehensive understanding of the user experience, I developed journey maps that detailed the user's path and interactions with these widgets.
In addition, I generated annotated wireframes that covered each potential scenario and state of the widgets. These annotations served to articulate and describe the nuances of how the widgets would behave under various circumstances, ensuring clarity and consistency in their presentation. This structured approach aided in simplifying the communication of this complex widget implementation strategy.
Build and Iterate
Following the creation of initial high-level wireframes, we sought valuable feedback from our customers to assess whether the interface effectively addressed the problem statement and was intuitive for users.
In parallel, we conducted stakeholder reviews to ensure alignment with our business Key Performance Indicators (KPIs).
As the wireframes progressed to a high-fidelity stage, we incorporated the user interface (UI) and refined the copy.
Before finalising the design, we conducted one last round of user testing to verify that the interface continued to meet its objectives and function seamlessly. This comprehensive process ensured the interface's clarity, effectiveness, and alignment with business goals.
