All work
A MacBook on a wooden sideboard beside a black vase of pink pampas grass, showing the redesigned Assign Cargo step: a pickup with its cargo cards and the vertical stepper on Cargo
Overview

Ascent Order Entry. The feature in On-Demand PEAK that customers use to complete shipment orders.

Order Entry is the most important tool in the software. It covers every logistics action, from placing shipments to scheduling, building shipment routes and billing, and it’s the tool that generates the most revenue at Ascent.

Timeline
September 2022 – March 2023
Role
Lead Product Designer
Contribution
User research · Architecture · Visual design · Prototyping & testing
  • 10Users interviewed
  • 5Steps, from one long form
  • 58%Less time per order
  • 78%Fewer errors

The problem

01Problem

These are screenshots of the legacy Order Entry tool. Developers built it before I joined the team, without any design thinking. It’s one long, scrolling list of form fields, with messy architecture and no hierarchy or groupings, and the experience is confusing and overwhelming.

Two legacy Order Entry screens: one long form of loosely aligned fields, and a cargo record form with dozens of unlabeled-looking inputs
Legacy Order Entry

Research

02Research

The research phase began with goals, written as questions that needed to be answered and challenged:

  • What features do users want while completing an order?
  • What problems do they struggle with while creating an order?
  • Are there current features in the legacy Order Entry that can be enhanced?
  • How essential is the Order Entry process to the user’s workflow?

I began by scheduling contextual interviews with 10 current Order Entry users to see how they use the tool.

Finding 015 points

Needs

  1. Complete an order as quickly and efficiently as possible
  2. Save a past order as a template
  3. Tag an order
  4. A better, more visual way of building a pickup and dropoff route
  5. Assign cargo to specific pickup and dropoff destinations
Finding 023 points

Pains

  1. The current workflow is overwhelming and messy
  2. One order takes too much time to complete
  3. Users often lose their spot while completing an order and get lost in the flow
Finding 033 points

Wants

  1. A clean, simple, easy-to-use interface
  2. Very quick input: users said they often tab through each of the form fields
  3. Better visibility into what’s happening within an order: where is it going, and who is receiving it?

Define

03Define

With the common wants and pain points in hand, I developed a user persona. Exploring the user’s thoughts, goals, frustrations and influences defined who the tool is for, and kept the design decisions tied to the research and to the users’ goals.

Thinking / Feeling

4 notes

  • “I hope this order doesn’t take too long”

    Scott Kehres

  • “Did I make sure I inputted the correct destination?”

    Scott Kehres

  • “How can I ensure that this order is submitted and received?”

    Scott Kehres

  • “What pickup location is my shipment heading toward?”

    Scott Kehres

Doing

5 notes

  • Build a route for the shipment

    Scott Kehres

  • View ready times for cargo pickups

    Scott Kehres

  • Input customer information

    Scott Kehres

  • Assign parts to specific cargos

    Scott Kehres

  • Assign cargo to pickup and dropoff locations

    Scott Kehres

Goals

5 notes

  • Complete order as quickly as possible

    Scott Kehres

  • Save past orders as templates

    Scott Kehres

  • Use a visual tool to build a shipment route

    Scott Kehres

  • Ensure that shipment arrives to pickup and dropoff locations

    Scott Kehres

  • Have full visibility to where the shipment is going

    Scott Kehres

Pains

5 notes

  • Overwhelmed by the amount of fields

    Scott Kehres

  • Flow is too messy and unorganized

    Scott Kehres

  • Can’t assign cargo to pickups and dropoffs

    Scott Kehres

  • Time-consuming process

    Scott Kehres

  • Unable to allocate parts to specific cargo

    Scott Kehres

User flows

The high-level flow maps each question an order has to answer to a step, and the task flow breaks each step into the jobs inside it. Five steps, from order details to submit.

