New Inbox
Senior Product Designer • Dec 2021 - May 2023
Customer support specialists desire to close conversations with greater speed and efficiency. However, Help Scout’s outdated mailbox experience caused unexpected friction. To keep a cutting edge in the market, we updated the experience to be more modern and optimized for legibility and context. The new alpha experience displayed opportunities for iteration and early indicators of success.
Overview
Problem
Customer support specialists need to close conversations with greater speed and efficiency. Transitioning to Help Scout caused a lot of friction due to the outdated messaging patterns, compared to industry standard, and we needed to maintain an edge in the market.
Solution
In order to introduce new customer driven features we needed to migrate frameworks. During this time, we took advantage of updating the design to be more modern, optimizing for legibility and context, and maintaining focus with opt-in complexity.
Outcome
Delivered an alpha experience quickly to identify key opportunities for growth, while improving efficiency through new micro-interactions. Proposed larger iterations to key stakeholders and team that would result in greater customer buy in of the redesigned experience.
My role
I joined Help Scout mid way through this process and was tasked with taking the broad strokes of a rewrite and painting in the details. I co-led the team with the product manager in strategy and research. I designed everything from edge cases to new experiences within the Inbox, and conducted visual quality assurance.
What is Help Scout?
Help Scout is a customer support company, focused on providing a beautiful and highly usable platform for support specialists everywhere to aid the needs of their customers. Help Scout’s core product offering is the shared inbox and has grown to add in chat functionality, knowledge base doc support, and more.
Background on Inbox
The Mailbox experience’s original design.
Help Scout's core product offering, initially called the Mailbox, is a shared Inbox—a collaborative email management system specifically designed for teams. It allows multiple team members to access and manage incoming messages from customers or clients in a centralized platform. The shared Inbox enables team members to collaborate, assign, and track conversations, ensuring efficient handling of customer inquiries and support requests. It provides features like automated workflows, collision detection, and internal notes, facilitating streamlined communication and improved productivity for customer support teams.
I joined the project after the initial design phase had been broadly outlined. The Mailbox experience had remained untouched for many years due to the difficulty of adding to the existing code. In order to stay competitive, Help Scout needed to be able to build on their core product offering and to do so first needed to migrate frameworks. While the code was being rewritten, Help Scout decided to update the design to be more modern and simplified.
The principal designer initially guided the overall direction of the project but encountered challenges in collaboration due to various things like time zone differences. It was necessary to hire a dedicated designer who could enhance collaboration within the team. I joined the team to improve teamwork, find effective ways to work across time zones, move the project forward by paying close attention to the finer details, design various flows of the experience, and ensure that every aspect is carefully addressed and refined. My focus is on filling in the fine strokes of the experience to create a polished and enjoyable product and leading alongside the product manager and engineering manager through setting OKRs and developing a comprehensive roadmap for the project's development.
Collaboration
The team faced significant challenges in collaboration between developer and the designer. One major hurdle was that the designer's working hours had limited overlap with the engineering team due to their location. Because of the time difference, the design feedback felt more like waterfall practices, leading to inefficiencies and frustration from the developers. By the time I joined, I was the third designer, not counting the contributions from various leadership roles, involved in the New Inbox project. The team felt overwhelmed by the constant back-and-forth from designers and leadership, and they needed someone to advocate for them. As a defender of the team, working closely with the product manager and engineering manager, my role was to bridge the gap between leadership feedback and the engineers. The project greatly needed someone on the ground to push for higher-quality work and encourage efficient speed in delivering results.
Upon joining the team, I immediately took the time to meet with each member individually, getting to know their working styles and preferences when collaborating with design. I encouraged engineers to reach out to me whenever they had questions, aiming to increase speed in delivery and minimize quality assurance concerns during releases. To foster a collaborative environment, I embraced the nickname "Queen Dev," acknowledging that I'm not a developer and inviting the team to challenge any assumptions I made while still offering suggestions. Additionally, I organized a team meetup where we reviewed our progress, planned for general release, and conducted a "Go UI" session to polish the product and address customer feedback. To create a cohesive identity, I facilitated a workshop with product marketing, product management, and key stakeholders, resulting in the establishment of a universal name for the new experience: the New Inbox.
Filling in the Details
When I joined Help Scout, the New Inbox had some broad strokes design, principles, and interactions already in place, yet due to the complexity of the product, there were still many missing facets of the experience. I worked with my PM to quickly get up to speed on the work needed and where we were in the process. From building prototypes to ensure a seamless user flow, to designing various states and considering edge cases, I focused on refining and filling in the details of the New Inbox. Additionally, I took on the task of designing new experiences that were missing from the initial designs.
As a senior designer, my goal was to ensure a cohesive and user-friendly experience for our customers and fellow designers. Since the Inbox is Help Scout’s core product offering it was essential that the new designs be systemized so that my fellow designers can quickly use the components to build upon in their work. I tackled various aspects, such as creating new conversations, handling bounced emails, and systematizing new Inbox components. Some of my favorite details I worked on include how a user previews an attachment, the interaction of identifying new threads, and the experience of opting into the New Inbox.
Example of taking the broad stroke design and refining the design through adding in the details, building out corner cases, and various states of the experience.
Preview Attachments
The preview attachments experience before the redesign.
The new designed preview experience all within a single tab.
The old Mailbox experience relied on the native browser features to do any sort of “preview” but that was simply opening an image in another window to allow the user to download. In the Inbox, we wanted to allow the user to preview the image/PDF in the same window with some additional options. Our users often will skim an image to gather greater context on the customer’s issue and switch back and forth while responding.
I started with identifying existing affordances and looking at competitor and industry standards for previewing attachments. All competitors defaulted to what the Mailbox already did or just downloading instead of previewing. Email industry leaders, like Gmail, use a screen take over preview. Because of this research, it was clear that the experience should have a preview experience that was easy to navigate and allowed the user to not be distracted by the rest of the UI.
Hover state for attachments.
This project had some time constraints and so we focused on an MVP solution. I initially sketched out some explorations and chatted through options with the team. It was clear that a screen take over solution was the way to go! I built out a prototype, shared with the design team and refined based off of their critique. Upon finalizing the solution, I documented the design in a Figma spec file and co-wrote a spec doc with the team. The work was then slated for a future sprint.
Check out the prototype →
New Threads Interaction
All the variants to new threads interaction based on thread types.
In an effort to increase our team’s customer empathy, we started family meal sessions where we could explore the pushed changes in a safe environment. Through one of the sessions, an interaction was caught that wasn’t fully built out. The original design called for a pill to alert the user that new threads of a conversation were there and upon clicking the user would be brought to the new thread. It was upon actually using the feature that an opportunity for improvement was noticed. The user had no context as to which thread was new upon initial scroll (besides the date stamp).
With a desire for a quick turnaround & small win for the team, I went to work to identify existing patterns around identifying new items. A pattern I loved was highlighting the new content briefly before dismissing the highlight. I quickly threw together what that highlight might look like and how it could vary based off the thread type (reply, forward, bounce, etc). Getting the colors to not look like candyland while utilizing our design system colors was definitely a challenge but through some refinement we were able to have a nod to the thread type and keep it simple. I wrote up a Jira ticket with the prototype and a video walkthrough and the team added this card to the sprint.
Check out an example of a new reply in this prototype →
Opting into the New Inbox
While getting ready to release the new experience to Alpha customers and still striving for feature parity, our goal was to provide users with a seamless option to easily switch between the new and old experiences. We wanted to ensure that they could swiftly opt in or out as necessary and provide valuable feedback.
In order to create an opt-in experience, I initially explored using design system components, but the initial designs felt too subtle. Instead of diving into highly detailed designs, I took a step back and worked on visually appealing but low-fidelity wireframes. This allowed me to find the right balance of disruption and meet our opt-in goals. I kept refining the design, and ultimately landed on a phased approach where we gradually increased the level of disruption as we approached the complete switch to the new Inbox.
From subtle to more in the user’s face, the experience gets more aggressive as the product gets closer to general release. Starting with a subtle toggle in the user’s menu and, upon opting out, a feedback loop all the way to a modal with video announcing the sunset of the old mailbox experience it was designed. For our Alpha customers, we initiated the subtle toggle and found users decreased opting out as we grew closer and closer to parity with the old experience.
Explored some ways to solve for this in wireframe format.
As we progressed towards general release, I designed the user experience to be more noticeable and assertive. It began with a subtle toggle in the user's menu, and if they chose to opt out, we implemented a feedback loop. When we approach the sunset of the old mailbox experience, we will introduce a modal announcing the upcoming change. From the initial subtle toggle to the modal, we would increase disruption through additional messages and feedback requests. During the Alpha phase, we observed that users were less likely to opt out as we continued to achieve parity with the old experience.
Check out my favorite phase of the opt-in with this prototype →
Research & Iterations
Joining a project midway can present challenges, especially when you haven't been involved in the initial research phase to define success metrics. To address this, I collaborated with my PM and product analyst to identify ways to measure the success of our product. Since our primary focus was on updating the UI and migrating the framework, we decided to gauge user perception by asking our testing users if they found the experience simple, powerful, and beautiful. We also employed a combination of quantitative data analysis and qualitative user feedback to assess usability. I initially created a dashboard in Heap to track certain data points and assumptions of what success would look like.
For the Alpha release, we first made the new experience available to a select group of existing users and our own customer support team. This allowed us to gather valuable insights. As expected, some bugs were discovered by our users, which we promptly prioritized and addressed them without delay. We received feedback on features and improvements that were already in progress and scheduled for release during the alpha phase. The top feedback we received was regarding the limited space for writing replies, which was a major concern. I quickly started working on a solution to this feedback and found a lot of success in the iteration.
Some of the Slack feedback and community we created through our Alpha release.
Reply bar
The New Inbox design initially had limited space for responses to balance the ability to write and read previous replies simultaneously.
Example of how the reply bar works on a small screen size.
How the experience displays ideally.
What the experience looks like on a larger screen.
Upon receiving feedback, I spoke with users and discovered that different screen sizes presented varying needs. Users with larger screens desired more vertical space for the reply bar, while those with smaller screens wanted to see more of the conversation. To address this, I explored different iterations, including user-controlled variants, but realized a one-size-fits-all approach wouldn't solve the problem effectively.
To provide a better solution, I considered allowing the user's screen size to dictate the experience. This meant allocating more space for responses on larger screens, while keeping the editor inline and expanding it to fit content on smaller screens, similar to the existing Mailbox. When I shared this idea with the team, the engineers confirmed its feasibility within a two-week sprint. I documented the changes, created high-fidelity prototypes, and prepared tickets for the upcoming sprint.
Documented Jira tickets, in prep for development with links to prototypes and more.
The suggested update for small screens.
The large screen variant suggested update.
However, our Experience leadership team requested a pause in this work to focus on another project, despite our concerns about the decision. Despite voicing our objections, we ultimately followed the leadership's desired approach.
Check out the proposed iterations to the reply bar for smaller screens in this prototype →
Note how the icon changes to show that the user is pressing the key.
Hot Keys
In addition to iterations based on alpha feedback, we also leaned into our design principles to create improvements. Wanting to encourage speed of efficiency with the new editor, we introduced hot keys for the new shortcut menu. I collaborated with another designer (who’s team used the new editor as well) to design these hot keys and worked through the interactions of them. We were able to release the hot keys to our alpha users and receive qualitative feedback of their success.
Results
During my time as a designer on this project, I fostered a highly collaborative team environment, not only within our team but also across teams in the organization. Our improved communication and problem-solving collaboration resulted in increased speed to delivery. As our team's collaboration improved, so did our cross-team collaboration, leading to the absorption of another dev team to focus on various facets of the Inbox.
To ensure clear understanding and for future reference, each design was documented in separate spec docs with links to prototypes, figma files, and Loom videos that walked through the experience. These documents were shared with the team and proved helpful for multi-team collaboration and sharing interaction details across the organization. As other teams built on the New Inbox, I partnered with a fellow designer to explore AI integrations and how they would fit within our newly designed experience while adhering to established Inbox guidelines. I continued to partner with designers across the org on iterations to their experiences that involved the New Inbox. Thanks to the robust components I built for the New Inbox, collaborating with other designers across the organization was seamless.
We released the product to Alpha and started to increase numbers of participants, following a slow release plan to Beta/GA. Leadership encouraged a lengthy Open Beta.
Next steps
As we expanded the number of users in the Alpha/Closed Beta group, the product manager and I began discussing post-GA improvements based on valuable user feedback. We explored exciting additions such as snooze, round robin, and office hours to enhance the New Inbox further.
Check out the slider prototype → to see how we went from Mailbox to Inbox!