Company

Viewport

Industrial facilities such as factories, oil & gass rigs or chemical plants have countless documents to keep them operational.

Viewport is an AI based information portal that links all these technical documents and makes searching them a breeze.

In this case study we will focus on the design of their cloud solution.

Freelance

Year

2019

Visit client
arrow_right_alt

Navigating the redesigned file structure felt pleasant and effortless. I hope we get the updated product soon!

Gert Sterk
Manager Plant Performance - Residual Waste Disposal Rotterdam

Document Cloud

Problem

Viewport's main offering is based on a so called fat client which is a server on-site of these facilities. This makes updating and maintaining it cumbersome. Also, the interface felt dated and was due for a redesign.

Goal

Design a new cloud-based solution with a fresh design language that supports future growth of the company. Setup a styleguide for the in-house development team.

Timeline

Worked as solo researcher / designer during 9 months for about 1 day per week. Next to design, I was responsible for setting up appointments with Viewport's clients and doing moderated usertesting.

Result

Tested multiple users on 2 industrial sites in the Netherlands which served as input for the new cloud solution. After delivery, development was done by Viewport's in-house product team.

step 1

Research

Before starting any design work, I interviewed the founder and CEO of the company to get a better understanding on where the company was headed and how he thought his clients used his products.

After this, I conducted field research by visiting 2 industrial sites in the Netherlands for user testing and a short discovery track.

During these moderated tests, I had users performing some of the top tasks according to Viewport's CEO. The tests were recorded in Lookback, and key findings were reported back to the CEO after the analysis was complete.

User tests - Cargill

During the first set of user tests, I observed how the old interface was used for top tasks & scenarios according to my interview with the CEO.

User tests - Residual Waste Disposal Rotterdam

In the second set of user tests, I did the same test plus I collected feedback on the first UX iterations with an A/B test setup.

Step 2

Exploration

Armed with the findings of the first user tests, I created low level sketches for the new filebrowser, which - next to a good search - was key in retrieving documents.

Sketches

Quick & dirty paper sketches for file browser improvements were discussed with the CEO during an informal meeting in a coffeeshop.

Prototypes

Before starting the second set of user tests, I created interactive prototypes on Invision to test new UX concepts for the file browser.

After the user test, I found that desktop users - often people with technical architect roles - had a preference towards a conservative collapsing tree structure as they were used to it and it utilized the large screen they had.

Mobile users - often electricians or maintenance staff - with phones and tablets in the field, preferred the more progressive in-and-out style navigation which worked best on their devices.

The CEO also had a strong preference towards collapsing tree structures as well, as he mentioned it worked very well for the product.

Eventually we went for a hybrid solution for desktop states to create a learning effect and make the development of the mobile states easier.

Based on these findings, we started working towards a larger redesign of the full platform.

Step 3

Delivery

A basic design system / style guide for the Viewport development team was created so new features could be developed without relying on a designer.

Mobile states were also specified in detail as the file browser navigation logic differed slightly compared to the desktop state.

Finally, since users were employed around the clock, a dark theme was added to make Viewport easier on the eyes in dark environments.

During this project, I decided to make the switch from Sketch & Invision to Figma and made my very first delivery on Figma.

Think I could help?
Let's talk!

Get in touch

Next case?

Aviobook
arrow_forward