Automated Email Tool
2023–2024 Yearlong Spark Project Update
Introduction
Automated Email Tool is a user-friendly marketing automation platform dedicated to sending personalized emails to marketing recipients without any limitations on list size. 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
Calvin Chen — Project Mentor
Caitlyn Ho — Project Manager
Eric Xu — Developer
Aaryan Mohta — Developer
Megan Nguyen — Developer
Priyal Patel — Developer
Youssef Qteishat — Developer
Saniya Kotwal — Designer
Jasline Dimapilis — Designer
Grace Asuncion — Designer
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.
Design
User Research
Our team conducted two different methods of research: user surveys and an extensive interview with a stakeholder. In our survey, we had 10 participants who took 3 survey possible pathways with either prior experience with Mailchimp, other automated services, and/or sending mass emails. We received insights on their views of important factors of emails, their motivations, and any notable pain points.
Our second method of research, was a 30-minute interview with our stakeholder and main user of our Automated Email Tool, Caden Newton, the president of CodeLab. During this interview, Caden gave us insights into the complex recruitment process, including actions, emotions, and thoughts associated. He mainly touched on the role of Airtable in CodeLab and how we might incorporate it into our product.
Pain Points
Following our preliminary research, the design team tackled significant issues related to sending mass emails. Notably, there were key pain points identified concerning the use of Codelab, which exceeded the free Mailchimp mailing list size limit. Additionally, Mailchimp was found to be cluttered and challenging to navigate. Furthermore, the existing communication method lacked the capability to personalize content for each recipient systematically and schedule email dispatch. Moreover, users faced limitations in collaborating and delegating mailing tasks. Overall, the process of organizing mailing lists between Airtable and the mailing system proved to be excessively tedious and time-consuming.
Low-Fidelity
After concluding the findings from the design team’s user research, each designer on the team created their low-fidelity designs. The design team then met up and discussed what they each liked about their designs to further implement their mid-fidelity designs.
Mid-Fidelity
After creating our individual low-fidelity sketches, the design team collaborated on what features we wanted to include in our mid-fi designs. We discussed when to use cards and tables, what to include in the sidebar, and how each page should be formatted overall.
Upon reviewing the mid-fidelity wireframes, the design team identified a deficiency in the frames necessary to fulfill the user journeys for the complete prototype. This led to several revisions of the mid-fidelity designs by the design team.
Log-In/Sign-Up
Templates
Mailing List
Moving onto the iteration process, our design team ideated on what colors and fonts to include in our mid/high-fidelity models. We ultimately decided to build off of Codelab’s existing design system and create new components and features in our final designs. We iterated on different versions of each page and created plans for the high-fidelity designs.
Looking forward, we hope to finalize our hi-fi designs and start prototyping on fully functional designed pages.
Development
Authentication
Our application intends to access user information by logging into Airtable and utilizing the Gmail API for sending emails. Authentication is a crucial step for both of these tasks, and we adhere to the standard protocol of Open Authentication (OAuth 2.0). OAuth provides us with unique tokens, allowing the service to access user data securely and without compromising security. For instance, OAuth enables us to securely log in to Airtable from our application, obtaining the necessary data for sending emails via API calls. Additionally, OAuth holds the potential to facilitate diverse sign-in options in the later stages of our project, including platforms like Gmail and Github.
Obtaining and Syncing Data
Utilizing the Airtable API, our application initiates API calls to retrieve data from Airtable. Subsequently, the app formats the acquired data and inserts it into our database. To ensure real-time updates, we configure webhooks in Airtable, instructing it to notify our application of any changes to the data. Upon receiving these notifications, our app seamlessly updates the corresponding information in our database.
Sending an Email
After conducting research on various email delivery services, we found that Nodemailer and the Gmail API were the most suitable for this project.
- Gmail API: Given that the emails will be sent from our official Gmail and other affiliated accounts, we will be using Gmail API to authenticate the Nodemailer transporter using the Authentication Credentials from our Google Cloud Workspace.
- Nodemailer: Node.js module for sending emails. It will allow users to create and send HTML emails with embedded images and attachments to multiple recipients. This will be paired with our recipient database to send large-scale marketing and recruitment emails.
Takeaways & Challenges
Technical Challenges
If you utilize a free Gmail account, there is a constraint on sending a maximum of 500 emails within a 24-hour timeframe. In response to this limitation, we opted to leverage multiple distinct email accounts. Perfecting the schema for recipients posed challenges, given the varied levels of organization we sought for our groups. Ultimately, we revised our initial concept of having diverse group types and settled on a singular category named “selection.” To facilitate user selection of recipient groups, we employ a designated selection field for creating these groups.
Takeaway
Throughout this experience, our team achieved several milestones, ranging from API Integration and UX Research to refining mid-fi designs. Our biggest takeaway was learning the importance of consistent communication between the team members. This ensured that we were all on the same page, eliminating confusion and enabling seamless operations.
As we move forward, our attention turns to launching our initial mass email campaigns utilizing Gmail API and Nodemailer. Simultaneously, we are in the process of finalizing our Hi-Fi designs and prototypes.
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.
