Availability reimagined.

Empower the workforce with a clear and simple experience to input and understand job availability.

 
 
 

 Bellhop is a nationwide moving company that relies heavily on a remote and digital-based workforce we call Pros. Jobs are assigned based on location, availability, skills, and performance rating. The Bellhop Pro app is the bridge between the operations team, the Bellhop customer, and a workforce of individuals who strive to perform at peak capacity.

The Problem

On the business side, the availability time input by the Pros was not in alignment with the times the customers were booking moves. Gap windows of unused availability were creating improper usage of time and scheduling conflicts with the customers.

The goal

Create an experience that allows the workforce to input a useful schedule of availability that aligns with the customer's booked time windows. Evolve the existing UI/UX so as to not disrupt the end-users current mental modal of entering availability. The new design needs this to be clean, simple, useful, and not deviate too much from the previous paradigm.

Collaboration

  • Product managers

  • Product designer (Me)

  • iOS and Android engineers

  • Platform engineers

  • QA Specialist

  • Daily Ops, Market managers, CPO, COO, CMO

  • Real end-users

My role

Product designer leading the workforce app re-design

Results

  • Immediate 42% increase in useable hours submitted through the app

  • Usable hours provided within the app increased month over month

  • Enabled demand-based pay which increased submitted time month over month

  • HQ has increased visibility into workforce availability making it easier to assign Pros to jobs

  • Increase forecasting capabilities to predict Pro availability

  • Simplified UX which is fun, simple and solves key problems

Discovery

Understanding the problems

After meeting with and interviewing multiple stakeholders and end-users I began to understand the collective and overlapping issues both the business and workforce were experiencing. Below are the core problems we highlighted from the research.

