Design for professional simulation software
The software is recognised as the most powerful computational fluid dynamics software due to its simulation capabilities. This comes as no surprise, considering it emerged in the ‘90s from the Chr. Michelsen Institute for Science.
However, here’s the problem: the original users are now retired, and their newer counterparts prefer less capable software alternatives due to easier learning processes.
This problem led them to our UX design agency. We were tasked with rethinking the entire user experience, and consequently, thus extending its shelf life for another 25 years.
OUR CONTRIBUTIONS
Requirements Mapping
User Research
Benchmarking
UX Design
Prototyping
UI Design - Light and Dark
Design System
Quality Assurance
BREAKING THE VICIOUS CYCLE OF INTERDEPENDENCE
The software had been in existence for 25 years and its history manifested as a web of complex interdependencies. How do you overcome that as a UX designer?
First of all, we convinced the product managers that if we were to design for the future, we would have to move past their intuitions of what users needed in the past.
We undertook four weeks of user research and mapped the needs of future users. The second hack we used in our process was to start in the middle before actually embarking on an unpredictable end-to-end design. We identified 10 key UX design challenges and developed a few possible solutions for each of them - in six weeks we charted a UX design option space.
This led to satisfaction on both ends: the premise of the wider UX transformation was in place and the future oriented understanding of user needs supported it. More than this, there was also a rough sense of what key UI areas might look like, aiding us in our design journey.
UNDERSTANDING 15 YEARS OF TECHNICAL DEBT
It’s said that “Designers hate technical debt and prefer a blank slate”.
That does not hold true for our UX design agency. History is and will always be a rich source of information that is simply waiting to be used for the design of professional software
The question is: How do you assimilate so much in so little time? You sit down and learn.
The power lies in self-directed learning, which, in the case of this design project, meant: Reading the manuals, studying with Youtube tutorials, running tests/exercises in the software and most importantly, gathering a lot of questions.
We took these questions to key stakeholders. Some of them were meant for product managers, others for developers. Ultimately, over the course of one week, they spent about four hours with us. That was precisely enough to get us up and running.
MAPPING THE NEEDS OF PROFESSIONAL USERS
The thing with professional software users is that their needs are intricate. Workflows involve numerous steps and are rarely linear. Users want and need to do a lot of different things. However, no patterns seem to exist. All interactions, unlike on web dashboards, are on one screen without linked pages.
Product managers might appear to have a deep understanding of one routine, but they only grasp a fraction of the real diversity of user needs.
Knowing this, we engaged with real users to discover the necessary nuance. Leveraging our experience in user research and technical research, we approached the project pragmatically and efficiently.
RESEARCH REVEALS PRODUCT OPPORTUNITIES
Stakeholders were surprised when the research revealed that certain features, the most expensive ones to maintain, are hardly important for the users
This serves as a clear example of why rethinking the product concept pays off in the long run, even if it undergoes minor or major changes. The exercise does not take long, but it does bring much value:
• It aligns development timelines with market needs; • It prevents resources from being wasted; • It reveals relative priorities, enabling design decisions later in the design phase; • It rejuvenates the enthusiasm of the team for the difficult work ahead; • It helps marketing understand how the product will be relevant to customers in the future.
Wouldn’t it be strange if professional software remained the same while design, code, users and even the whole world evolved and changed?
DESIGN EXPLORATION WITH MINI PROTOTYPES
Instead of jumping headfirst into a lengthy open-ended design journey, we took six weeks to forge the backbone of the new UX. Our approach was unexpected.
We identified the ten key UI challenges that shape the user experience of the entire application. Afterwards, we created a series of mini prototypes for each challenge and mapped the available design options.
Over six weeks, we developed a total of 45 solutions. We collected feedback from users, engineers, and stakeholders. Then, we carefully reviewed the pros and cons of each individual solution. This comparison helped us see which ones worked well together.
After six weeks, we had developed the backbone for the user experience of the software, based on tests, experiments, and factual data. This marks the point where the rest of the design process becomes predictable.
SMART UX DESIGN IS DISCOVERED, NOT CREATED
Like any result from engineering efforts, a user interface must reflect reality. It's supposed to be based on what users need day-to-day, what the code can do, and what sells in the market.
The advantages of mapping design options for the most important parts of the user experience are: • It establishes facts as a foundation for design; • It provides clarity for all stakeholders with visuals; • It goes beyond clichés, in contrast to a linear process; • It supports coherence;
Ultimately, this user experience design approach makes product development predictable while also solving the chicken-and-egg dilemma of transforming complex professional software UIs.
INTO THE END-TO-END USER EXPERIENCE DESIGN
After establishing the basic concept for the trickiest 20% of the user experience, the remaining 80% still needed to be addressed.
It took us four months to develop the end-to-end user experience for the entire software application and its modules.
At this point in the journey, everything was predictable, and there were hardly any notable surprises for the product team. However, behind the scenes, we had to deal with challenges each week. Our goal was to make the interface incorporate all the features in a seamless manner.
During this phase, our deliverables were high-fidelity wireframes and prototypes. However, the real crux lay in collecting feedback and iterating on the designs to cover all bases.
BALANCING ROBUST LAYOUTS WITH FLEXIBILITY
Professional software is tricky because, essentially, there is only one view and not a bunch of pages. Consequently, this single view must accommodate every feature the software has, both currently and in the future.
As designers, we strive for a layout and a user experience architecture that has logical structure. This helps users use their intuition when asking themselves “where is what” and “what happens if”.
At the same time, we aim for flexibility - a user interface that accommodates all features at any time. Moreover, the user interface for professional software must be practical in all use cases, avoiding a rigid approach.
Achieving the right balance between robustness and flexibility is what occupies four months of our hard work.
VISUALISATION OF DATA AND TECHNICAL DETAIL
Making this technical software user-friendly involved visualising data in a manner relevant to engineers. It also entailed crafting UI components that express technical concepts clearly. For example:
• Scenario parameter definition; • Wind diagrams; • Chemical mixtures; • Texture libraries; • Monitor points; • Project outlines; • Status bars; • Filtering;
Once again, our design approach of fielding options yielded great results. This allowed for easy comparison of different design options based on their actual merits: 'Do they help technical users understand more easily, or not?’
This process delivers small design details that not only enhance user experience but also seamlessly integrate into the overall framework, elevating users’ moods and ensuring a cohesive experience.
METICULOUS DESIGN OF UI COMPONENTS
The UI design of the professional software was crafted based on purposeful principles to ensure consistency that satisfies technical users.
For example, when designing components for interaction with 3D geometry, we utilised colour principles that support memory. Moreover, our grid ensures the consistency of UI components, regardless of users' interactions with the 3D geometry.
We iterated through several design options for the UI, experimenting with various combinations of strokes and opacities. Then, we tested the components across all possible scenarios to determine the optimal solution. This research ensures that no unwanted, faulty UI elements are present in any of the variants.
The UI design goes beyond a simple applying of brand colours. Instead, it actively enhances user workflow while imbuing the software with a timeless look and feel.
SUPPORT FOR SOFTWARE DEVELOPERS
The UI design was crafted to be responsive and easily scalable for future development. To ensure the design works seamlessly in real-life scenarios, we provided developers with comprehensive support.
For example, instead of providing vague principles and leaving the developers to figure out on their own how to apply them when they code, we offered a design system that provides an overview of all possible scenarios. It includes detailed examples to ensure the UI functions effectively in any circumstance.
By delving into this level of detail, we ensure that the underlying system of the design is logical and covers all cases. By providing developers with detailed exposure to the system, we streamlined their efforts, allowing them to focus solely on coding.
DESIGN FOR LIGHT AND DARK UI
We developed the user interface of this professional software with both dark and light UI variants. This caters to different user cohorts who work in very different environments.
A system with rules is in place to establish the direct connection between the UI states. As a result, every colour in the light UI mode has a corresponding counterpart in the dark UI mode. This relationship is based on a formula.
The consistent colour definitions ensure that there will be no inconsistencies when switching between light and dark UI modes.
This approach also lightens the developers’ workload, eliminating the need to code separate UIs.
UX AND UI DESIGN FOR PROFESSIONAL SOFTWARE
Given this professional software’s rich history, the main ambition during this project was to reinvent the user interface while preserving the features that stood the test of time.
The major challenge was in dealing with the complexity of the system. This introduced uncertainty into the UX transformation project.
We implemented timeboxed phases to alleviate some of the complexity. During these sessions, we studied potential solutions for the key UX challenges. Within two months, we reached a point where the design and development roadmap for the following year became predictable.
The final phase was centred around precise and meticulous work to roll out the envisioned user interface. This involved studying technical details and working alongside technical users to figure out which expressive components could fit into the flexible UI structure.