High-level user flow: start from a template or new, then who is shipping, who is paying, where it’s going, multiple stops, how it’s packaged, what parts are in it, and notifications, mapped to Enter Order Info, Pickup, Dropoff, Route Builder, Add Cargo, Add Parts and Submit
User flow · high level
Task flow: Order Details, Build Route, Cargo, Schedule, Review and Submit, each with its tasks, such as tag shipment, add multiple stops, assign parts, edit order and save as template
User flow · task flow

Wireframes

04Structure

Next, it was important to define the interface and information hierarchy at a basic level. I started with quick sketches, then made low-fidelity wireframes of the key pages. They laid the groundwork for the UI design.

Four low-fidelity wireframes with the vertical stepper on the right: Order Detail, Build Route with stops, Build Route with cargo cards, and Schedule
Low-fidelity wireframes

Design

05Design

After wireframing the architecture, I began implementing the PEAK design system. I also designed new components specific to Order Entry, such as the vertical stepper and the success-state animations, to make the tool feel more alive.

Order Entry homepage: all templates and drafts with a filter and search

Order Entry homepage

When users first open the Order Entry tab in PEAK, they land on a page that holds all of their templates and drafts. They can filter and search their templates and drafts, and switch between a list and a thumbnail view.

  1. 01Filter the page down to drafts…
  2. 02…or to saved templates
  3. 03Everything in one place, with search
  4. 04Start a new order
Order Detail step, empty, with the vertical stepper on Details

Order details

The first step in the flow. The user fills out the customer and billing information, can tag the order, and can mark it as a hot or recurring shipment. At any point in the flow, an order can be saved as a draft.

  1. 01Look up the customer by plant or name
  2. 02Customer and bill-to fill in on their own
  3. 03Tag the order so it’s easy to find later
  4. 04On to the route
Build Route step with an empty pickup and dropoff

Building a route

With the visual builder, a user can add any number of pickup and dropoff stops. A stop’s information goes into the modal after pressing Add Stop, then it’s saved to the builder screen, which also calculates the total miles.

  1. 01Add the pickup
  2. 02Then where it’s going
  3. 03Add as many stops as the shipment needs
  4. 04Next: assign the cargo
Assign Cargo step: a pickup with an Add Cargo tile

Assigning cargo

The cargo step lets users add cargo to specific pickup and dropoff stops. They can also add parts to the selected cargo: look up the part number, enter the amount, and add it.

  1. 01Add cargo to the pickup
  2. 02Each cargo card shows its BOL, parts and size
Schedule step with no schedule yet

Scheduling automation

Users can create schedule automations for when an order should run. One order can have several schedules, each with its own frequency.

  1. 01Start a schedule
  2. 02Set when, how often and which days
  3. 03Next: review
Review step: the order summary with its pickup and cargo

Review & submit

The last step is a review page: a scrollable summary of everything entered for the order. Users can add email alerts here too. Once the order is submitted, they can view it, start a new order, or save it as a template.

  1. 01Review the whole order on one page
  2. 02Submit
  3. 03Then view it, start another, or save it as a template

Findings & conclusion

06Outcome

Measured against the legacy tool, the redesign made orders faster, more pleasant and less error-prone:

Average time to process an order
58%

Less time per order

Legacy
12 minutes
Redesign
5 minutes
Likert questionnaire, before and after launch
+2

Points of user satisfaction

Legacy
2 / 5
Redesign
4 / 5
Error rate during order processing
78%

Fewer errors

Legacy
14%
Redesign
3%

Reflection

The revamped Order Entry became a pivotal part of PEAK: more efficient, faster to complete, and a better experience overall.

  1. 01

    A real UX process

    Bringing design thinking and a proper UX methodology to the platform streamlined ordering for external and internal users alike.

  2. 02

    Shaped by testing

    User feedback and usability testing refined Order Entry’s design and functionality into an intuitive flow that resonated with customers and internal users.

  3. 03

    A small, cross-functional team

    Product managers, BAs, designers and developers working together made for an agile approach: rapid iteration, and continuous improvement as feedback and requirements evolved.

More projects

Ascent PEAK DashboardProduct Design
Ascent PEAK Design SystemDesign Systems