CASE STUDY

DESIGNING
A FORM

for
ALL THE THINGS

Background

 

Seaspan Corporation, is a worldwide leader in marine cargo shipping and vessel management, with a multi-billion dollar annual revenue and hundreds of employees. Their core business is focused on building and purchasing container ships, and leasing the ships and accompanying crew to large corporations on multi-year contracts.

Seaspan has been a leader in the shipping industry for decades, yet many of their core business processes relied on outdated systems and methods to track and manage work.

The company had seriously outgrown these methods, and the leadership recognized a crucial need for more specialized software and tools to maximize efficiency and accuracy.

My core purpose was to translate their offline workflows into a cohesive application.

CONTRIBUTIONS

I was the sole designer on the team, and therefore responsible for all things related to UI and UX. My daily work included:

  • Communication and collaboration with Stakeholders, Business Analysts, Project Managers, and Developers
  • Helping prioritize and refine features and requirements
  • Defining site architecture, heirarchy, and user flows
  • Creation of sitemaps, wireframes, prototypes, and visual interfaces
  • Working closely with developers during feature definition, implementation and QA

Defining a Problem

 

Seaspan’s main source of revenue comes from leasing out their ships to worldwide customers who need to transport goods. These contracts are called Fixtures, and most of them last for multiple years and are worth millions of dollars. Securing new fixtures requires deep involvement and communication across multiple teams in the company, including Sales, Accounting, and Legal.

Historically, negotiating agreements and tracking the status of Fixtures all took place via email threads and multiple spreadsheets with hundreds of pieces of unique data. Seaspan has over 125 vessels, each vessel has numerous fixtures, and each fixture used its own set of spreadsheets to create and track data. This led to a number of issues:

  • Inconsistent and missing data

  • Lack of updated information

  • Miscommunication among teams and customers

  • Loss of revenue

The company was in dire need of a solution to these problems. Inaccuracy and inefficiency was leaving income and expenses unaccounted for, creating serious discrepancies in their budgets. So my team was tasked with was to:

Create a cohesive system for creating and maintaining Fixtures
throughout their lifecycle.

This was one of the most challenging features I have worked on, and would require multiple parts for both viewing and editing all of the data related to a fixture.

Discovery & Exploration

 

We began the project with a kickoff meeting where we created some simple goals based on the issues that had already been defined:

 
Goals
  1. Create an online tool with a clear and consistent method for creating and updating Fixtures.
  2. Combine all fixture data in a single location where it can be updated in realtime.
  3. Decrease overall time spent to create and maintain fixtures.
KEY STAKEHOLDERS / USERS

Commercial Team
Responsible for sales and procuring new fixtures.

Post Fixture Team
Responsible for delivering vessels to/from customers, maintenance, and repairs

In order to get a clear picture of the current process for creating a fixture, I felt the best approach to this project would be to start with some background research. I interviewed numerous users and asked them:

  • to show me how they normally create a fixture,

  • estimate how much time they spent each day updating and maintaining fixture data,

  • and where they feel the process could be improved.

The feedback was not unexpected, but it did reveal a more severe problem than originally expected. People were spending much more time on fixtures than their managers thought, and amount of confusion let us know that this feature definitely needed a very clear structure and flow. This information also provided me with a good baseline from which to measure the success of the project later on.

 

FEEDBACK


 

Number of people following the same process:

2

out of 18 total interviewed

Average time spent per day:

 

Major Pain Points:

  • Confusion about what information is required, and when

  • Lack of team updates when changes are made during phone conversations

  • Don’t know who else is doing what

  • Don’t know if data in spreadsheets is updated or accurate

  • Data of the same kind exists in various formats


Diving deep into data

 

My next step was to organize the data and define a hierarchy for this feature. I was already planning on designing a form as part of the feature, but needed to figure out what fields it would need.

I worked with our Business Analyst to review a number of sample fixtures and associated spreadsheets, and we put together a list of all data points. We then iterated on the list with our stakeholders to define each data point and decide what information was required during each phase in the fixture lifecycle. We ended up with a total of 57 pieces of data that were recorded for each fixture.

A form with that many fields would, of course, make for a terrible user experience — I needed to separate the fields into manageable sections. So I ran a few digital card sorting sessions with our stakeholders to categorize the data and break it down into manageable groups.

Round 1

Round 2

 

Round 3

 
 

Now that we had some manageable data groups to work with, it was time to start planning the user flow. Fixtures have three main states: Future, Current, and Complete. Each state requires some specific data to be entered at certain times, and other data may be entered at any time. To created a shared understanding of how the data related to each state, I created a flow diagram of the fixture life cycle, and then worked with stakeholders to map each piece of data to a step in the flow.

The Life Cycle of a Fixture

Creating structure from chaos

 

With a clear understanding of the relationship between the data and states of the fixture, I was ready to start putting all the pieces together. There are a lot of aspects that need to be considered when creating forms, and with this much data, it would be very important to keep them all in focus. So I put together a list of basic principles that I planned to follow, and shared it with the team. This list would guide our decision-making on future iterations of the design:

  • To ensure usability and eliminate confusion:

    • The form should be arranged form in a logical sequence.

    • Only require essential/basic information to start, then allow users to build on the data when appropriate.

    • Labels for fields should be clear and specific.

    • Include contextual definitions as needed.

    • Error messages should be informative.

  • To ensure accuracy and consistency of data:

    • Use pre-formatted fields and require specific data types as needed (e.g. a number field only allows numerical input).

    • Create flexible, dynamic form fields to indicate what is required (some fields are only required if another field has a specific entry).

    • Use both client-side and server-side validation.

End Result

 

After many months and countless iterations, the Fixture feature was completed and released. I revisited the users I interviewed originally to do a follow-up interview. The overall reception very positive, and everyone felt was a major improvement compared to their old workflow. Our IT department was also extremely pleased because the consolidated data source decreased server load and increased processing times significantly. Additionally, maintenance going forward would be much more simple.

There is still much room for additional improvements and optimization, but that is a story for the future.

 
 

Number of people following the same process:

100%

18 out of 18 total interviewed

Average time spent per day:

 

Major Feedback:

  • Process is much more clear and “easy to follow”

  • “Now I just have this page bookmarked, no more opening 5 different files”

  • “I am much more confident that data is accurate”

  • It’s clear what has been done, and what still needs doing

  • “Everyone has to do it the same way, which makes it simpler”