Capsule in-app email feature

UI Design
Design Systems
Customer Insights
Role: Product Designer
Duration: May 2021 - Mar 2022

Introducing a highly requested feature to allow customers to send emails directly to their stored contacts from within the Capsule UI.

TLDR

A highly successful UI and UX design project that led to a high-adoption rate of over 24,000 feature uses in a 3-month period.

A highly requested feature

Analysis from customer survey responses from those who did not convert to paying customers, churned or left Capsule showed that the reason for those Customers leaving was due to the lack of Marketing features such as in-app Email support. Additionally, I could analyse the use of existing email related features in Capsule to gather an idea of how many accounts and users could potentially use this feature.

Competitor analysis showed this was a feature that was becoming a standard in the industry and Capsule had an opportunity to meet the email expectations of the modern-day CRM user. I can apply the concept of Jakobs Law throughout this project to ensure the user experience remains familiar to customers to help drive adoption.

Customer Insights & Empathy

As already mentioned, usage statistics from existing email related features in Capsule such as Email service integrations, email address copying, uses of the email 'Drop Box' feature etc allowed us to gather insights into the potential impact of introducing internal email sending features.

Customer feedback and one-to-one interviews helped us shape our users expectations and helped us gather initial ideas for an MVP feature-set.

Competitor analysis

Investigating competitor products such as insightly, nutshell and copper crms and more commonly used email tools was also used to gather insights into what our customers might expect the UX to look and feel like. This relies on our customers Familarity Bias with other applications in the market.

Exploration & Ideation

Before diving into the interface, I needed to gather a clear understanding of the user journey through Capsule and how the email feature would be integrated throughout the app.

In addition, I needed to explore the how the feature looks to different types of Capsule user. Admins have control over certain features that a typical user did not. These were explored by using a simple User flow chart as shown below.

Low Fidelity Prototyping

Whimsical was the tool of choice to create quick wireframe prototypes, exploring UI and gathering quick feedback form relevant stakeholders. Each design was carefully considered against user scenarios and rapidly iterated upon.

A particular challenge that was faced was how to represent different kinds of generated field information that could be injected into each email in a way that was visually appealing but also distinguishable based on their source, whether the field related to the recipient or senders information.

High Fidelity Prototyping

Figma was used to create high fidelity prototypes of each UI component, page and state. Careful consideration was used to ensure designs were accessible and followed carefully structured keyboard navigation.

Designs and prototypes were created and shared with a wider audience, including front and back-end developers to gather quick feedback and resolve technical and usability issues.

Many component designs were in place from an existing design system but there was much room to expand improve on the design system components themselves following the discoveries made during this project.

Each component had many potential states, and clear Figma file organisation and communication with back-end and front-end engineers was paramount.

Developer Handoff

Once the high-fidelity designs were finalised, it was time to begin the developer handoff.The nature of the team structure was that it would be rare for a developer or designer to work in isolation.

With a well documented Design system, handoff consisted in the creation of thorough screenshots with referenceable titles and descriptions that explained position, behaviour, state, interaction and conditions to the developers.

Figma prototypes were also created for key flows and interactions, including keyboard interactions for the email compose modal. These could be easily shared and discussed within the team and close communication was maintained between myself and the developers to ensure any issues or queries were addressed quickly and smoothly.

A successful MVP

Customer feedback after the initial roll-out to signed up Beta testers was excellent. There were a few comments about how to access the feature and changes were made to make this easier. A big-bang release to the public was carried out accompanied by an in-app announcement and a blog post. With a new feature, one way to measure its success is simply to measure feature adoption.

Pendo was the tool of choice to bind click events from users to features in Capsule and provide meaningful and shareable usage statistics.

Each UI component that was interactive to the user was monitored, tagged and grouped to create an accurate view of how much the new Email features are used.