Mailbutler

Mailbutler is an email extension that adds awesome features to Outlook, Gmail, or Apple Mail inbox.

Product: Mailbutler

Role: UX UI Designer

Team: CTO, Product Owner, Frontend and Backend developers.

Illustrations: Anna Johnsson

Time: First iteration 8 weeks. Next iterations 4 - 6 weeks

Design Challenge: How might we integrate all external product parts inside the email provider extension?

Context:

Mailbutler is an email extension. Its main interface is a sidebar added to the email provider after installation. As a first project, I was asked to rethink the architecture of the product integrating inside each email provider (Outlook, Gmail, & Apple Mail) modules that were externally placed. One of these modules was the account and configuration pages (which were previously shown on a web browser) and other pages with useful information for the user (which were placed on the toolbar on macOS). Now these modules are consolidated and accessible in one place.

Requirements:

Information Architecture: Integrate external modules inside the mail providers
Re-design of components and creation of non existing ones.
Build a Design System in Figma taking as a base an Adobe XD one and the existing implementation. that would ensure consistency across the product. (Covered in another case study)
Re-design of pages inside the product and their content.

Before

😔 Account and settings pages hosted on the browser

😔 Dashboard pages outside the email provider and only available on mac.

😔 Accesibility & inconsistencies issues

😔 Architecture needed improvements

After

🙂 Everything is placed right in the inbox

🙂 Design system implemented

🙂 Consistency and accesibility improved

🙂 Gradients removed and page redesigned

🙂 Clear architecture

Final outcome

Process

Multiple Diamond. Yes! A double diamond is never enough ;)

Discover:
To better understand the user's needs and the product, and to identify opportunities and challenges. I followed a few steps:

Firstly, I took inventory of the current state of the product by identifying/organizing pages to integrate and roughly listed improvements that could be made.
Next, I conducted a heuristic evaluation to detect any existing issues and find ways to address them. I provided a report on the usability status of the product. Which helped me to propose a plan of action.
Finally, I empathize with users and stakeholders by conducting interviews to discover their ideas, pain points, and opportunities. I also contacted customer service and considered viable requests from users on our feature requests platform.

After collecting all the necessary information, I compiled a list of requirements based on the jobs to be done. Then A list of the issues to be solved. Additionally, I considered the deliverables that would be provided to the developers.

Through analyzing the research findings, I gained a better understanding of the users' needs and the product requirements.
By identifying the jobs to be done, I was able to establish user flows and collaborate with the team to plan the MVP and its subsequent iterations.
Through internal card sorting and user feedback, I proposed a new information architecture based on the inventory.

Main findings:

40% of the users interviewed, have difficulties finding the account and settings pages.
55% did not know that the product has more features outside the email provider.
Users prefer to access all necessary information within their email provider without the need to use additional tools outside their inbox.
The majority of the users would like to have a simple overview of their to-dos and all email-related activity.
Users would like to easily filter, search, and find the information they need within their inbox.
Users prefer to manage their account and settings directly within the email provider.
Stakeholders do not want to use a browser to host tools belonging to the product.
The heuristic evaluation showed many usability issues and UI, accessibility issues too. There was a clear architecture and division of the content set.

Jobs to be done

When opening my email inbox, I want to be able to see at a glance how many of my emails have been opened by their recipients, so I can know with whom to follow up.
When starting my day by opening my inbox, I want to have an overview of my upcoming and overdue to-dos, so I can plan my day accordingly.
When using Mailbutler, I want to be able to find all settings right in my email, so I can configure my preferences at ease.
When checking my emails, I want to be able to filter them, so I can find the emails I'm looking for faster.
When trying to find a specific email containing specific keywords, I want to be able to perform a search directly in my inbox, so I can see a list of matching items.

A few planning sessions with stakeholders, product owners and developers were necessary to define the MVP and next iterations. By identifying what was a “want” and was a “need” based on the JTBDs we were able to make decisions.

A dashboard with 5 tabs
A home page with an activity feed
Redesign of all tabs.
All account and config pages placed internally in a modal.

Iteration 1
2 Widgets to be placed in the home page.
Improvements in the filters.

Iteration 2
New widget.
Re-design of notes and tasks.
General improvements based on user feedback.
Introducing automations

Iteration 3
Global search.
General improvements based on user feedback.

Iteration 4
Accessibility issues solved and dark mode crafted/improved.
General improvements based on user feedback.

Information architecture

I proposed different ways to add the dashboard with its tabs to the Product sidebar right inside the email provider. The most suitable was chosen which had a FAB at the center bottom of the sidebar. In a further iteration based on user feedback, we changed its position to the top-left.

Wireframes

Mockups

The home page was delivered only with an activity feed. The widgets showing essential info to the users, were made in the next iterations. Usability testing was involved in 3 main steps during the process and in the next iterations too.

Specs and guidelines for devs

I normally like delivering designs well explained to devs, Figma now has more and more features to make this process lighter and faster but I still like giving them a little bit of extra info, so they implement smoothly. I normally like testing PR during implementation and giving feedback before a final approval from the team.

In further iterations we worked on the widgets for the home page of the dashboard, After using testing we simplified the whole homepage. We also re-designed notes and tasks, we introduced automations, and improved the dark mode by introducing tokens to our design system. And we also did lots of general improvements based on user feedback (a sneak peek of usability testing can be seen below).

Usability testing

Usability testing was performed to know how useful the widget proposed in the home page would be, how easy the user would adopt them. The results drove us to the conclusion to simplify the home page and eliminate one of the widget proposed. I also show us the benefit of adding a feature that would allow users to collapse and expand the widgets so they could focus on the most important info for them. Filters were also introduced in the activity feed.

Final widget designs

Outcome

Over 7.000 users use the product regulary. Over 600 daily users benefit from the dashboard. Feedback from them is received on regular basis, including suggestions for improvements and positive comments about the product.