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:

• Acquiring budget. It isn’t easy to get extra funding for a project that’s running out of time and money but by being clear in what we wanted and presenting this to the stakeholders we were able to get a cut of the budget that we used to improve the application and help out the developers working on the project. 
• Convincing stakeholders. Some stakeholders had a difficult time agreeing on the proposed improvements. By backing up our arguments with data and scientific sources we managed to achieve a general consensus.
• Offering clear design improvements. With the design app Figma I was able to work fast and pump out several design variations. This was of great value for our meetings.

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:

• Fix low-hanging fruits. There are some “low hanging fruits” in certain interaction areas / graphics (e.g. arrows that go unnoticed by their size and color, state buttons with low affordance). These should be summarized and analyzed after which a design proposal can be made and directly implemented and tested with relatively low effort per item.
• Redesign the operational settings screen. Redesign to better fit the new concept. Wireframe different solutions. Implement and test the one(s) that perform best in stakeholder reviews. Improve the information structure.
  
• Redesign The multi-button toolbar. Find a way to better communicate their current state and to create a higher affordance in the way they function.
• Redesign the gallery viewer. Incorporate the plugin gallery viewer and its functionalities into the new UI.

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