top of page

Order Form Design

Clockwork Logistic Systems

Role: User Experience Designer

Industry: Supply Chain

Users: Customer Support employees, Administrators 

Programs Used: Figma & Zeplin

Problem Statement 

The user needs a way to manually create orders with the ability to fill in the information needed to track the shipment. Currently, the customer does not have a way to insert shipment information onto Clockwork's online platform.

Constraints

  • It needs to be a modal with open text and select fields

  • It needs to be done in 2 sprints

  • Each transport mode will require a different set of fields

​

Expected Timeline:

  • Design starts in November and gets done by December (4 weeks)

  • Development in the test environment begins by January and gets implemented by February (4 weeks)

  • Users begin testing the form in March

​

Design Process

  • The stakeholders schedule a meeting to go over the Jira ticket written, describing the details of the task, reason for the task, and time constraint.                                              

"Order Form: Standardize the various transport order forms and come up with an interactive design that will account for all the transport modes. The design should allow the user to open and fill out each data set individually at no particular order.

​

Timeframe: Two Sprints / 4 weeks"

  • The stakeholders and I schedule a call with the customer to gather more specific requirements and outline the expected flow for the form.

​

  • Start designing wireframes based on the information provided thus far while looking into inspiration for form design and accessing Material UI components that can be used for the form.

​

  • Take initial wireframes back to the customer to help them realize their vision and get feedback from them and the stakeholders

​

  • Get the approval to move forward making the final designs and show them to the rest of the product team

​

  • Customer approves final wireframes

​

  • Discuss designs with the Front-End developer and continue to assist them during the implementation period

​

  • Allow users to test the form on the test site and get approval for the final interaction

The Flow

Final Wireframes

Order Form LTL.png

Challenges

Challenge 1:

Gathering requirements was difficult because the customer wasn't initially sure what they wanted in the form and what was possible to include in the form.

How I Overcame It :

To make the process easier, I took in bits and pieces of information and requirements from each meeting and so I could enter the next meeting with a visualization of the ideas they communicated. This allowed us to lead the design discussion while giving the customer the opportunity to give feedback and see their vision come to life much faster.

Challenge 2:

Explaining and presenting the design to the developers was a challenge because they hadn't worked with the Material UI component library before.

How I Overcame It :

After I got approval for the design, I personally walked the developers through the prototype, showing them each component and where it can be found in the Material UI library. I also was sure to upload all my wireframes to Zeplin with the connections to our own component library and comments on each screen to describe how the interaction should go. Throughout the development process, I joined progress meetings and answered questions/addressed concerns to make things easier.

bottom of page