Order creation on the go for truck drivers.
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.
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).
Research, Customer Journey, Wireframing, Prototyping, Usability testing, Visual Design
Product Manager, Developers, Content Writers, Stakeholders, Data Scientists, UX Designers
After discussing goals and requirements with the PM, I got acquainted with the existing web order creation.
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.
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.
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.”
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.