UX Case Study

The dPod

Project done as part of the course CS6755 - HCI Foundations by Dr. Bruce Walker

A detachable interface mounted on a bike handlebar that helps food delivery bikers communicate with customers and restaurants in the delivery process

+

A dedicated on-boarding app for setting up the dPod device

My contribution in the 4-person team

contract.png

Project Documentation

research-3.png

User 

Research

ui.png

UX Design
(dPod Connect App)

answer.png

User Testing & Iteration

Screen Shot 2019-12-19 at 5.56.40 PM.png

Overview

In this project, we ideated and designed a setup device for food delivery bikers that enables them to perform the core functions of calling, texting. navigating and updating status for orders while on-the-go. The setup consists of 4 main parts.

The biker's safety is kept paramount in the device's

design and the interaction with the device using the 

attached joystick is limited to minimum in order to avoid any safety hazards while riding.

Background

User Research Process

Literature 

Review

User Group 

Analysis

User
Interviews

Affinity
Mapping

Literature Review

 Major Insights

The bikers work as independent contractors and often take on multiple orders on different applications at the same time

Bikers often stopped to check GPS / call customers on the way.

Bikers often spent time waiting at the restaurant for the order to be prepared.

Bikers do not have any workers compensation or healthcare included.

User Group Analysis

Screen Shot 2019-12-20 at 3.13.58 AM.png

Third Party App Employees

Screen Shot 2019-12-20 at 3.14.22 AM.png

Single Restaurant Employees

Screen Shot 2019-12-20 at 3.14.46 AM.png

Independent Bikers

Independent Bikers

Screen Shot 2020-01-18 at 2.12.59 PM.png

Affinity Mapping

To consolidate our findings from the research methods, we created an Affinity Diagram to get a visualized picture of the notes generated during the interviews as well as in the literature review session and the competitive analysis report. We wrote our raw and low-level notes

on the yellow stickies, and grouped them with the pink, blue and green stickies to generate major themes and pain points for our users.

IMG_20190925_171147_edited_edited.jpg

Affinity Diagram

Major Themes and Pain Points

Our Affinity Diagram revealed a lot of major themes and pain points about our users that were radically different from the assumptions

that we had made before starting the research. One major theme that occurred during the analysis of the Affinity Map was the issue of lack of effective communication between the biker and the customer as opposed to the previously thought navigation, which was only a secondary concern for most bikers.

Screen Shot 2020-01-18 at 2.53.52 PM.png

THEMES

PAIN POINTS

Community

Bikers often work in teams and make friends with other bikers.

Love for the Job

Bikers enjoy the adrenaline, freedom and the exercise that their job provides.

Equipment 

Bikers use their personal smartphones and bags for the job and prefer inexpensive equipment.

Customer Communication

Do not have clear idea of location and customer preferences before starting.

Receiving the Order 

Restaurants have huge waiting times and don't update order status in advance.

Navigation

Relying on GPS slows down the process. Bike parking and safety is an issue too.

Experience

New bikers often take a lot of time to 

learn assistive technologies for navigation and communication.

Safety

Are often riding on crowded roads to finish orders fast.

Brainstorming Diverging Ideas

After identifying the themes and pain points for our users, we then generated design ideas in a very divergent manner, which implies that 

we generated as many ideas as we could. Most of our ideas were targeted towards tackling common themes such as efficiency of the 

process and simplicity of the design.

Image from iOS-3.jpg
IMG_20190925_153409.jpg

Generating Design Ideas

After listing all the design ideas, we then rated every idea on 2 concepts - Creativity and Practicality (C and P in the image) on a scale of 0 to 5. The average of these 2 scores helped us get our Top 14 Design Ideas.

Screen Shot 2019-12-20 at 5.16.51 AM.png

Top 14 Design Ideas

Screen Shot 2019-12-20 at 5.17.40 AM.png

Initial Individual Brainstorming Ideas

The dPod Design

Core Functions of the Device

Screen Shot 2019-12-20 at 5.31.03 AM.png

Quick Call 

Call customers and Restaurants with one click.

Screen Shot 2019-12-20 at 5.34.14 AM.png

Template Texts

Send pre set text messages 

with one click.

Screen Shot 2019-12-20 at 5.34.37 AM.png

Navigation Aid

Get global and turn-by-turn

audio navigation assistance.

Screen Shot 2019-12-20 at 5.34.52 AM.png

Check Orders

Sort and mark order as Complete.

Designing the Information Architecture and Initial Sketches

We used our takeaways from the themes and pain points to design the structure of the device in two phases - designing the hardware of the 

 setup and then defining the information architecture

dod sketch.png

Initial sketch of the dPod device and the controlling joystick on the side

