How can we push the envelope of design for well-explored mobile apps like email clients? What if we introduce the concept of Touch Bar to mobile apps to facilitate single-handed usage? The answers can be found in this Airmail app redesign project. After I decluttered the original design and formed a new user experience language, I added two highly demanded features — Reply Automation & Grammar Check — to the app.
Time & Location
April 2017 @ CCA
Hongru Hou, Jonny Mack (mentor)
User Experience Design
Prototyping & User Testing
Airmail is a powerful cross-platform email client for iOS and MacOS. I have been using the Mac app since its release and felt in love with it since it was the first email client that allows me to assign the various color to different accounts. So, I can tell which account a particular email was sent to while using a unified inbox. Luckily, the iOS app also has the color-coded feature. So, it is natural for me to use the both. Other advantages including a huge amount of customization, integration with other digital services, advanced email client features like Snooze, etc. However, the original visual design felt a bit too chaotic and inconsistent. Parts of the interaction design could also be improved.
- Too many visual distractions (needs more white space for breath)
- Bad typeface choices (low x-height typefaces are hard to read at small sizes)
- Typographical inconsistency (same level titles have different sizes)
- Unprofessional practices (no tracking for small caps)
- Template inconsistency (like different grid, border radius, button styles, etc.)
- User need to choose Reply or Forward after tapping on the Reply icon
- Lacks of undo after discarding an email
- Wired animation easing (demo on the left)
- The logical relationship of different screens are not clearly conveyed (demo on the right)
- Lacks delightfulness
Furthermore, it's nice to have following new features:
- Unsubscribe emails (minimalist lifestyle)
- Grammar check (especially for immigrants)
- Reply automation (Add “Hi xxx” and “Best, xxx” automatically based on users’ habits since repeated actions should be automated)
Two goals of this project were to improve the overall user experience and add new features that people wanted. For the first stage, I would like to solve the existing UI/UX problems and form a refined user experience language that could be used during the second stage — prioritizing and adding people preferred new features (unsubscribe emails, grammar check, reply automation or other features that people wanted).
If I worked on the team, bring the app from current ★★☆☆☆ to ★★★☆☆ in App Store could be one of the measurable goals. Another measurement could be an improvement percentage of how frequent people are sending emails on their phones.
Solving Existing UI/UX Problems
Verifying Assumptions Interview App Store Review Analysis Competitive Research
To verify my design critique, I did two interviews to gain people's opinions on the original app design. App Store is another place where I can find valuable insights from real users' reviews. Competitive research gave me a sense of how others handle the same problem.
Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.
— The Shaker design philosophy
The following image shows the iterative design process of eamil list items, home screen, and detail screen in V1:
Original design vs. V1:
Then, I tested V1 with the same people I interviewed and got following feedback:
Here are the things that I can improve in V2:
- Add avatars to the home screen
- Add thumbnails for attachments
- A light color keyboard
- Add texts underneath the icons in Adaptive Bar
- Add "Bold" to Adaptive Bar on the drafting screen
- Replace the arrow icons with a home icon
The following image shows the iteration of email list items, home screen, and detail screen in V2:
V1 vs. V2:
Prioritize New Features
Which feature(s) should we add (first)?
- Unsubscribe emails?
- Grammar check?
- Reply automation?
- Other features that people may wanted?
Although people did come up with new features like "Desktop Preview", they still chose Replay Automation and Grammar Check as their top two most wanted features after I showed them the features I though could be differentiators.
Feature #1: Reply Automation
Feature #2: Grammar Check
Two user flows with different pros and cons were created for the Grammar Check feature: User Flow A checks and shows grammar errors while people are composing the email. People have the freedom to handle the errors immediately or after finishing the entire email. User Flow B also checks the grammar on the fly but only shows error(s) after people tapping on “Send” button. So, it doesn’t disrupt users while they are writing the email.
3 out of 3 people preferred user flow A during the A/B testing, but all of them pressed on the orange block rather than the “Accept” button when correcting the grammar error. Therefore, I need to redesign the option selector.
Another improvement was made for the undo function. It was not honest to say "the email has been sent" because technically it was just saved locally and then sent if the user navigated to other screens. So, I came up another version that said “Email will be sent in 5s” and the time changes to 4s, 3s, … and then sent the email. During this short period, people have the opportunity to edit again or send immediately. They should be able to customize the duration or turn this feature off in the setting.
In V6, users will be navigated back to home screen upon pressing "Send", thus removing the need for an additional tap (the credit of this optimization goes to Jonny, thank you Jonny!).