Business problems:

  • We aren't collecting enough availability, only 40% of Pro's submit availability within the app

  • The availability we do collect is hard to use

    • Start times don't align with move start times

    • Unusable blocks

    • Gap availability (defined as availability not collected because it didn't fully fit within any one block

  • We don't hire for availability as it isn't accurate enough to understand the needed times

  • Our current availability gathering strategy was designed for a completely different workforce mindset

  • Our availability is unreliable and therefore not trusted by the market managers to make scheduling decisions

UX and design problems

  • Our current availability Ul and UX is not ideal

  • The UI lacks positive engagement when more hours are put in

  • The app allows users to put in availability we can't use

  • There is no good dashboard for Pros to see arrival patterns that match supply

  • No earning potential/summary presented to the Pros

  • The app does not educate users on how availability is used

  • The UI does not suggest or showcase times needed by the market

  • The existing design feels clunky and cumbersome to use

Below is the existing availability UX that was causing confusion amongst the workforce.

My job was to solve these issues with a series of clean and elegant design solutions that utilize familiar design patterns from the existing UI, while improving the end-user experience and solving the need to capture usable availability.

Solution

To design and test multiple concepts that allow the workforce to clearly input their availability into the app. We want to build a weekly schedule component that allows the Pros to simply create their schedule one time and apply it on a bi-weekly basis - allowing them the freedom to edit and modify their schedule simply and easily.

Must-haves

  • An availability gathering system that allows for 2 start times, 8 AM and 12 PM (Morning and afternoon)

  • An availability gathering system that ensures no unusable availability is gathered: Defined as availability less than 3 hours or not aligned to a start time we offer customers.

  • Ensure we erase gap availability in what we collect - We don’t want unable time

  • Create a UI that is both easy, beautiful, and promotes collection 

  • Educates the Pros on how and why we need this

  • Entry into the availability from the home dashboard

Design Principles

  • No unusable time gathered

  • Be clear on 2 start times

  • Minimized gap availability and UI to visually educate

  • Behavioral and educational cues to drive increased availability

  • Ease of entry into the experience

Key framework - Fogg behavioral model

We needed a clear prompt to indicate when the user should enter in the needed availability. This is inline with the Fogg behavioral model of Motivation = Put in hours to get paid. Ability = I needed to create a simple way of allowing users to input time. Prompt = Highlight the action from the user profile dashboard when the business required the needed time.

My process

Research

I met with business stakeholder to gain deeper insights into how the existing availability model was problematic in creating issues for the business. I would then conduct user interviews to gather behavioral goals, patterns and feedback as how the they would enter availability into the system, what their mental model was, and the core goals behind these actions. With this data I began to understand the collective and overlapping issues both the business and workforce were experiencing.

Ideation

I started with sketches and wireframes and reviewed them with end-users and stakeholders within daily ops. We then moved into high-fidelity mockups with multiple options and right into the prototype phase to get a few working flows in the hands of the Pros. My thought process was to draft up efficient ways to visually group the time selections and explore multiple options on paper that leveraged custom and native iOS and Android controls.

Breaking down the slot times

Introduce a dropdown calendar.

 

Design concepts

Availability UI concept

We knew we liked the overall function and feel of this layout but after reviews with the team, we knew a smarter solution was to break the days into morning and afternoon slots. This mindset aligned with the current booking model.

Exploring the calendar dropdown

Initially I thought it would be beneficial to leverage a monthly calendar overlay to allow the users to build out and access their availability weeks in advance. After some reviews with engineering and stakeholders we ditched this idea since we can ultimately only capture availability within a 2 week window.

Leveraging native controls - concept

This concept explores the native layout and functionality of the iOS design system, once the user would select the day they want to work, this UI would slide up allowing them to select start and end times for the day, tell us they can work all day, or not available at all. The majority of the team loved this initial idea yet after reviewing with the COO, the main stakeholder on this project; he communicated some concerns around the lack of visual guidance that allows the user to understand the variations between start times.

Revising the design

I made revisions based on early feedback with users and insight from stakeholders to craft a visual experience that clearly guided the user to understand the set job start times and to contextually enter in the time they can work until. I utilized a linear pattern of time selections to clearly indicate when the job starts and how much time they can give us within that slot. We wanted to create a UI that would be easily adapted through visual continuity while highlighting clear start times.

Clear time slots

  • After careful team and user review we decided to break the daily time slots into two sections. Morning and afternoon, this would train the user to know how we associate their time with customer moves, starting at 8 AM and 12 PM.

Visual time selection

  • After reviews, we created a custom experience that was in line with the familiar paradigm. The key was to educate proper user behavior through visual queues and interaction.

Crafting the My Schedule flow

The new My schedule section, though different in function still needed to look and feel similar to the previous UX experience and interactions. Creating a repeatable schedule is new for the users but was imperative for us to create a way that users could enter in a weekly schedule once and repeat that schedule when need be with a tap of a toggle.

Benefits

  • This flow empowers the user to create a weekly schedule one time and apply it simply with a touch of the toggle.

  • We capture the hours of availability entered in and generate the total time projections of work based on an hourly rate. This gives the Pros a solid mental model of how much income they could potentially earn with the time that have provided.

 

Review with the Pros

Once the final revisions were made to the new design and was approved by stakeholders I conducted a series of tests with the working prototype with end-users in the field to gauge the applicability and usability of the new experience. Since the majority of the user pain points had been established earlier in the research phase the majority of the feedback with highly positive. The Pros loved the efficiency of the My Schedule feature as well as the overall flow and simplicity of the new design. Since we maintained a similar mental model from the previous design, adapting to the new flow took minimal time for the Pros and they were all pumped to see the new design be released.

 

 Final designs

Availability hero UIs

 

My Schedule hero UIs

Design breakdown

The user selects to enter time manually.

In this initial screen the user has 2 options to enter availability: Enter time manually by selecting each slot or the use the My Schedule feature. In this flow the user selects the to enter the time manually, selecting Monday, Nov, 1 - Morning 8AM, where the drawer slides up providing the user clickable time options whereby the user taps 1PM to end the morning shift.

Availability and My schedule screens

Clear start time starting at 8 AM and 12 PM (Morning and afternoon). The My schedule UI on the the right allows the user to enter in their weekly availability one time and apply it when need be with the tap of a toggle.

Selecting the Repeat function

We created clear visual touch points that make it easy for the user to understand what to do and how many hours that are selecting. The UI on the right allows the user to repeat that grouping of time to any day of the week with a simple click of a check and swift apply.

Select a time slot or choose ALL DAY

Here the use can enter time into the My schedule feature by selecting each day or choosing the all day toggle which gives them availability from 8AM to 8PM. Simple for them, great for business.

Applying My schedule is easy as pie

Once the user has built their initial schedule in the My schedule feature applying it could not be easier. Simple tap the toggle and hit submit. Yes, it’s that easy.