- Splash Screen
- Mailbox Menu
- Blank States
- Misc UI
Help Scout takes advantage of typefaces native to iOS
- iOS 9 and above - SF UI Display for titles, and SF UI Text for body (automatically adjusted based on font sizing)
- iOS 8 - Helvetica Neue
The splash screen allows you to login with your Help Scout username and password, or via google sign in.
The Mailbox Overview Menu is, an overview of all your inboxes. It also features search, direct contact to HS support, logged in user information and the ability to log out of the app, returning you to the splash screen.
Mailboxes have two states
Returning to the mailbox presents it in a drawer fashion:
Upon selecting a mailbox, the default view is of unassigned conversations
There are seven possible states for a conversation list item:
- Active Conversation:
- Inactive/Pending Conversation:
- Focus State:
- Bulk Select:
- Active Bulk Select:
- Conversation is being viewed by another user:
- Conversation is being replied to by another user:
Swiping from the right allows for quick close of a conversation list item
- Close not yet activated
- Close activated
The mailbox menu provides access to different areas of a specific mailbox, counts of messages in each area, and an overview of team and custom folders.
Menu items can have three different states
- Focused (Current view):
The conversation screen consists of header and footer navigation components, conversation overview information, and a variable amount of thread components.
Conversation overview contains the conversation number, status, conversation title, and any possible tags assigned. It can also contain several different states
Realtime updates are also displayed in the conversation header
- Users viewing conversation
- Users replying to conversations
Thread items come in different forms
- User messages:
- Conversation notes:
- Customer messages:
- Thread updates:
Replies & Notes
From the conversation view you can access adding replies to the customer, or notes (internal messages) to your conversation thread.
Both views feature the same patterns
- Navigation - with return to previous screen or sending/adding note functionality
- Footer - for accessing keyboard or tags
- Expanded footer - allowing for keyboard minimization
Assigning users to a conversation can be through the header navigation, bringing up the assign view. Users can be specified through the search input.
Tags can be created or added through the search input. Assigned tags are removed from the list view and added to the input for quick removal.
Blank states add delight to screens that contain minimal to no information
The app takes advantage of default iOS views
The iPad app features the same components as the iPhone app, with adjustments made for width and height. The expanded width of the viewport allows for dual display of views, such as the mailbox menu and a conversation simultaneously.
- Mailbox List and Conversation - landscape view:
- Mailbox Menu and Conversation - landscape view:
- Mailbox Menu and Conversation - portrait view: