PRODUCT DESIGN
SideFlip
OVERVIEW
SideFlip mobile native app is used by consumer fleet operators (e.g., a dealership loaner manager) to manage vehicle availability and deliveries, track damage and mileage, and recoup fuel costs.
ROLE
UX, UI, visual design, and documentation.
The opportunity
Many fleet operators use myriad disparate tools to manage their vehicle deliveries. A delivery valet may print a physical checklist for task management, use a Google Doc to track vehicle availability and vehicle notes like mileage or fuel, Google Maps to navigate, and Twillio to communicate with the consumer. The goal for SideFlip is to combine all these jobs in one simple digital tool.
Early vehicle delivery tools included a printed list of tasks
Design tenets
We began the process by going to the field to deliver cars. Our team completed dozens of deliveries and interviewed users and consumers. With our opportunity framed and user goals in mind, we defined a set of tenets to focus the design.
All delivery jobs in a single digital tool
Must be screen size agnostic
Must be simple and intuitive enough to employ gig-workers
Workflow architecture
The primary workflow is a set of linear tasks that directs a user, providing a high-touch, simple, and consistent vehicle delivery experience for consumers.
After each task is completed the app asks for the next. When there are no more tasks, the job is complete; the user moves on to the next assignment.
Tasks go left to right and must be completed in sequence. Workflows may contain a tangent that goes up and down. Tangents may be started, paused, and completed at any time.
Figure 1 illustrates the primary user flow with subtasks and tangents.
Figure 1: SideFlip mobile app will retrieve a set of tasks (job) from the system with contextual instructions for the user. Once the final task is completed, the app will ask the system for the next job. Tasks may have subtasks, and jobs may have global tangents.
Screen sizes
Fleet operators have a digital toolset that live on a variety of device types and sizes. Some providers mandate the use of a company iPad. Others endorse the use of personal smartphones. Some even rely on a printed PDF.
We started by designing a responsive iOS app and adapted it to Android using Material guidelines.
See Figure 2: On small screens, the global tangent (B) pushes up as a modal. On larger screens (C), the global tangent may persist side-by-side with the primary workflow (A).
Figure 2: SideFlip design responds to screen size.
Capturing data
SideFlip gives the user the ability to update or confirm vehicle conditions replacing the need to keep up a separate spreadsheet.
The app prompts the user to scan a VIN to confirm the proper vehicle is assigned. Data like fuel (A) and odometer mileage (B) is captured one task at a time to force the user to focus on applying the proper reading.
Damage data (C) is captured in a structured format via global tangent so the user is able to begin at any point in the process and come back to it late if needed.
Figure 2: SideFlip simplifies and structures vehicle data.
Components and patterns
SideFlip only uses a handful of unique components. Those components are combined in many different ways to create the UI. A small number of flexible components makes it easy for fleet providers to iterate and test different experiences.
SideFlip is used by major dealerships and OEMS to support high touch consumer experiences. Porsche USA uses SideFlip to manage their deliveries for the Porsche Drive subscription, rental program.
Credits: Photography by Justin Howie.