This Project at a Glance
Background
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:
- Parity with the Shiftboard Platform App
- 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:
- Web UI controls to native iOS UI
- Using iOS Tab and Tool Bars for key actions and navigation
- 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
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
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
Filtering
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
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
Search
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.
