Challenge
At the heart of Almego is a vast number of chemical properties which are either prefilled or edited by the users who are chemical specialists.
Before I joined the Almego team, the chemical properties had been organized in multiple levels of nested expandable panels. On the surface this seemed like a good idea, since it reflected the hierarchy and the initially closed panels would provide a good overview of top-level sections.
However, in reality, properties often proved hard to find: The constant opening and closing of panels, scrolling up and down, and in the process loosing track of where you were before and where you were heading next.
Also, the technical implementation made it impossible to provide any kind of search or filtering mechanisms. So, we realized that we had to come up with a better design offering improved overview, findability and much faster navigation.
Process
I analyzed the current design to understand what the problems were.
Pain points included headings scrolling out of view due to long content sections (thus not providing contextual cues), and no easy way to get back to start, if the user would get lost within multiple expanded panels.
I explored and sketched out different concept solutions trying out various layout and navigation designs. In the process I was inspired by the navigation concept of Miller columns, where each level in the hierarchy is represented by adjacent columns. However, that was abandoned since it could also lead to quite a lot of clicking back and forth – what NNGroup would call pogo sticking.
Mega menus was another potential solution for providing quick access and overview – but these turned out not to be sufficiently scalable and adding too much redundancy, opening and closing on top of the actual content.
I created working prototypes which were then tested with users.
As a final step, I produced the HTML/CSS framework for the UI implementation.
Outcome
A much improved, rather straightforward (i.e. not overengineered) design allowing users to find needed properties faster, with fewer clicks, while always keeping track of where they are.
This was done with a combination of a separate, fixed top-level section navigation column, with immediate subheadings shown as jump-links for the active top-level section, and an always expanded at-a-glance indented tree structure, see images and videos below.
A user test with four participants showed that 3 of 4 found the new panels to generally be an improvement, responding: It's much better!
