Automail

Introduction

AutoMail is a desktop application designed to improve efficiency by automating email processes for recruitment and marketing tasks. Our tool connects and pulls data from Airtable, allowing the conversion of stored information into selectable recipients within the platform. From there, the user will be able to send emails to any list size, select multiple recipients, and apply custom templates effortlessly.

The Team

Leads

Caitlyn Ho — Project Manager

Calvin Chen — Project Mentor

Designers

Grace Asuncion

Jasline Dimapilis

Saniya Kotwal

Developers

Priyal Patel

Youssef Qteishat

Megan Nguyen

Aaryan Mohta

Eric Wang

The TimeFrame

Oct 2023 — Jun 2024 | 22 weeks

Tools

Figma, TypeScript, MongoDB, Tailwind CSS, Airtable API, Gmail API, Nodemailer, NEXT.js, GitHub

The Project

CodeLab faces a challenge where although using MailChimp has been effective in delivering emails using customized templates, CodeLab has outgrown the free version due to an expanding email list. Because of this, CodeLab is now seeking an alternative solution with greater flexibility to continue personalized email campaigns without additional costs.

The Design

Previously…

At the end of winter quarter, we had finished high-fidelity designs for the Automated Email Tool. However, we believed that our design did not accurately represent our product as it was a developer-focused product that did not have as much creativity as the original Mailchimp-inspired design. We decided to create a cleaner, simpler interface, keeping the original functionality.

Mid-Fi’s

In our Mid-Fi designs, we focused on a clean and minimalist interface to streamline the user’s interaction with the tool. We settled on the name "AutoMail" because we felt it encapsulated the core functionality of our project—automated email sending. To enhance the user experience, we incorporated a sidebar navigation system, allowing users to easily navigate through different pages of the application.

Hi-Fi’s

In our Hi-Fi designs, we continued to focus on creating a sleek and developer-friendly interface for AutoMail, ensuring it aligns with our target user base. From there, we implemented and experimented with colors and icons to enhance the visual appeal and usability of the interface. We chose a cohesive color palette that provided a professional look, while also ensuring that the icons conveyed their respective functions.

Development

AutoMail Flow

Airtable integration

To get recipient data, we use Airtable API to fetch Codelab’s existing applicant data. Each recipient must have an email, and additional fields such as name, cohort, and team are stored as fields. After we fetch the data using Airtable API, we make sure that all data is consistently and efficiently stored in our database by formatting it. The groups are made on Airtable itself, but a potential future improvement involves allowing users to make their own groups on the website.

Gmail Integration

To send emails on behalf of our registered gmail accounts, we use third party passwords. Using Nodemailer, we create a transporter object that utilizes SMTP to send an email object to the gmail server. Once an email is sent, we either receive a confirm message or error message that we hope to display in pop-up to the user.

Sending An Email

Data Objects

The developers spent a large part of Fall and Winter quarter discussing how to organize information AutoMail could receive from a user and Airtable. We chose to organize the information involved in sending an email into three main data objects: Recipients, Selections, and Templates.

A recipient is used to store each person’s unique information that we received from Airtable. Since recipient will have an email, we made this a required component and added the ability to store additional information as optional fields.

A selection is used to group recipients together, store any common field_ids that these recipients share, and identify a grouping from a unique name. All the recipients are displayed on the contacts page, and all the selections are on the contact groups page. Although a user cannot edit the recipients directly, we have added a feature of syncing with Airtable when necessary to ensure consistency between Airtable and our database.

A template is used to store and pass information about an email between different pop-ups and is used to instantiate the email object that will be sent to the gmail server. Each template will have a unique name. To display the correct card on the drafts & template pages, we check the isHtml and isDraft values. When opening a draft or template, we used the subject, content, and groups fields to automatically fill these values in the Edit Html or Edit Email pop-ups.

Types of Emails

The developers choose to provide functionality for sending an email with a text body (”basic email”) or an email with an HTML body (” HTML email”).

For both types of emails, we prioritized the ability to add parameters, which are field_ids that the selections checked have in common.

These parameters when clicked will add a placeholder ${this.(field_id)} and will be filled before sending with information specific to each recipient. For example, the Name field_id would be replaced with the name of each person the email is being sent to. To avoid recipients that appear in multiple selections receiving duplicate emails, we have an additional parsing step to filter out these duplicate objects.

HTML Email Templates

The developers created an upload HTML feature for users to store any prewritten code to later edit and send to recipients.

If a user wanted to save this code and any file attachments, then they could save this information as a template.

Once a user edits the template, if they decide they want to keep editing this email, then they can save it as a draft.

Additional Features for Editing HTML Emails

We wanted a user to be able to write and preview the rendered HTML code. Also, a user is able to see the file and image attachments uploaded below the html editor; for images there is a + icon to embed images within the html code body as well.

Challenges

For the duration of our project, we faced a few challenges. First, our team had limited knowledge of the necessary tech stack, which required additional time for learning and adaptation. Secondly, we were working under strict time constraints, which put pressure on our ability to thoroughly develop and test the system. Lastly, we had to prioritize key functionalities to ensure the most critical aspects of the project were completed within the given timeframe.

Takeaways

Despite these challenges, we managed to persevere and discover the most effective strategies for our team’s strengths and needs. Throughout this journey, we learned the importance of maintaining consistent and clear communication. This ensured everyone was on the same page, eliminating confusion and enabling seamless operations. Our efforts paid off as we reached several significant milestones, the most notable being the successful mass sending of our first email.

One particular thing the developers wish they had spent more time on is testing. Currently, the product has features that haven’t been tested properly using edge cases. When dealing with APIs, our goal was to ensure that all possible errors are handled and communicated with the user efficiently, which we were not able to achieve in the given time frame.

As we move forward, our attention turns to implementing exciting new features: implementing scheduled sending, enabling direct emailing through our platform, and creating groups from within our application. These additional features will streamline our communication processes and elevate user experience.

Conclusion

Thank you to CodeLab for giving us such a great opportunity to learn and build our tool! It’s been an incredible journey for us, and we are excited to see the board experience the impact of our tool firsthand.