• iOS

Components

Contents

Typography

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

Splash Screen

The splash screen allows you to login with your Help Scout username and password, or via google sign in.

Splash Screen


Mailbox

Overview Menu

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.

Main Menu

Mailboxes have two states

  • Default:

Mailbox - default

  • Active:

Mailbox - active

Returning to the mailbox presents it in a drawer fashion:

Mailbox - return menu


List View

Upon selecting a mailbox, the default view is of unassigned conversations

Mailbox List Overview

There are seven possible states for a conversation list item:

  • Active Conversation:

Active Conversation

  • Inactive/Pending Conversation:

Inactive Conversation

  • Focus State:

Focus state

  • Bulk Select:

Bulk Select

  • Active Bulk Select:

Active Bulk Select

  • Conversation is being viewed by another user:

Viewing Conversation

  • Conversation is being replied to by another user:

Replying to Conversation

Swiping from the right allows for quick close of a conversation list item

  • Close not yet activated

Swipe close - inactive

  • Close activated

Swipe close - active


Mailbox Menu

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.

Mailbox Menu

Menu items can have three different states

  • Focused (Current view):

Focus

  • Active:

Active

  • Inactive:

Inactive


Conversation

Components

The conversation screen consists of header and footer navigation components, conversation overview information, and a variable amount of thread components.

Conversation

Conversation overview contains the conversation number, status, conversation title, and any possible tags assigned. It can also contain several different states

Conversation title

Realtime updates are also displayed in the conversation header

  • Users viewing conversation

Viewing Conversation

  • Users replying to conversations

Replying to Conv

Thread items come in different forms

  • User messages:

Conversation User message thread

  • Conversation notes:

Conversation Note thread

  • Customer messages:

Conversation Customer thread

  • Thread updates:

Thread Updates


Replies & Notes

From the conversation view you can access adding replies to the customer, or notes (internal messages) to your conversation thread.

  • Replies:

Conversation Reply

  • Notes:

Conversation Note

Both views feature the same patterns

  • Navigation - with return to previous screen or sending/adding note functionality

Conversation Navigation

Conversation Note Navigation

  • Footer - for accessing keyboard or tags

Conversation Footer

  • Expanded footer - allowing for keyboard minimization

Conversation Footer Expanded


Assigning Users

Assigning users to a conversation can be through the header navigation, bringing up the assign view. Users can be specified through the search input.

Blank State


Adding Tags

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 State


Blank States

Blank states add delight to screens that contain minimal to no information

Blank State


Misc UI

The app takes advantage of default iOS views

  • Dialogs:

Dialog view


iPad

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.

Landscape

  • Mailbox List and Conversation - landscape view:

iPad - mailbox list & conversation view

  • Mailbox Menu and Conversation - landscape view:

iPad - mailbox menu & conversation view

Portrait

  • Mailbox Menu and Conversation - portrait view:

iPad - mailbox menu & conversation view