2023

Email App Redesign

 

Case Study

All Email Access is a mobile application for managing multiple email accounts made for Android . The redesign aimed to improve feature adoption and user engagement while modernising the interface with Material Design 3. Key objectives included increasing discoverability of advanced email features and optimising the navigation structure to enhance the process of composing and sending emails.

Problem Statement

Our analytics revealed suboptimal engagement with several email features (below 1%). Users struggled to use the app efficiently due to challenges with the navigation structure.
This resulted in limited usage of advanced email features and decreased productivity. The mobile context presents unique challenges that were not adequately addressed by the existing design, leading to reduced adoption rates and diminished platform effectiveness.

Roles and Contribution

  • Redesign the user interface of the app by introducing Material Design 3 framework and practices across the system. 

  • Minimise disruption to the existing user base while introducing design improvements.

Challenges

The most difficult challenge for this project was to work under shifting organisational priorities with significant stakeholder involvement. Other challenges included: 

  • Technical limitations: Legacy web-view components requiring separate development effort.

  • Resource allocation: Single designer with engineering support.

  • Business requirements: Maintain existing user workflows while implementing new design system.

  • Stakeholder alignment: Multiple approval stages required for major UI changes.

Creating an interface from scratch offers the freedom to prioritize the user’s needs at the core of the design and center the layout and navigation patterns around their tasks. However, addressing problems in an existing product introduces the challenge of adequately filtering and carefully selecting the most essential changes to minimize the negative impact on existing users, who have developed habits around how they use the app. Both existing and new users needed to be informed about the advanced email features, which provided ways to enhance their email writing experience. 

From a layout perspective, the difference between the interface components in Material Design version 2 and version 3 is not significant. While there are some new additions, such as Segmented Buttons, Navigation Rail, and Bars, the changes are primarily a modernization—a refresh and an update aligned with the direction interface design has taken.

In contrast, the visual style, particularly in terms of color distribution and the indication of primary and secondary actions, differs significantly between the two design systems. As a result, updating existing components did not always make sense. Instead, introducing the Material Design 3 color scheme and components was something I considered a more practical approach.

One notable exception was the existence of several app screens, created long ago, that did not adhere to any Material Design system conventions. A discussion with the engineering team revealed that, in these particular cases, the app was using web views to display content. Therefore, addressing the design of the related functionalities was either very limited in scope or would result in a much larger-scale project. Nevertheless, their improvement was included as part of the redesign project and was intended to open up new possibilities.

The process

Initial efforts focused on collecting quantitative data on feature usage from internal tools (as user interviews or usability testing were not an option), followed by insights about the target audience provided by the User Acquisition team. This approach aimed to ensure that design decisions were data-informed and minimised bias as much as possible, despite evolving requirements and competing priorities.

The core app features hosted on the app's home screen represent the starting point for the most important tasks a user would face when managing multiple email accounts:

  • Access the preferred email account to read or write an email.

  • Switch between email accounts seamlessly.

I have documented the steps in the user flows for completing these tasks with the intent to keep or shorten them, but by no means to introduce changes to the process (at least not without prior usability testing) in order to avoid hurdles and frustrations for existing users accustomed to the way the app works.

Features that were meant to assist and enhance the email experience but were failing to be used include:

  • Location-based reminders

  • Calendar

  • Email Templates

  • Attachments

For a feature to be used, it must first be both useful and usable. By definition, a useful feature is one that allows a user to accomplish a task, and for a feature to be usable, it must do so in a pleasurable, simple, and effective manner. However, even when both criteria are met, failure to discover the feature will result in failure to use it.

Choice of Navigation Pattern

Navigation patterns enable users to move through an application. To ensure the choice of a navigation pattern would accommodate the main user tasks and highlight the existence of additional features without introducing drastic changes, some user habits had to be considered. During the process, I was able to explore the possibilities of new navigation components and gain a better understanding of how to address the feature discoverability issues the app was facing.

A large number of mobile apps use a bottom navigation bar to provide users with a way to switch between equally important app screens. It remains consistent and accommodates 3-5 destinations, making the main features memorable. It is typically paired with a floating action button (FAB) to unfold action available on the screen.

However, in this app, users were accustomed to sequential forward navigation — i.e., moving between screens at consecutive levels. Their most frequent task is to access an email account, read or write an email, and then go back to the home screen using the top app bar and then, access another email account. Therefore, the top app bar, was a familiar way and something the users apparently felt comfortable using (assumption based on retention rates). For this reason, I left it unchanged and instead combined it with the bottom app bar to enhance the available actions on each screen. Bottom app bars bring flexibility to the design, as they can contain both destinations and actions for selected items, making them suitable for context-based tasks in addition to the ones already provided in the top app bar.

The reminders feature, displayed on the app home screen and designed to assist users in creating location-based reminders, was not a screen users could navigate to (i.e., it was not a destination accessible from the navigation). Instead, it was contained in a custom bottom sheet. As a result, it had to be added as an item to the selected navigation component before the introduction of a bottom app bar, as the two components occupied the same screen area.

The plan was to first move the reminders feature to the side navigation and allocate a dedicated screen for it. Existing users would be informed about the change during the app update, with guidance on where the feature had been relocated. Additionally, this approach would draw users' attention to the side navigation and the other rarely used features listed within it.

Removing the side navigation entirely and redistributing the secondary features into a bottom app bar was planned as a second step. The necessity of this step would be re-evaluated after the first step had been implemented. Exposing users to the features in the side navigation could potentially increase their usage. Introducing a bottom app bar in screens with low-usage features is beneficial and poses no risks.

Results and metrics

The implementation of the redesign proposal is yet to be realized. However, the high-fidelity mockups served as a foundation for stakeholder discussions regarding the technical debt accumulated in the app over time. They also provided insights into the scope of anticipated changes, which had not been foreseen prior to this project.

Although I do not have visibility into the final implementation metrics, my contribution ensured that the design adhered to accessibility standards and aligned with the organization's initial goals. It will be exciting to see users' responses to it in the future.

Outcome

The redesign establishes a design foundation for future feature integration while preserving core functionality. Key deliverables included:

  • A comprehensive component library aligned with Material Design 3.

  • A streamlined navigation structure that improves feature discoverability.

Thanks and Credits