Zeyang Zheng
Sep 5, 2018 · 8 min read

This case study will walk you through my design process for Sim-Store. This is one of the projects I did during my placement at Schlumberger as a UX Designer.

Portfolio version and presentation available upon request.

Image for post
Image for post

Overview

“Redesign the Sim-Store UI to streamline the debugging process for internal developers.”

Sim-Store is a version control system for storing the simulation data of RE Workspace, an application for reservoir engineers. Sim-Store runs in the background of RE Workspace, meaning it is not likely to become a standalone product for sale and hence it is unlikely to have direct external users.

Currently, all the basic Sim-Store functions can be performed through the command line interface, but using the CLI is unintuitive to visualise simulation details, which inhibits the developers’ debugging experience.

Although there is an existing UI to overcome this problem, it is not fit for purpose, and has limited functionalities. My goal is to redesign the Sim-Store UI to streamline the debugging process for internal developers.

Background

Sim-Store UI allows users to store their simulation files in different collections (think of it as different projects), and inside each collection there are different versions of the collection called revisions.

Image for post
Image for post

Each revision of a collection has three main functionalities:

1. View all the simulation file details for that revision.

2. View simulation’s input and output data for that revision.

3. View file changes with the ability to compare changes across different revisions.

As I am the sole Designer in this project, my role evolves along with the project over time, it includes user research, concept validation, prototyping and demonstration. I am also working with two developers who dedicate their time to implementing my design.

Design Process

No two projects have same design process, this illustration shows key elements I went through for this project.

Image for post
Image for post
An original illustration for my design process

Research

To be able to understand Sim-Store better, I interviewed relevant people within the company and observed their experience with the previous UI over the course of a few days. From the marketing team to reservoir engineers and all the developers on my team, I gained an understanding of the interactions between them and the UI.

Image for post
Image for post

Throughout my design process, more specific questions related to a particular problem were then asked to targeted stakeholders.

Define Problem

Based on my observation of all stakeholder’s UI experience, my time constraints and business uncertainty on the project, I decided to set developers as my primary persona - although in the long term there is a possibility that Reservoir Engineers might want to access this UI, but this is undefined at business-level.

The tasks developers perform on this UI is simple and systematic. A primary use case for them is to check if the collection they created appears in the expected location. By achieving this, they often need to copy the collection ID and paste it back to the CLI, and they might go back to the Revision page to check details.

My case study will focus on the two key pain points developers experienced by simply performing this action, although I will also cover some design decisions I made not related to the two pain points.

Key Pain Points:

Image for post
Image for post
Image for post
Image for post

Ideation

However, this still required two actions. To speed up the process, I created a Copy ID button. Once it is clicked, the ID will automatically be copied, only requiring one click.

Validation

Before I decided where to place the Copy ID button, I did some more in-depth user research, as shown below:

Image for post
Image for post

Prototype

Iteration

The existing Landing page shows collections in a card format. My initial idea was to display it as a table format because the table can display information more concisely.

Image for post
Image for post
Iteration: table style

However, based on my test, the table actually shows less information. Therefore I fully invested my time into exploring alternative ideas, by redesigning the card format.

Image for post
Image for post
Image for post
Image for post
How the page looks when its populated with different iterations

Navigation is defined by “the process or activity of accurately ascertaining one’s position and planning and following a route.” The existing design does not show you where you are on the page, and it only lets you move forward or jump to the very beginning. According to my observations, all the developers are using Windows system. Therefore, the most natural way to solve this problem is by implementing a Windows system style navigation (called ‘breadcrumbs’) in this UI.

Inspiration:

Image for post
Image for post

Adaptation:

Image for post
Image for post

This design helps the user to identify their position and provides them with the ability to jump back to any previous page in one click.

My second goal is to shorten the width and depth of the site’s architecture, therefore reducing the need to navigate between pages.

Simplifying a whole site’s architecture is a big design change. It is hard to visualise the overall picture without visualizing the small elements, such as the size of a card or a button. Therefore, I took a bottom-up approach by refining small elements first to then try to fit them into a bigger picture.

Image for post
Image for post

As the screenshots suggest, the current design suffers poor space utilisation, especially on the Revision page.

Ideation

Image for post
Image for post

The Revision page has four key elements: files, simulations, changes are all on different tables, and the information about the revision is at the bottom of the page.

My research suggests that it is important for developers to see basic information about the revision. Therefore it should be always visible for developers when they are in one specific revision.

Image for post
Image for post

Identifying different: files, simulations and changes only requires a small amount of data. Here, I am trying to minimise the space to display this data.

Image for post
Image for post

The new design has dramatically reduced the consumption of space, opening up the possibility to condense two pages in one.

Image for post
Image for post

I redesigned the card next to the tree graph so that the whole graph could fit into the redesigned page.

Image for post
Image for post
Image for post
Image for post
The complete design for the Files part of the Revision page
Image for post
Image for post
The complete design for the Simulation part of the Revision page

After a simulation is chosen, the user can toggle between Inputs and Outputs data and go to a specific input or output file. The Tree Graph and Fetch Contents function remain the same as the Files page.

Image for post
Image for post
The complete design for Changes part of the Revision page.

The primary function of the Changes view is to compare different versions of a file. Ticking two of the boxes next to the version card and clicking on the blue ‘compare contents’ button at the top of the page allows the user to compare content as shown below:

Image for post
Image for post

Based on research, a side by side code compares programme has been widely used in the company.

Therefore, I dedicated full pages for it. When the user clicks on “Back” it will go back to the previous page.

Here is a comparison of the old Sim-Store UI sight map and the new one: I have successfully achieved my goal to shorten the width and depths of the site architecture.

Image for post
Image for post

Implementation

By the time I am writing this case study, my team has already implemented most of my design.

I have prioritised the work on the “copy ID” function and the change in navigation in order to make the biggest impact on streamlining the debugging process in the short term.

Here are some screenshots of what has been implemented:

Image for post
Image for post
Landing page
Image for post
Image for post
Collection Page
Image for post
Image for post
Revision page
Image for post
Image for post
Revision page

Feedback

“I like it, it covered all my use cases.”

“Can’t ask for more, It works perfectly for me”

Learning Outcome

  1. Communication with developers is crucial to make good design decisions. As they have a better understanding of the implementation of a complex feature.
  2. Bottom-up design solutions may not be the first choice for most designers, however it worked amazingly in this project by laying down a solid foundation. This reminds me to be creative and tailor my approach for every project. and encourage me to explore more unconventional approaches.

Last but not least, it has been a fantastic journey to work with my developers Zélie and Jinsun, who dedicated their time to implement my design.

I also wrote a shorter case study here, it’s a project I did with GDS.

Zeyang Zheng

UX

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store