Screen Shot 2019-12-20 at 10.22.46 PM.pn
Screen Shot 2019-12-20 at 10.44.06 PM.pn

Designing the Information Architecture

Storyboard

Structure of the dPod Setup

The dPod is designed and conceptualized as a set of four distinct components that work together from the start, when a biker receives the order till the order is finished and the biker updates the order status. The four distinct components in dPod are identified and explained below. 

01. dPod Circular Interface

This is the main interaction screen (only has visual interaction; no touch is involved) while riding.This nullifies the need for the user to look down and navigate since the functioning of the joystick is widely intuitive, hence taking the safety point of the biker into consideration.

Screen Shot 2019-12-20 at 11.42.51 PM.pn
Screen Shot 2019-12-20 at 11.42.23 PM.pn

Pink Foam model of the device

The circular cylinder has a 4 inch diameter and a 1 inch thickness. The user interacts visually with the screen and controls the functioning with the four-directional joystick on the handlebar. The device can detached to ensure safety when the bike is parked on sidewalks as found during the user research process.  

Screen Shot 2019-12-22 at 7.46.33 AM.png

Interactive Wireframes for dPod Device

2. Four-Directional Joystick

Screen Shot 2019-12-21 at 1.52.29 AM.png

(A typical image)

This device is the primary navigation control for the design. It is a 

detachable (to accommodate handedness) flat joystick mounted to the side of the handlebar. 

3. Bone Conduction Headphones

Screen Shot 2019-12-21 at 1.52.07 AM.png

(A typical image)

Special type of headphones that sit on/around the ear and allow the wearer to hear their surroundings while listening to the headphones, thus promoting safety of the biker while calling customers.

4. dPod Connect Mobile App

To use the system, the user first opens the dPod Connect application on their phone and connects to the order tracking system. Then, the user can select deliveries to complete in the order. After that, the dPod Connect will automatically send all relevant information such as contact numbers and addresses to the circular screen interface, and the user is ready to get on the road and start the delivery. The application works in dual modes, based on whether the user works for a restaurant or for a third party application that supports multiple restaurants.

Screen Shot 2019-12-21 at 4.41.46 PM.png

Interactive Wireframes for the dPod Connect App 

Onboarding

Screen Shot 2019-12-22 at 6.52.28 AM.png

Biker Categorization

Screen Shot 2019-12-22 at 6.52.55 AM.png

Setting up Biker Profile

Screen Shot 2019-12-22 at 7.01.01 AM.png

Selecting Orders

Screen Shot 2019-12-22 at 7.07.30 AM.png

Checking Profile Status

Screen Shot 2019-12-22 at 6.58.04 AM.png

Reviewing Order Sequence

Screen Shot 2019-12-22 at 7.07.51 AM.png

Interactive Prototypes for dPod Connect App

User Testing

The Testing Process

Usability Testing: dPod Connect Application

1. Walkthrough with pre-defined tasks

2. Post-walkthrough interview

3. Microsoft Product Reaction Card

List of Tasks

1. Browse the application

2. Arrange deliveries by location

3. Arrange by distance

4. Change the order of deliveries both by location and distance.

Usability Testing: dPod Circular Interface

1. Walkthrough with pre-defined tasks using the Wizard of Oz technique

2. Post-walkthrough interview

3. SUS Survey

4. Microsoft Product Reaction Card 

List of Tasks

1. Send text template #1 to customer

2. Call fellow biker

3. Access global map

4. Activate turn by turn navigation

5. Check address and call customer

6. Mark delivery as complete

IMG_20191118_092558.jpg

User testing session with a biker

Screen Shot 2019-12-24 at 4.14.55 AM.png
Screen Shot 2019-12-24 at 4.15.15 AM.png

Wizard of Oz simulation for testing sessions

Interactive Prototypes for dPod

Quick Call

Template Text

Navigation

Assistance

Order Status

Screen Shot 2019-12-24 at 7.50.52 AM.png

Who are the users?

People who deliver food using bikes in urban, crowded spaces.

Bikers who work for third party applications such as Uber-Eats.

Bikers who work for restaurants such as Jimmy John's or as independent bikers.

User Interviews 

Age

21-31 years old

Gender

4 Male; 1 Female

Ethnicity

4 Causasian; 1 Indian

Employment

2 Single-Restaurant Employee 

1 Third Party Employee

1 Independent Biker

Experience

1: >10 years

1: 5 years

3: 1.5-4 years

Who are the testing users?

(The users that we tested our designs with)

Food Delivery Bikers

1

(11 years of experience with bike food delivery)

Others

4
(Users with moderate level of design knowledge)

Screen Shot 2020-01-18 at 2.42.39 PM.png
Screen Shot 2020-01-18 at 3.13.53 PM.png