Phenom - UI Upgrade
Tribus Movitas - Digital instrument cluster
OVERVIEW
Phenom-World is a leading global manufacturer of desktop scanning electron microscopes and imaging solutions for submicron scale applications. Phenom’s newest microscope includes an updated UI that maximizes the workspace. A high-level design concept was made by an external design agency.
For substantiated and elaborated UI directions, the Sioux UX Competence was Involved. For this project I worked together with Sioux’s UX lead, Ben van Riemsdijk, In a short time span we were able to find design points of improvements in the application and were able to propose numerous design solutions to the stakeholders.
ROLE
- UX / UI Designer
- Interaction designer
- Usability testing with users
- Stakeholder meetings
- Working directly with UI developers
June 2019 - September 2019
BACKGROUND
Sioux Technologies has been involved with the development of Phenom since the beginning. Sioux Technologies developed the complete software suite for the Phenom. This includes hardware control, image processing (Pro-Suite), user interface and multi-language support. Sioux also developed all electronic hardware (including high-voltage electronics and the wiring) and produced and tested all electronic boards. On top of that, Sioux created the mathematical algorithms and the remote diagnostics.
With a new UI on the way and close to the release, the UI developer on the Phenom found himself in a sticky situation. A filled backlog, too little time, and every week alternating priorities made it difficult to focus. Some of our key achievements were:
UNDERSTANDING THE PROBLEM
The Sioux UX competence was being involved to create a well-founded design. With the nearing deadline and an overflowing UI backlog for the UI developers the decision was made to prioritize the developments.
Usability tests were executed to reveal areas of confusion and uncover opportunities to improve the overall user experience of the UI. We were able to find 4 participants and gave each 8 tasks to complete. The candidates and their screens were recorded using the software Camtasia.
The results from these tests were collected in a rainbow sheet, from there on we made a selection of major and minor points to tackle. This selection was presented to the stakeholders and developers.
These recommendations consisted of:
PROTOTYPING
Based on the recommendations above I started working towards potential solutions. The low-hanging fruits were fixed on the way. The next thing to be fixed was the operational screen. We found out that users wanted to quickly access this screen and not have it protrude the image area as much as it does now.
We found out that the top side of the screen contained a drop down menu which was hardly ever used, so we opted to replace that dropdown menu with the operational settings screen. Our first attempts consisted of a dropdown menu with different columns, this turned out to not be effective. We went back to the old horizontal structure but with the addition of categories to the menu.
VALIDATING DESIGNS
Figma comes with the possibility to build clickable prototypes, this makes it easier to understand how certain elements should behave and animatie. During the redesign of the gallery viewer this feature was particularly useful.
The gallery viewer serves as the place where the user can view their images. Besides viewing, it is possible to save, duplicate, annotate, and view images in other folders. The possibility to annotate images existed in a separate plugin. Our task was to incorporate this plugin and its features into the gallery viewer.
The process of validating consisted of designing, testing, and iterating. The images below show one of many of the clickable prototypes.
DEVELOPMENT
I used Figma to create the designs and a mix of Figma and Adobe XD for animation. After handing the designs off to the UI developers they implemented the interface using QML.
RESULTS AND LEARNINGS
In a short time-span, we found the paint points of the project, developed numerous solutions, and improved the intuitiveness of the interface. This gave the UI Developers more time to work on their filled backlog.
After the first usability test result the stakeholder started to believe in the value of UX and the need of testing. This gave me a lot of energy to come up with the right solutions. During this project I learned a lot from Sioux’s lead UX Designer Ben van Riemsdijk.
The updated UI of the Phenom made a small guest appearance in the Sioux Technologies corporate movie "Say Yes to the Quest" (around 2:51):
CREDITS
Client: ThermoFisher Scientific
UX Lead: Ben van Riemsdijk
UI Development: Jesper Huijgens
Project Management: Martijn Kabel
Made with ♥ — © 2020 Patrick Mendel
Made with ♥ — © 2020 Patrick Mendel