Drayage Web App: Shipping Dispatching & Order Management

cross.team was asked to design a new front-end for a container shipping order management and dispatching application. The client was a startup in the drayage industry. February 2020.

This page was last updated on February 17, 2020.

  • Processes: Mobile First Design
  • Tools: Figma, Github, Github Projects, Chrome/Firefox Developer Tools
  • Technologies: React, Material Design, Material-UI, JSON, CSS, APIs

The Project

cross.team was asked to design a new front-end for a container shipping order management and dispatching application.

My Role

  • performed limited project management duties
  • performed limited product management tasks, including collecting feature requirements from key stakeholder
  • worked on Information Architecture, including assessing application’s overall navigation
  • collaborated with developers to understand and map existing backend APIs in graphQL schema
  • Visual Design
  • documented APIs
  • mentored Junior Designer

Case Study

The existing product in kanban view:

img

A different view of the existing product in grid/list view:

img

The main ask for this project was to make the UI more intuitive overall on top of a modern architecture.

The existing application was built in .NET – we proposed building it with React, with graphQL as a middle layer to help with performance and to help the new front-end architecture interact with the old backend.

We proposed leveraging the Material UI design framework for its universality and mobile-first approach, utilizing the material-ui react component library to help us build quickly.

User Research

My colleague Richard Novoa began the project with research into users and the industry.

img

img

img

Information Architecture

As we began to explore general usability conventions and UI frameworks that would fit the product, we looked at the current application to understand and improve the Information Architecture:

img

img

img

Card Sorting

We presented the IA work above to our client and facilitated a card sorting exercise to help determine how to organize the new site:

img

Mapping the new Information Architecture

img

The image above was created with Flowmapp. Here’s the entire architecture I created with my colleague Richard. Select the image to view a larger version:

img

Wireframing

Richard continued his great work by sketching wireframes considering the research he uncovered:

img

img

And then translated those wireframes into interactions with feedback from the team:

Interaction Design

img

img

img

Translating Richard’s Work into Visual Design and Development

It was then my task to translate these wireframes and interactive prototypes into visual design.

A Framework for Visual Design

My colleague Marcelo had already established the general visual language, based on Material Design guidelines, given the research and ongoing conversations we were having with the main stakeholder (client) and users:

img

img

Documenting the Existing Product

As I collected feature requirements and learned more about the existing products architecture, I paused visual design to document the existing product to help business, design, and development use the same language and have the same understanding of the product.

Documentation often began with inspecting the existing application and then asking the developer questions as they arose:

img

img

img

I wrote the documentation in markdown, which made storage in the repositories a breeze, ensuring the documentation would always exist alongside code:

img

img

img

My documentation of the front-end went hand-in-hand with my developer colleague Sebastian’s creation of the graphQL schema that would be the intermediary between the old backend and new front end.

Sometimes my research and explorations would help him document the schema in-line or answer a feature question – other times he’d help explain how the backend worked, which helped me understand how the UI functioned and its larger intent.

If I had questions, I documented them:

img

I also documented the user experience architecture; how the pieces of the product fit together:

img

img

Getting clarity around what the features were and how they actually fit together in a complex product helped us speak the same language as a team.

Visual Design in Figma

Now it was time to build out the visual design, starting with the overall visual direction already established by my colleague Marcelo.

img

How did I get here?

Here’s a quick hand-sketch I did to help make sure the new visual design incorporated Richard’s wireframes and interactions while also including all of the features and nuance of the existing product and data structure:

img

I then began building the UI, keeping the developer’s needs close at mind:

img

Using material design conventions, we began to build out the secondary screens necessary for all of the interactions:

img

Here’s a close-up of one:

img

Field Mapping & Working with Development

As design and development progressed and we came into questions of nuance that needed to be clarified, I further defined the UI as needed:

img

Our development approach was the build the UI with ‘vanilla’ material-ui components, which we would then style in high fidelity later on the project.

Here’s an early version of the new UI in react:

img

This allowed us to move more quickly in development as we focused heavily on data integration without getting muddled down in UI refinement.

Quick UI Exercise

In some cases, at the request of the client, we designed the new UI to more closely match the existing UI.

Here’s a quick prototype I created in Figma over an afternoon with material components:

img

Next Steps

Before a decision to halt design and development due to business concerns, the next steps of the project would be to:

  • continue to design and develop secondary and tertiary views to build all of the requested major and minor product features
  • once views were built, restyle the UI into high fidelity

Conclusion

I hope this gave you a brief overview of how we approached the challenge of developing a product quickly, yet robustly, while facilitating clear communication about a complicated product.

I’m happy to answer any questions you may have as this was a brief overview of many aspects of the project.

By Jason James

Design, systems thinking and business for the common good. http://jasonmjam.es Twitter: @jas0nmjames

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s