courier_notif.gif

Courier

 

Courier - Product Design

We spend too much time thumbing through our emails - Courier allows you to read less emails.

Download the Courier App 👇🏾

courier_logo.gif

About Courier

Courier uses summarization technology to make reading your emails easier. Courier uses Machine Learning to summarize your emails into a few sentences, so that you can read what's important without having to open every single email message. It also categorizes emails into emoji categories, so that you will also know which type of message you are receiving (whether bot mail or alerts). With summarized emails, users are able to read their messages from the comfort of their inbox (and not having to open the email).

courier_screens2x.jpg

My role

I worked as the lead product designer for the team behind the app, Codeq. I joined the team after the initial idea and screens for the app were laid out. I have since contributed to the overall design of the app, improving the current design, adding new features and listening to user feedback for the app. I have also been responsible for creating designs for some of the marketing material and other digital media assets for Courier (including the website & Product Hunt pages). Since joining the team, I have worked on the app from getting it prepared for beta testing to deploying to the iOS App Store.

For this product, I worked as the sole designer - working alongside the rest of the product team. This team includes a few developers and a product manager. I collaborated with the team for ideation, mockups, prototyping, user testing, user flows, visual design and implementation. I worked a lot with my product manager to make sure that design goals and objectives were met within each design sprint. I also collaborated closely with my developers to ensure that most designs made sense both functionally and visually. One thing that I learned, especially working with an email app, is that there is a lot that happens in the backend. This allowed me to have a better understanding of limitations and restrictions with some of my designs, as well as to better understand implementation.

Courier Features

emoji_cats.jpg

Emoji Categorization

One thing that sets Courier apart from other email apps is the fact that our summarization technology places your messages into emoji categories. Each category let’s the user know what type of message they are looking at without having to read the message. I helped to define the design for the emoji categories in the inbox view.

task_detection.gif

Task detection

Our summarization technology (using Machine Learning) can also create tasks for you based on the type of message that is received. This task is shown as a card that can be expanded to show more details about the task.

Compose bar

The compose bar was a new feature we wanted to add to Courier. Originally, the user would select the ‘Compose New’ button, which would allow them to compose a new email message. The problem we wanted to solve was to allow users to be able to compose a new message or reply to a message from any screen within the app. From the inbox screen, the compose bar would allow the user to compose a new message. If the user opened an existing message thread, the compose bar then turns into a reply bar. The new design would all the compose bar to expanded and collapsed as well. Inspiration for the new compose bar is similar to the bottom sheet that’s native to iOS, but also sort of similar to how Slack (mobile) allows users to expand the message field. I wanted to bring that experience to the world of email. Users would be able to expand the compose bar to bring up full compose, allowing them to add recipients and a subject as you would when composing a new email.

We went through a few design rounds before coming to a final decision. I was unable to gather a bigger pool of users (for testing out the new compose bar), so I had to improvise for user testing. I basically grabbed the nearest users I could find to help test prototypes that I came up with for the compose bar - this included random people that were sitting near me at a coworking space, other designers and developers that are within my immediate circle, even my girlfriend popped in a few times to give feedback (❤️😁). This helped me to figure out different problems with the compose bar. One of the main problems was with adding new recipients and a subject to new emails. The solution was to allow users to be able to add recipients and a subject only when they were in full compose mode. When a user had the compose bar collapsed, they would be able to compose the message portion of the email (also being able to include attachments).

compose bar01.jpg

New Header Navigation

As Courier began to grow, so did the need (and request) for more features. After talking with different users and testers of the app, one problem that needed to be addressed was the need for multiple Gmail accounts and a way to switch between those accounts. The solution was to create an entirely new layout for our header navigation. The new header navigation needed to allow users to sort their email by emoji categorizations, sort their mailbox type, access current signed-in email settings and to switch between Gmail accounts.

I started out looking for inspiration for different ways to layout the header navigation, then I looked to figure out how other email apps allowed their users to switch between multiple accounts. Most email apps hid their accounts within the [hamburger] menu and a lot were switching to the large title style found inside of Apple’s iOS. Our stakeholders wanted a way to integrate the large titles without compromising our current offering.

During the exploration phase - I noticed that a lot of email apps hide the search bar after a user scrolls through emails. This can be problematic - after observing the way some users interact with their email, I noticed that users would often want to search for email after not finding what they were looking for. This led to frustration because they had to scroll back to the top to be able to search. This resulted in a new way of approaching our new header navigation design.

The solution that we came up with involved combining the emoji categorization filter and the mailbox filter into one button. The next step was to move the account profile image to the left side - this new profile image would allow users to switch between accounts. The final change was to add the search icon to the right side of the navigation bar - allowing users to be able to search their mail any time without the search field disappearing. The new design was well received from current users and user testing showed that users appreciated the simplicity of being able to switch between accounts.

header nav01.jpg

Courier website

I also designed the new single-page website for Courier. The objectives for the new website were to be attention catching, quick and easy to browse, but also to let users know what Courier is able to do for them. The website explains more about Courier and highlights a few of the top features that set Courier apart from other email apps. The website design is meant to be clean, simple and user friendly.

One of the main problems that was observed with the previous website is the time it took users to explore the website in its entirety. Through insights, we determined that most users spent a few seconds scrolling the main page before dropping off. Most of them never reached the other pages within the website, which explained more about the need for Courier and how our Machine Learning Technology enables some of the unique features of Courier.

The solution that we came up with was to condense the multi-page website into a single-page website that could highlight the main features of Courier that would allow for quick navigation. The new website includes a short video about Courier and then three main features of Courier. The new website had much better user retention, allowing for users to take in a majority of the material before deciding to click the link to download the app or to leave the website. We noticed that it also led to a slight increase in the number of downloads we received for the app.

courier_web_01.jpg
 
 
courier_web.gif
courier_mobile2.jpg