This Project at a Glance


Prior to this project, our team worked on a responsive web app redesign for the Shiftboard platform, which included user and stakeholder research, wires, prototyping, and visual design.


The Challange

The goal for this project was to quickly create an iOS app using the freshly redesigned responsive web app as a guide. Our high-level goals were:

  1. Parity with the Shiftboard Platform App
  2. Make it feel like an iOS app


What I Did

Building on prior work, I wireframed the Shiftboard iOS app and collaborated with two other designers who had done extensive work on the Shiftboard Responsive Web app.

I stopped working on the project during the detailed visual design phase as the app started to be built.

Kick off

Picking up the Pieces

At the start of the project, many of the flows and content had gone through several rounds of testing and iteration. To get up to speed as quickly as possible, I partnered with two designers to learn what they uncovered during stakeholder and user interviews, multiple rounds of usability and prototype testing, card sorting, competitive analysis, and design research.


iOS Research

Before starting on sketching and wires I took a deep dive into the Apple HIG as well as several comparable iOS apps to uncover design patterns for consideration. My goal was to identify the key areas of the responsive web app and to focus on those.

After my analysis, three areas were prioritized:

  1. Web UI controls to native iOS UI
  2. Using iOS Tab and Tool Bars for key actions and navigation
  3. Converting expanding Cards to Lists with drill-in pages

Designing the Key Components

After multiple sketches and quick iterations, the wires below highlight some of the key components and interactions used in the iOS app.

Components & Interactions

Data Entry

Shift managers using Shiftboard’s platform were required to enter a lot of information into the app, which could be a tedious process.  To alleviate this I opted to present tappable choices, default selections, and drill in states to make finding and entering information as streamlined as possible.

Components & Interactions


Alerts were used only for important situations like confirming shifts and destructive actions such as deleting shifts. Alerts are a safeguard around accidental taps that could cause confusion and concern for shift workers.

Components & Interactions

Action Sheets

Action sheets were used as a solution for giving the user the ability to take multiple actions and making bulk edits of data. In the example below, the user has selected multiple users who have requested shift changes. The Shift Manager then taps on  “Mark”, which triggers the action sheet.

Components & Interactions

3D Touch

On supported devices, people can preview content by applying minimal pressure to the screen. Pressing down further or swiping up gives the user the ability to take specific actions without drilling into a page.

Components & Interactions


Tables were used extensively in the iOS app to display large amounts of data in the form of a list. For the iOS app, tables were used as an alternative to expandable cards on the responsive platform app. Tables were selected because they are ideal for text-based content and would work for small or large amounts of data.

Components & Interactions

UI Controls

Interface controls for wayfinding, navigation and taking action were aligned for iOS. 

iOS App Flows

I designed and mapped out interaction and user flows through the app. To save on budget, these flows were paired with a visual design component library as part of the final deliverable for development.

App Flows

Clocking In and Out of Your Shift

When opening the app people start on a dashboard where it’s easy to clock in/out or navigate deeper into the app with a few taps.

App Flows

Shift Manager

Managers are able to see high-level shift information across multiple locations and dates. If shift gaps exist, it’s easy to fill shifts with a few taps.

App Flows

Create a New Shift

Managers can create and customize new shifts and assign dates, hours, staff, frequency, and repetition.

App Flows

Set Your Availability

Workers and Managers are able to set or update their availability to work and pick up additional shifts.

App Flows

Send Message

Managers are able to broadcast a message to workers or teams within the app.

App Flows


Filters allow users to be able to quickly find workers that meet criteria for shifts such as location, security level, and availability. Users can also create filter sets, giving them quick access to frequently searched criteria.

App Flow


Navigation was redesigned from a hamburger style navigation to a Tab bar navigation, allowing users to quickly switch between different sections of the app. Drilling deeper into the app, the Tab bar was replaced by a Toolbar giving users access to actions and functionality.

App Flows

Profile Page

Users can update personal information and gain access to additional tools and resources.

App Flows


When searching, a person’s name and their team are displayed for context. For engineering reasons, searching was limited to finding people.

App Flows

Worker Timecards

After workers have submitted their shift hours, managers need to approve, unapprove, or edit shifts. Timecards can be approved individually or in bulk.

App Flow

Error States

Use of disabled states and choices minimized the chance for error states. In situations where the app has trouble connecting to the server, error states were designed with appropriate feedback and suggested corrective actions.