CSX

CSX, your go-to supplier for freight transportation in North America, came to the Three Seas (parent company of Cerebral Lounge, Clean Cuts, and The Gigawatt Group) to come up with a creative and Product solution for gaining client trust. Not only was this a client project, but it became a sample product for pitching to current and future clients. I was the lead art director on this project, guiding everything from the 360 degree video to the overall narrative.

Jump to Final Designs

ROLE
Art Direction
UX/UI Design

DURATION
3 months

Background

CSX had been receiving poor customer feedback in early 2017. A shipping survey conducted by Cowen & Co. found that 24% of respondents had described CSX’s services as “poor” (ranking 18% higher than any other shipping company) and more than 80% had experienced problems with the railroad’s service. Furthermore, additional survey data, concerns within the STB’s letter, and interviews with customers listed the following top concerns with CSX since the CEO change:

Poor customer service
Unreliable/lengthier transit times
Inefficient rail car routing times

Why a 360 App?

To show that CSX was a reliable and safe freight transportation service, we decided to create a video experience that allowed customers to see the process from start to finish. Unlike standard video where you can only see what the camera wants to show you, 360 degree video allowed customers to have an unfiltered, free-to-explore view at every step of the shipping process. Furthermore, making it an Product experience allowed users the option of learning more about key concerns within a scene by selecting highlighted objects and allowed the Three Seas to feature their new 360 video service to clients.

User Testing Results: Directionless Prototype

Initial prototypes and the 360 degree video footage were created/captured by another department within our company and handed to us to polish and give the app more direction. The initial prototype that was handed to us had many default features that came with the app development software coupled with random CSX 360 degree footage. These were some of the issues we discovered with initial user testing:

CSX pain points

1) Lack of direction and user flow. Users didn’t know what the goal of the app was or why they were interacting with it.

2) Unknown functionality ignored. On desktop, some users didn’t realize the app could be navigated by clicking and dragging and areas that could be interacted with were left untouched.

3) Too much functionality led users to focus more on the UI menu options than the 360 video content itself. Also, the small menu made it difficult for users to see.

4) Users didn’t stay on individual pages very long and selected random pages instead of following them in the order they appeared/were intended to be navigated through.

Solution: Complexity to Simplicity

Based on the user testing feedback we received, we decided to consolidate the pages to create a more streamline, linear story. To do this, we created a flow chart to establish the overall flow of the website and wrote the script.

CSX flow chart

Once the script was reviewed, edited, and finalized, we recorded it in one of our onsite studios while optimizing the video for the new direction, recording side effects, and building out the wireframes.

Studio the audio was recorded and where we performed user testing.

CSX 360 degree video of intermodal terminal

Sample of 360 degree video before optimized for application.

Wireframes to Final Implementation

Due to technical limitations with prototyping 360 degree video, we tested the user interface on the video itself. Without the flexibility of having low resolution prototypes, we had to make sure the UI components were as close to the final product as possible.

Mock Ups

Tutorial Screen

Video UI Elements

360 Degree Video Screenshot

UI Pop-Up

In-Video UI Elements

To attract users to the content they could interact with, we created a subtle pulsing animation with animated modale pop-ups.

Final Thoughts

To make the contents of the application more accessible to a wider audience, we converted the application to a 360 degree YouTube video format.

Ultimately, the app that was created was a huge success for the Three Seas because it allowed the company to demo its product features to current and past clients. Due to this project, Three Seas took on more 360 degree video projects for clients such as Discovery Communications under their VR division. Moving forward, we intend to add the following features to make it more accessible to a wider audience:

Closed captioning
Accessibility setting options
Faster loading times
Converting from Panotour to a custom framework
Multiple language selections

← Collection of Logos | Live Happy Magazine →