The Viewport search screen asking "What are you looking for?", listing industrial sites and connected systems, over an illustration of oil pumpjacks
Company

Viewport

Industrial facilities such as factories, oil & gas 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 at 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. Set up a style guide 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 user testing.

Result

Tested with multiple users at 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 of 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 phase.

During these moderated tests, I had users perform 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.

Screen recording of a remote user test with a Cargill engineer, showing a piping and instrumentation diagram open in Viewport beside the webcam views

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.

Screen recording of a remote user test with the Rotterdam waste disposal team, browsing a 2007 report document in Viewport

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 rough sketches for the new file browser, which - next to a good search - was key in retrieving documents.

Pencil sketches comparing two navigation ideas: an expand-and-collapse file tree versus a Dropbox-style drill-down with breadcrumbs

Sketches

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

Three greyscale wireframes of the site page, showing the file tree collapsed, expanded, and with a technical drawing opened in the viewer

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.

The Viewport search home on desktop and phone, with recently viewed tags and a list of sitesThe file browser on desktop and phone, with the customisable tree on the left and folders for HSE, manuals, procedures and drawingsA piping and instrumentation diagram open in the document viewer, with tagged components highlighted in green and red and the same document on a phoneThe Viewport interface in its light and dark theme side by side, with sites, connected systems and a news section

Think I could help?
Let's talk!

Get in touch

Next case?

Aviobook
arrow_forward