Foxmail for iPad & Mac
Background
Foxmail is one of the most successful email client with over 4 million users worldwide back in 2000. My team was tasked to make the iPad & Mac version for it in collaboration with its funding team based in Guangzhou. We want to make the app not only fast, reliable and easy to use, but also change the way people use mailbox for good. We have interviewed A LOT of users through qualitative & quantitative research and hope to craft the product with its user at heart. Design for different yet overlapping platforms(iOS, OS X) also gave me more insights on how different interactions could affect/benefit users.
ROLE
Interaction Designer & User Researcher
TEAM
User Researcher, UI Designer, Product Manager, Project Manager, Developer
TIME FRAME
6 months
Challenges
User behavior and preference difference between iOS & OS X
Fruit the iPad version of Foxmail with a focus on touch screen.
Competitors(Mail, Yahoo Mail, Google Mail, etc) are way-ahead of us.
We want to re-define how people use email client(if possible) for good.
Process
User Research > Competitor Analysis > Brain Storm > Interaction Design > Prototyping > UI design > Develop Iteration
User Research & Competitor Analysis
I’ve conducted on-site interview and designed questionnaires to help us understand the user behavior and the potential requirements for email client on iPad/Mac. The finding were extremely helpful to generate design ideas and product features. For example, we found out that most user will have difficulties managing their attachments. All of them will have issues with the ever growing inbox. A fast & intuitive way to manage email is most desired on iPad, etc.
Brain Storm & Interaction Design
Bsamiq was preferred for quick wire-framing so we can get the idea well communicated with the rest of the team at & during the discussion.
Load previous emails and exceptions
Proxy sever setup for newly created account
Gmail tag support and use flow
Import & Export emails
Proxy server setup for existing account
Interactions for email client are complex and account specific, user will change across multiple accounts on the fly and the client will need to respond seamlessly.
Email conversation and quick reply
Attachment center interactions
Mail list management
Search and email filter
Accounts and Inboxes management
Important contact management
Important contact management - selection and deletion
The slide-down and vertical interaction & UI also needs to be considered independently for iPad. We’ve explored a lot of options to enhance the user experience by utilizing all the gestures & built-in sensors.
Text only mode & quick reply
Compose email - basic interaction
Compose email - choose contact/group
compose email - insert picture or other files
Group message - select contacts & quick reply
Group message - edit & search
Important contacts - look up & selection
Important contacts - management
We hope to make the email client not just super easy to compose/read, but also a handy assistance that can store and manage voice notes, pictures, videos, etc(As those are the most common attachments in our daily emails).
File center
File center - view and select different files
Notebook - category creation & deletion
Notebook - categorize currently selected email
Notebook - Create new notebook
Notebook - add voice note and search
Client account management
Customize quick access folders
PROTOTYPING
Clickable prototypes were used before some features get into development phrase. They were time consuming to make but could help with A/B test and allowed us to tell which option was better even without formal testing(You instantly know which interaction is better most of the time)
Interactive prototype made with Axure can be exported to ipad for user testing.
UI design
Screenshot of the UI design for the first release on iPad.
Inbox view - folder extended
Client account switch
Hand gesture support slid to delete and manage
Notebook
Refresh Inbox
Inbox quick reply
Client - more options
Inbox - edit selected messages