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.
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.
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.
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.
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:
1.A primary use case for the Landing page is to copy the collection ID. However, because the entire card is a hyperlink, it takes the user to the next page when it is clicked.
2.A super linear architecture with only one navigation button called ‘COLLECTIONS’. At any view, the button returns to the Landing page, this frustrates people because of the inconvenient navigation.
Ideation
1.To solve pain point one, my initial thought was to disable the ID area’s link function so the developer would be able to click on to it and copy the ID without jumping straight to the next page.
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:
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.
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.
2.To solve pain point two, I have two goals to achieve. The first one is to Improve the navigation system.
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:
Adaptation:
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.
As the screenshots suggest, the current design suffers poor space utilisation, especially on the Revision page.
Ideation
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.
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.
The new design has dramatically reduced the consumption of space, opening up the possibility to condense two pages in one.
I redesigned the card next to the tree graph so that the whole graph could fit into the redesigned 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.
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:
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.
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:
Feedback
“I like it, it covered all my use cases.”
“Can’t ask for more, It works perfectly for me”
Learning Outcome
- Communication with developers is crucial to make good design decisions. As they have a better understanding of the implementation of a complex feature.
- 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.
