How I redesigned the interface of a complex engineering tool

# Jobs
How I redesigned the interface of a complex engineering tool (Feature Image)

A lot of available but unprocessed data introduces new complexity in companies. To face this challenge, a Start-Up in Munich called Soley offers a software tool for engineers to connect existing data and turn it into smart data. With automated routines, it extracts knowledge for efficiency improvements. Reusing more parts for different products or removing unprofitable variants from the portfolio are examples of analysis outcomes.

In Summer 2017 I was a working student at Soley and part of a recent user experience initiative. The usability of their software was often criticized by customers – what a good opportunity for me to work on that!

Understanding the company environment

As a first step, it was important for me to understand Soley’s vision, their current product, customers, and industry to get a higher level understanding of the company. UX engineers contribute a lot to the way the product is perceived and have to adjust to the company’s positioning. Are they selling their tool to young start-ups or established, more conservative companies? Are potential users more familiar with Cloud Apps from Google on their iPad or are they rather working daily with Excel 2007 on their Windows machine?

My findings showed that Soley’s software is advertised as a tool for experts to run domain-specific analyses. The customer target group are mainly medium-sized manufacturing companies that like to keep maximum control over their data. That means for me as UX engineer that efficient problem solving has to be the first priority: A straightforward interface with good usability will be more important than ambitious aesthetic design.

Besides this general direction I found to be constructive, I focused on decreasing the initial effort to work with the tool. Recent customer interviews revealed that there is a high training time required. And time is money.

I considered four main ideas for designing a simpler interaction flow:

  • Guiding the user
  • Choosing good defaults
  • Reduce required knowledge
  • Make complexity understandable

In the following paragraphs, those ideas are further explained and illustrated with some of the mock-ups I created during my time at Soley.

Guiding the user

Soley Studio’s big plus is its versatility – the analysis capabilities are not restricted to one specific use case. In its current version it is also its drawback, however. Offering only generalized actions, sometimes hidden in sub-menus, makes the user feel lost. It is hard to guess where to start, what to do next and notice when one task is done. Often, it is linked to the support center, where tutorials are available. This is fine, but a better approach is to guide the user with task-specific dialogs, icons and descriptions, because nobody likes reading manuals.

Although this tool is complex, the inner complexity shouldn’t be exposed to the user. Complexity is not an excuse for bad usability. And easy to use products are not necessarily simple. But the latter consider the human memory’s limited attention span and information processing capabilities.

When first starting the tool, a three-coloumn-layouted welcome page with large empty areas and small fonts is presented to the user. Where to click now? There is no "recommended action" that would guide the user to make the right choices. In my redesign, a dialog window is opened with two primary options on the left side: Start a new project or open an existing one. On the right side, additional information and actions are presented, depending on whether the user opens the tool the first time (a tour can be started) or after an update (new features are explained).

Welcome screen in Soley Studio (before / after)Welcome screen, before redesign: Text only, small font, large empty areas, low contrast between font color and background color, hyperlinks are sometimes primary actions, sometimes actual links that open the browser. After redesign: Dialog window with most important actions on empty background, meaning of actions is supported by icons.

Also, it is important to provide a configuration of windows, tabs and menus that is suitable for the majority of users. Opt for proven number instead of showing every element or no element by default. In Soley’s case, after opening a new project, a lot of pads with options or details were opened that had no relevance for the user in its current situation. The same applied for menu items or toolbar icons – if their intended function is not available in most states, better hide them.

Choosing good defaults

Soley Studio can visualize interconnected data-sets as network graphs which helps to understand the dependencies between elements. It’s an advertised feature that customers love. Currently, however, they don’t look like something, someone would post on Instagram. Styles for nodes and edges are highly customizable, but chosen randomly by default, which often doesn’t result in beautiful representations. I wasn’t happy with that. Graphs are cool, Graphs are fun! Let’s make them look like that by default! Users “rarely utilize fancy customization features, making it important to optimize the default user experience”, just like Jakob Nielsen, a popular usability researcher, points out.

Visualization of a network graph in Soley Studio (before / after)Graph, before redesign: Different shapes with low distance to each other, making it look heavy and crowded. After redesign: Simple, minimalist and attractive appearance

Having big graphs with hundreds of nodes and edges make it easy to lose track of the information stored in it. Introducing different shapes for nodes like squares, circles, and stars seems like a good idea, but makes the graph look even more cluttered than before. To fix that, I designed the default graph to have round colorful nodes and solid grey edges which appears prettier and clearer. Note that it’s still possible to change shapes, line styles and basically everything afterwards if desired – the new default option just leaves more attention to the structure of the graph, which is often most important.

Reduce required knowledge

A relevant factor for the ease of learning of a product is the amount of required knowledge. If the user can start right away or has to learn specific concepts or terminologies first makes a huge difference. He tries to understand the interface based on previous experiences with similar systems. Therefore, it is advised to stick to elements and interaction models that the user already knows and support the user in his learning process for additional needed knowledge.

After starting a new project in Studio, an object-oriented meta model had to be coded before being able to import, process and visualize any data. This required reading the manual. It would be better, if the user can start right away and see first results, for example a graph, as fast as possible. One step in this direction was to create automatically a meta model during the initial data import and not require it before importing data. Additionally, a graphical interface abstracts the previously code-only meta model editor.

Meta model (before / after)Meta model editor, before redesign: Object-oriented code in a little known programming language. After redesign: Dialog window with drag ‘n drop for node and edge classes.

But not only meta modeling required previous knowledge: Someone not familiar with Integrated Development Environments (IDEs) might find the general structure and behavior of the UI difficult to understand. Customers like variant managers, often from an engineering background, not necessarily bring computer science knowledge with them. That a “project” has to be “built” before being able to see a graph is not obvious. For coding graph transformation rules, the syntax of a niche programming language has to be learned. The user has to deal with low-level compiler error messages, where help is hard to find on the internet. Letting the user write code in a wide-spread programming language like Java or Python would reduce the amount of necessary knowledge vastly. Also, many new file types (*.slg, *.gm, …) and terms (Rule, Sequence, Workflow, Solution) are introduced that have to be explained – which could be avoided.

Make complexity understandable

When it’s not possible, to further simplify the underlying concept of a part of the system, then design the user interface in a way that makes the exposed complexity well understandable.

The Smart Selector in Soley Studio is basically a query builder. Similar to databases, a combination of conditions can be connected with boolean logic to match specific elements in the pool. For some querys, nested conditions like

(A or (B and C))

are needed, which can be difficult to understand. The old design made it hard to follow, what query currently was configured – the AND / OR operators are misplaced, especially for nested conditions. Also, it wasn’t clear, what the “+” buttons mean. Elements that match the defined query are listed in “Selected Elements”. Instead of listing every element with only marginal information like “Part node”, I chose to show an expandable summary in my redesign.

Smart Selector (before / after)Smart Selector, before redesign: Query was hard to read. Nested conditions were confusing. After redesign: Clearly readable query, grouped and understandable for users with less boolean logic knowledge. Buttons now recognizable as such.

Final thoughts

I had lots of fun working with Soley on user experience. The mix of creative and technical tasks make a job as UX designer truly exciting. It’s more than just drawing on paper and clicking through the tool: basically one contributes to the product’s branding. Choosing specific shapes, colors, fonts, images and animations over others has an immediate effect on how a product is perceived. In the end it’s all about how a user feels towards a product, what emotions and associations are triggered. If it makes him happy, well done.