Revamped Emailer provided better communications and design aesthetics
Project Overview:
mPokket is a leading money lending app in the fintech industry for the youth and employed professionals of India. To create a better experience and tracking mechanism for product & marketing campaigns. Currently we have 46 emailers from the product side which includes the subjects lines from the modules like Onboarding, OTP, Recovery, etc
Client
mPokket - Product
Year
2022
Category
Product
Communications
Type of Work
UX Research
Product Design Owning
UI/UX Design
Development
My Role
As an UI/UX Manager, I headed the user research and competitive analysis, wireframes and development of HTML structure. As a team I was responsible to validate the scalability of the UI, use-cases and raw HTMLs in a 12-week sprint.
Objective:
To get more interactions and track the components of the emailer.
To do:
Restructure of the emailer in terms of Design, Development(Coding), Copy, Interactive.
Design Process:
7-Stage Design thinking model has been used. The stages of this Design Thinking process are as follows:
-
Empathize
-
Define
-
Ideate
-
Prototype
-
Development
-
Test
-
Tracking A/B test and Campaign growth
Design Toolkit:
-
Adobe Illustrator
-
Adobe XD
-
Dreamweiver
-
Sublime
-
Moengage and mCRM for tracking
User Research:
Research Strategy
The first thing we focused on was our research strategy. In order to identify how the user currently is interacting with the existing emailer structure. There were several glitches in HTML coding structure and design consistency. Our main motives was to revamp the emailer designs, HTML structure, UI consistency, Copy and the size of the actual raw HTML.
Also we conduct a competitor analysis. Aside from using and understanding the pain-points of the user, this also gave us an insight in the market space and provided additional context for the engagement we are working on. We conducted our interviews in a consistent and controlled manner based on the interview guide in preparation for Usability Testing.
Competitor Analysis:
Considering that the app is for Indian youth and young professionals, we researched fintech apps and also trendy designs. I’ve also done POC on the betterment of the emails in future via API integrations in order to explore these features, design and experience. We focused our research on User Interface elements and User Experience Flows through better copy and UI. In conducting our user research, we interviewed several users based on their pain-points between the ages of 18–30.
Development process and guidelines:
HTML File Size
HTML file size is the size of the .html file that is actually sent. This file size does not include the size of the included images, as these would be linked from this html file and downloaded when opened.
The maximum size recommended is 100KB, as anything over can lead to deliverability and display issues. For example, Gmail will clip the html at 102KB. Clipping will hide the end of the email and can break the layout.
Most emails should easily come in under 50KB. However, sometimes complex progressive enhancements or a large amount of campaign content results in a larger file size. If this happens there are a number of ways to help reduce the size of your HTML file.
-
Clean your code. Email is constantly changing and we see a lot of templates with outdated code in them. A quick clean up can save a few KBs.
-
Don’t over code. Some templates we see have extra code that simply isn’t needed. The worst offender is adding additional table elements. Most layouts can be achieved with 5-10 tables, but we often see code with 30-40 tables. Fewer tables also has the added benefit of making your code easier to read.
-
Move some code from HTML to CSS. It’s not yet safe to move all your styles to CSS, but if done correctly moving some inline styles to embedded styles can help reduce code.
-
Simplify your design. Another option is to go back to the design stage. Single column emails use a lot less code.
-
Minify your code. Minifying code will remove unnecessary spaces and comments. This can have a huge effect but be careful as many ESPs enforce a maximum line length that could force a new line and break the code.
External Assets Size
External asset size is the size of all your images and external style sheets. Since external sizes are rare, we’ll focus more on images for now.If we use background images and media queries then it’s possible in
certain environments not everything will be downloaded for every user. But, remember even if you define display:none; on an <img> element, it will still download. There is currently no way of stopping this.
The maximum size for most images is 100KB, but if you have one large high res image or an animated gif that could go up to 500KB. However, it’s more about the total size, which we’ll cover in the full loaded email size section.
