A journey of improvement: Mailmodo’s home tab experience redesign case study

This project was undertaken as the 10kdesigners’ capstone project assigned by Mailmodo focusing on the task of designing an engaging home tab experience for both new and existing users.

Before we proceed, let me provide a quick overview of Mailmodo.

Mailmodo, a SaaS platform, is on a mission to disrupt email marketing by bringing interactivity and intelligence right inside the emails. Mailmodo provides a no-code platform for marketers to increase their email conversion rate by letting them convert their emails into apps using forms, surveys, calendars, shopping carts, and more.

Now, let me outline the problem description and scope provided by Mailmodo.

🗨 Problem description

The current home tab experience lacks the user-friendliness required to effectively educate users, encourage user adoption, and provide contextually relevant information. Users frequently encounter difficulties in locating essential information promptly, resulting in a less than optimal user experience. Furthermore, we face challenges in effectively communicating new features and announcements, resulting in under utilisation of our tool’s capabilities.

🎯 Scope

Design an engaging home tab experience that acts as a hub for all the product capabilities or features. This redesign should not only focus on improving the user’s ability to quickly grasp essential information but also provide a platform for the seamless promotion of new features and announcements. By doing so, we intend to enhance user education, increase user adoption, and facilitate the discovery and utilization of critical features.

Definition of new and existing users in Mailmodo:

Timeline- 2 weeks

In case, you are in a hurry and not interested to read, then you can watch the loom video. 👇

Loom video of Mailmodo capstone project

💡Exploring the problem

To start with the process, I have few questions in mind🤔:

1. What are the primary task user perform on the homepage tab?
2. What challenges or difficulties does users encounter on the homepage tab?
3. Are there any specific features users are unable to find?

💬 Response provided by the Mailmodo Point of Contact (POC) for the capstone project:

1. Our current home tab, as you might have checked, is from an onboarding lens and user interaction drops 👎 after they are done with the onboarding ☑☑☑ checklist.
2. We, ideally, want to change that and make Home tab kind of a central hub 🖥 for everything that they need to quickly access.
3. We would like to keep it open ended for you so that you can gather some insight and decide what might be best to be showcased 🚀 there.
4. Our primary goal 🎯 is to asses how you approach the given problem. We have tried to give you a direction in the problem statement.

So, based on this, I have first created an account in Mailmodo and explored how the home tab currently looks like and what options are available for new users. Since, I am a new user for Mailmodo, so I have received a screenshot of the existing user of Mailmodo reference.

Homepage tab of a new and existing user of Mailmodo

🕹Competitive analysis

I have conducted a competitive analysis of Mailmodo, which involved creating new accounts with other competitors in the market like MailerLite, Brevo, Active Campaigns, Constant Contact, Sendgrid, klaviyo. Following that, I have gathered screenshots of their home tab for reference.

Competitive analysis

From the competitive analysis, I have tried to understand what all metrics and how the data is shown for the new user in other SaaS products.

Since, for this project, the goal was to consider :

1. User education
2. Feature discoverability/adoption
3. Contextually useful information
4. Referral and reviews

So, I have basically, tries to understand what all widgets are/can be included in the dashboard. To be more clear on these, I have then started mood boarding so that it helps me to get more ideas how a SaaS dashboard looks like.

After completing the moodboarding process, I felt it was time to grasp a deeper understanding of the product. Utilising the onboarding kit received via email, especially during the creation of a new user, provided me with fundamental insights.

🕸️ Information Architecture/ Wireframe

Upon reviewing the onboarding kit, I endeavored to structure the information. This process led to the development of an information architecture, followed by the creation of a wireframe.

💫Visual Design

The design system of Mailmodo is shared by the POC of Mailmodo team and considering those, I have created few iterations of the widgets and screens.

Iteration of widgets

So, finally, I came up with the new and existing user view of the home tab.

Re-designed homepage tab for a new user

Re-designed homepage tab for an existing user

Here is the prototype of the Mailmodo dashboard after redesigning the experience:

Prototype of the Mailmodo home tab for both new and existing users

📗Key learnings and takeways

For the first time, I have re-designed a SaaS dashboard and few of my learnings during this project are:

1. User-centric design application.
2. Developed an appreciation for Mailmodo’s unique design language after understanding the product and its features.
3. Emphasized the value of thinking from a user’s perspective in design decisions.
4. Discovered unforeseen abilities for self-reflection and navigating through various iterations.

✉ That’s a wrap!

Wrapping up this design journey! I trust you’ve enjoyed delving into the intricacies of this case study as much as I relished crafting it. Your time and patience are sincerely valued.

Any thoughts? I’m eager to hear your insights! Share your feedback in the comments, and I’ll incorporate it into future iterations.

Let’s connect on LinkedIn or Twitter. I’m enthusiastic about contributing to impactful designs!

Feel free to explore my portfolio for a closer look at my projects.

If you liked what you read, feel free to show your appreciation by clapping 👏 (PS: On Medium, you can give up to 50 claps by long-holding the button).