Order Creation

Order creation on the go for truck drivers.

project

PROJECT BACKGROUND

Ship.Cars is a company that builds B2B & B2C software for transport & logistic industry, that helps clients grow and optimize their auto transport business with web and mobile software tools built for Carriers, Brokers, Dealers and Shippers.

I was responsible for the UI/UX Design of the ePod - native iOS application, that allows truck haulers among other things run their business from their phone, book and manage orders, track payments and facilitate electronic photo inspection of damages.

THE CHALLENGE

How can we allow drivers to create a new order on the fly as fast as possible?

That was the question that kicked off In-app Order Creation initiative.

The Ship.Cars platform already provided a way for the carriers to import or create new orders on a website platform, however this functionality was missing in the mobile app. Drivers and dispatchers often need to be able to create a new order on the go. Unlike our competitors, Ship.Cars does not provide this functionality, which resulted in losing some of our clients to them.

The main challenge for the project was:

Keep the process as simple and quick as possible, yet comprehensive enough to capture the minimum required data for further manipulations with an order (pickup/delivery).

My Role

Research, Customer Journey, Wireframing, Prototyping, Usability testing, Visual Design

Timeline

2 weeks

Worked with

Product Manager, Developers, Content Writers, Stakeholders, Data Scientists, UX Designers

Tools

Sketch

Whimsical

Overflow

Invision

COMPETITIVE ANALYSIS

After discussing goals and requirements with the PM, I got acquainted with the existing web order creation.

Then I proceeded to carefully analyze the main competitor to find out how similar functionality is implemented so that we could identify their strengths and weaknesses and scope out what we might be able to do better, not only in terms of user experience and interaction, but also user interface.

I found it helpful to check the design against usability heuristics, such as those specified by Jakob Nielsen. After noting all the details in the analysis matrix spreadsheet I summarized my findings and identified opportunities for improvements.

Competitive analysis matrix spreadsheet
Competitive analysis matrix spreadsheet
Driver Persona
Driver Persona

UNDERSTANDING USERS

This Provisional Driver Persona was created based on Stakeholder interviews, online research and interviews with drivers.

For the personas to be profoundly beneficial to our design process, we needed to base them on the qualitative data from a larger amount of interviews with direct users, but, unfortunately, we were not able to do that.

I found it very insightful to watch recordings of web sessions in Fullstory software of how users currently create new orders: which fields are used most often or skip and how they go about filling in various types of text fields.

JOB-TO-BE-DONE

Keeping the end user in mind, I created a Job Story based on the Jobs To Be Done framework.

“When Josh picks up a vehicle at an auction, he wants to be able to quickly create an order on-site, so he doesn’t miss an opportunity to earn money.”

IDEATION

Working with data collected during the research phase, I was able to set up user flows which we reviewed with the team and used to brainstorm ideas, questions and assumptions.

After gathering all my findings and understanding what problems I need to focus on, I started to generate ideas on paper.

Low-fidelity wireframes
Low-fidelity wireframes

PROTOTYPING

I used Overflow and Invision to handle feedback, communication and make mid-fidelity prototypes.

Showing prototypes to developers allowed me to get an engineer’s perspective to ensure the design I am proposing is technically feasible.

Mid-fidelity wireframes with annotations
Mid-fidelity wireframes with annotations

USABILITY TESTING

At this stage our testing was limited to internal users and I did a round of Hallway Usability testing with people working in the office including Executive team, Sales team and Content Writers. This helped me identify trivial usability errors and any confusing steps in the UI.

Afterwards, I completed a few rounds of updates based on the feedback. Ideally, my next step would be to test it with real customers.

Usability testing session
Usability testing session

HIGH-FIDELITY MOCKUPS

I started by writing bullet points for all the elements that need to be on each screen. Then I took the time to review existing design patterns as well as iOS Human Interface Guidelines.

To create high-fidelity designs mockups I used elements from the Style Guide that I previously started working on for the app, adding new elements to it as needed as well as using native iOS components in some cases. Reusing components from our Design System significantly eases the development process for the team.

Design Guide
Design Guide

QUICK ACCESS TO OPTIONS

Based on the feedback received during usability testing I reduced the number of steps to start the order creation. To initiate order creation user needs to select one of the options.

Scanning VIN number with a camera provides greater user convenience and speeds drivers through the funnel by automatically populating information about the vehicle.

Quick access to optionsQuick access to options
Faster interactions

FASTER INTERACTIONS

Having types in the horizontal list makes options glanceable and reduces the interaction cost and allows for faster selection.

I worked with our Data Scientists to get information about the most commonly selected vehicle types first.

YEAR, MAKE, MODEL

Rather than force users to make additional steps to move to the next text field I combined 3 of those related to each other in one.

The user is provided with dynamic search functionality for filtering results and is automatically redirected from one screen to another after making a selection.

Since research has shown that often carriers deal with custom vehicles I provided a way for them to add a custom make and model when their search produces no matching results.

Year, make, model
Location and datesLocation and dates

PREPOPULATED LOCATION AND DATES

Using a device’s native features (e.g geolocation) to streamline the task of inputting data and enhance user interactions.

Automatically pre-populate date text field with suggested data, which in many cases will be accurate for the user and make the process more convenient. All fields are left available for editing.

REMOVING FRICTION

How to make a form with a lot of questions less overwhelming for the busy drivers?

I addressed this issue by breaking down a long from into multiple shorter and more manageable steps to better communicate how each step is relevant to the user and introduced a progress bar to help drivers feel like they are making progress towards an end goal and keep their motivation high.

Removing frictionRemoving friction
Vehicle Information
Vehicle Information
Payment Information
Payment Information
List of Added Vehicles
List of Added Vehicles
Customer Information
Customer Information
Pickup Information
Pickup Information
Dates Selection
Dates Selection + Restrictions
Payment Method Selection
Payment Method Selection
Successful Order Creation
Successful Order Creation

What's Next?

Developers were provided with detailed annotations explaining interactions of components in Zeplin. Currently the designs are in the process of development. Once it is done I am going to review the implementation and provide explanation to the developers on what could be improved and where the execution didn’t align with the initial design.

  • After launching a beta version we are looking to test it with users, gather their feedback and iterate on it
  • Explore Implemention of direct order import from a PDF file
  • Concentrate on Order Editing flow

What would I have done differently?

  • Conduct in-person interviews with direct users to get more detailed insights on the way they currently go about creating orders
  • Conduct user testing sessions with direct users after each iteration