I was the lead User Experience Designer of this project. From the very early sketches to its end high fidelity prototypes. I’ve worked together with the Development Team and the Customer Happiness Team. Furthermore, I talked to users to understand their pain points and goals.
My role Product Design / UX / Visual Design
Ux tools: Analytics, Competitive analysis, Personas, Usability Test, Heuristic Evaluation, Clickable prototype.
Platforms: Desktop, Mobile, Tablet
Date: May 2015 (3 months of development)
Ux tools: Analytics, Competitive analysis, Personas, Usability Test, Heuristic Evaluation, Clickable prototype.
Platforms: Desktop, Mobile, Tablet
Date: May 2015 (3 months of development)
* To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Vivara or any other partners involved in the project.
_____
Challenge
A few weeks before we started this project, we identified—through a series of survey questions during the uninstall process—that the main problem we had was that Mailbird didn’t have a Contact Manager feature that could sync between email accounts.
The main goals of this project were:
➜ Identify and address what users needed in the Contact Manager
➜ Improve the overall retention and usage of the app
➜ Identify and address what users needed in the Contact Manager
➜ Improve the overall retention and usage of the app
Uninstall survey trends for users who uninstall Mailbird.
_____
Discovery
The discovery phase is always the crucial part of every design project. Is only with proper research and reliable data, you can make sure that you’re following the right path and making correct decisions.
Benchmark
I’ve benchmarked other competitors like Window’s Mail, Outlook, AirMail, emClient where the most important of which was Gmail contacts. Primarily because, approximately, 80% of our database uses Gmail. So, it was only natural that we should pay more attention to that provider.
We made an online sheet whereas we listed all the functionalities other competitors has and compared with the ones that we were considering developing. That step was essential to help us, as a team, to define which features would differentiate ourselves from the competitors.
To begin with, I first aim to investigate what current solutions are being used and adopted in the market. For this project, I zoned in what functionalities other Mail clients like Window's Mail and Outlook, to mention a few, have. I then take these inspirations and assemble them into an Invision board to quickly identify patterns and share with the rest of the team.
Listening to our audience
I started investigating our Community page whereas users could request for features. The contact manager was the top requested feature by far with almost 900 upvotes. I carefully read each user comment to identify some similarities. Eventually, some patterns emerged that helped us guide which features could make a difference or not in the project.
Also, I conducted a few user interviews by Skype. Talking directly with the users who had shown interest in this particular feature. Those conversations were essential, so I could truly understand the user needs. Finally, I gathered enough information to report and share with the rest of the team. After a few meetings with the CTO, and developers involved in the project we decided on the prioritization and in which features we should focus firstly to make the project going.
Some user's comments
❝ "Without a proper Contact Manager or Address Book - with all my contacts searchable, editable and sortable (via labels) Mailbird doesn't work for me."
❝ "...CardDAV Support would be appreciated."
❝ "...I would also like to be able to assign thumbnails to each contact."
❝ "We should be able to create Contact Groups and import/export a list of contacts into the desired groups. Also, it would be wonderful to be able to easily send a single email to an entire specified group.
The first version of the contact manager
Usability test with the current version
At this point, we had decided already that we’re going to redesign the whole user interface of the contact manager, but it was important to understand how the users that were currently using the Contact manager were behaving. Therefore, we conducted a few remote usability tests by skype to investigate and evidence what and where we could improve more.
Main takeaways:
⟶ 4/5 The interface was confusing.
⟶ 5/5 Users were not 100% sure about how they could create groups.
⟶ 3/5 Users liked the functionality of linking the Skype ID to open the Skype app.
_____
Experience Design
Flowchart
One of the most significant challenges was defining how the whole thing would sync between different email providers. So in order to brainstorm ideas and to help the entire team stay on the same page, I created a flow chart on how I imagined the backEnd side working. This diagram was the starting point for further designs.
Contact Manager Back End Flow
Sketching
It was about time to get hands dirty and start sketching. That's a fundamental part of the process as it helps me think clearly and generate ideas. I began experimenting with the contact cards page interface, listing all the possible fields to get a broad idea of how complicated a profile could become.
Contact Manager early sketches
User Testing with the Alpha team
One of the good things about having a product that is already on the market is that you have people who love your product and would be glad to help you in anything. Here’s where it comes to the Mailbird Alpha Team. Every time we’re about to release anything new or test any prototype we reach out our Alpha community and ask them to evaluate the project our just share their thoughts.
After developing clickable prototypes, I started testing with Users. I asked them to record themselves while performing an unmoderated usability test. For the most part, the initial design interaction succeeded in fulfilling the design mandates, but there were a few elements that we had to address regarding the onboarding.
Contact manager wireframes
_____
Visual Design
Since Mailbird is a Windows desktop app, it was important to respect some OS guidelines. Patterns like button positioning, common dialogs, and wizards were mandatory for the product to be readily comprehensible by Windows users.
Google's Material Design also significantly influenced our visual decisions. Based on data analysis, we knew that the vast majority of our users come from Gmail, so it made sense to take advantage of some commonly known patterns and visual cues.
Those are a few guidelines that helped us define the visual style:
➜ Clean: We always strive to limit visual elements, avoiding too much clutter.
➜ Neutral: Mailbird is customizable, and the Contact Manager had to reflect that.
➜Respectful: Recognizing and respecting established email use case patterns is a must.
➜ Easy: Using the product needs to be intuitive and effortless.
Contact Manager UI Kit
Screenshots of the High Fidelity Prototype
On boarding walktroughs - Something we had to add after a few usability tests
_____
Results
After launching the new contact manager, we had a +87% boost from active users using the contact manager. Before the launch, only 7.71% were using this feature, and just a month after the launch we reached the peak of 14.46%
+87% of people using the feature among active users
+20,562 of people using CM
Future iterations
In Mailbird we follow a Growth Hacking Process. It's a methodology based on AB testing quick and viable experiments in a weekly basis. At the beginning of each week, we brainstormed assumpted ideas into hypotheses so we could measure their success with quantitative data. Ideally, we try implementing at least 1-2 new weekly experiments. Furthermore, if the idea's premise proves itself correct, we consider it a winner and release it for the whole database. If not, it's learning, and then we iterate the hypothesis further, starting the cycle again. That way, we can quickly test assumptions in a data-driven approach and keep the product growing faster.
