The fully integrated Chat interface, complete with new filtering system and main navigation. A clean, clutter free UI.
The need to merge Gecko Chat into Engage arose from both internal inefficiencies and user pain points:
Alongside the product management team, I conducted interviews with users from both platforms to gather feedback on how they use Chat and Engage. A recurring theme was the inconvenience of switching between two separate platforms, especially for tasks that required data to be centralised (e.g., managing student communications, viewing engagement metrics).
We also run a series of internal stakeholder meetings. These sessions helped align and reaffirm the project’s goals:
The old Engage and Chat interfaces vs the new, cleaner and more focused Engage platform. With the new menu we have gained both horizontal and vertical real-estate.
A team including myself, product managers and lead engineers gathered for a kick off meeting, where we would discuss user flows, brainstorm ideas as to how we can quickly deliver the project, discuss any additional UI requirements and explore the technical challenges we face.
During brainstorming sessions, I facilitated discussions around the key user flows that would be impacted by the integration. I worked closely with product managers and engineers to develop ideas that kept the user experience seamless while allowing us to build on Engage’s infrastructure. Having already re-developed the conversation interface with React-Bootstrap, we had a huge head-start on integrating this key screen into the Engage platform - some tweaks were required however.
We identified:
I created wireframes that demonstrated how chat elements (e.g., chat windows, user interactions, conversation threads) would fit into Engage’s interface. Key decisions included redesigning the navigation to allow users to seamlessly switch between chat, forms, contacts, and other Engage modules. These wireframes were shared with internal teams to ensure alignment before moving to high-fidelity designs.
We solved for the four panel layout by introducing collapsible panels - giving users the freedom to shape the interface how they want it.
One of the first major issues we faced was the need for flexible conversation filtering within the new integrated environment. The original layout of Gecko Chat had a simple, horizontal filtering system which had its limitations - mostly around the fact space was of a premium and users could only create and pin a limited number of custom filters to the filter bar.
We wanted to replace the horizontal filters with vertical filter. However, we identified a potential bottleneck in the design: users would now be dealing with a four-column layout, which posed a significant challenge in terms of horizontal space. Our goal was to ensure that users could easily filter conversations without feeling overwhelmed by an overloaded interface.
To mitigate this, we introduced collapsible panels for conversation filters. This allowed users to show and hide various panels on the Chat interface based on their immediate needs, creating a more streamlined experience. By giving users control over their interface, we were able to maximize screen real estate while still providing the powerful filtering options they required. This not only solved the space issue but also increased user satisfaction by allowing them to personalize their workspace.
One of the challenges that became immediately clear was the horizontal taskbar in Engage. While it previously served a basic function—holding the brand logo and a limited user menu — it didn’t offer much in terms of utility. Given that we were adding significant functionality (Chat), it was crucial to optimise the screen layout to allow for more operational space and ensure users didn’t feel confined.
We made the strategic decision to combine the horizontal taskbar with Engage’s existing side navigation. By integrating these two menus, we freed up valuable horizontal space, allowing us to expand key functional areas like chat windows and user information panels. This simple but effective change not only decluttered the interface but also allowed for a more seamless navigation experience by putting all the key tools in one accessible menu. The additional screen space was immediately noticeable, providing users with a more expansive view of their conversations and tasks.
One of the most significant UX challenges we faced was the integration of Chat into Engage’s navigation system. The existing Engage navigation was bloated, unorganised, and contained several redundant items. Chat, being a real-time communication tool, required quick and intuitive access, but the existing menu system was cluttered and could have hindered users’ ability to switch between functions fluidly.
To streamline the experience, I designed a side navigation bar that allowed users to access Chat in the same hierarchy as other critical Engage modules such as contacts, forms, and events. The restructured navigation was both simplified and scalable via sub-sections. This approach was a key decision because it future - proofed the interface, making it adaptable to future updates or additional modules.
The new navigation also reduced cognitive load by decluttering the user interface and creating a more focused experience. With Chat now fully integrated into Engage’s core navigation, users could easily switch between communication and other engagement tools without losing their place or experiencing friction.
The new vertical menu combined with sub-sections. Each sub-section contains key product areas and settings relating to the parent menu item.
The project is currently in progress, with the first phase scheduled for release in the coming weeks. While we don’t yet have hard data or user feedback from the final product, the design process has already revealed several positive outcomes. By focusing on a user-centered design approach and aligning closely with our business objectives, we are confident that this integration will deliver significant value both to our users and our internal teams.
One of the most valuable lessons I’ve learned during this project is how to scale back design in order to prioritize shipping faster and meeting leadership-set deadlines. Initially, our team envisioned a more extensive overhaul of both the Chat and Engage interfaces, aiming for a highly polished product with more custom features. However, given the timeline pressures and business directives, it became clear that focusing on the core essentials would allow us to ship the most impactful changes quickly, without overburdening the team or delaying the project.
By taking an iterative approach, I learned how to effectively:
As we move toward the final launch, the team is excited about the potential to roll out new features that build upon this integration. The foundation we’ve laid with the Chat and Engage merge opens the door to future possibilities, such as leveraging AI for proactive student communication, integrating chat data into broader engagement analytics, and expanding the ways students interact with the platform.
