Our team have always wanted to find a way to upgrade the usability of emails. By disrupting with the email system, we discovered Trello would be a suitable structure with emails to achieve organisation.

What it does

Born out of necessity, MailMate tackles the mental strain of the overflowing, cluttered inbox dilemma. Now you can visually separate the urgent emails, quickly access the drafts in progress and have a complete overview of the tasks you need to attend to within your inbox. Nothing will be lost in the clutter as MailMate guides you towards a Inbox-Zero goal. Designed with the working professional in mind, MailMate allows users to compartmentalise their inbox into visual customisable swim lanes. Drag and drop between swimlanes to organise the system that makes the most sense to you.

How we built it

MailMate was developed through Firebase and React. The gmail API was utilized in this project to extract the data and core functionality e.g. drafts from the gmail client. UI design was heavily focused on simplicity and professionalism to ensure that the design was sleek and user friendly. It was crucial that we removed the clutter in order to create a streamlined workflow environment.

Challenges we ran into

  • UI/Styling: UI is the main component that displays the organised and clean perspective that users need in an email system. As UI is viewed differently by each individual it was challenging finding the right design, font, colour and size that was favored by everyone. It is also hard to come to an agreement when we, the designers, are critical of our own work causing us to always be dissatisfied with any changes made.
  • In the API team one of the challenges was using promises with the Gmail API to keep the applications state synchronised
  • Working in a team is another challenge that drives the process of the project. Communication and understanding are key factors to working in a team smoothly and thus producing a usable project together. The team went through conflicts that had to be taken care of during the production time.
  • Libraries are a key resource that increases the time needed to spent on other aspects of the project. Our team spent many hours trying to find a suitable library that was easily customisable to reduce the time needed to spend on pre-made components. Due to a limitation of resources that had flexibility in customising, time and pivoting to other libraries wasted time.
  • Identifying a clear user base, as test cases were changed multiple times throughout the Hackathon. Identifying and clarifying the problem that we are working to solve also caused us to shift directions, requiring us to further brainstorm to find the core problem and main idea so that we could then confidently program that.

Accomplishments that we're proud of

  • Producing an application in 24 hours from scratch that is functional and appealing to the eye.
  • Working and collaborating with a group for over 24 hours. In addition through collaboration the use of git and progress meetings were new to those in the team that frequently worked solo. *Training within the team and pair programming that allowed all members to be fully engaged in the development process.

What we learned

  • How to integrate a drag and drop library into our production
  • Effective use of GIT and collaboration tools for software development
  • Learning how to use promises in JavaScript

What's next for MailMate

MailMate plans to add more functionality that will further enhance productivity, these include but not limited to:

  1. Calendar integration with emails and to do list – flexible workflow, with cloud sync
  2. Include templates to emails to improve time management
  3. Corporate features:
    • Adding a filter that encode business rules
    • Single sign on features
    • Company brand
  4. Customizable swim lanes
  5. 3rd party todo integration eg. Google keep /wunderlist/other todo apps
  6. Multiple gmail account integration/email service provider intergration
  7. Mobile app in react native for iOS and Android

Built With

Share this project: