image of the laptop ui next to the existing hardware

About This Project

During my time a DDSTUDIO a had the chance to take the lead design role on a remote controlled pathology system. The project scope was to create software design that would pair with, and control the existing hardware. This would allow clinicians to share tissue sample slides with specialists around the world. In a nutshell, they are taking a supercharged mircoscope and hooking it up to an internet portal in a safe and secure way. Pathologists can log in, see the slide, take pictures, make notes and then share all that information with the clinician.

My task on this project was supposed to be just visual design but we ended up also doing wire frames for the most important parts of the UI. This helped the company’s internal team understand the users goals and tools better and gave them a structure to move them forward.


User Information

Name: Roger Carrey
Occupation: Pathologist
Age: 38
Goals in using the interface: Roger wants to be able to quickly look over the slide. Make notes and comments for the clinicain and mark areas that need to be scanned and examined further.
Tools or devices: The tools that Roger has is his laptop with an internet connection.
Prior Experience: Being a pathologist, Roger is vary familiar with how microscopes behave as physical objects so he will expect that the digital version will work much in the same way.


User Observation

Roger has an intensely important job. His job boils down to looking at slides of tissues to determine if there is abnormalities in them. These things are like cancers or inflammations, and irregularities. Finding these areas is extremely important. With that said Roger is super busy and has to process dozens of these samples per day. Sometimes up to a hundred samples! He must be confident that the right notes and documentation are applied to the right sample and the right patient.


Visual Inspiration

images used for visual inspiration

Above is an is the visual inspiration from the client. Through our early meetings with the client we gathered what their visual hopes were for the interface. They loved the HP sprout interface, simple clean icons and limited use of color. They also referenced Google maps and liked how the map was full screen with elements that hovered over the picture to help the user navigate.

Since this was a tight project we decided to only look at the most important areas of the interface. These areas were the view slide, scan area, and preview snapshot screens. These screens are the tools that the pathologist will use most often and are crucial in achieving the pathologists goals. Not all details were worked out before we had to move the project forward, forcing us to use place holder elements in areas where we knew more information would go.


Wire frames

wireframes of the 3 core areas of the ui

The structure is kept very simple for a reason, to get the image of the slide as big as possible. The top menu bar holds the controls for the microscope as well as snapshot tools and navigation of the scan area. The scan area splits the screen in half so that the pathologist can see both slides that are loaded into the hardware at once. From here scan tools slide out to enable the pathologist to mark areas of interest. The last area is the snapshot preview area. This is where that pathologist can view snapshots or screen captures they have taken and make annotations that will be saved to the patient’s file.


Visuals

image of the visuals for the 3 core areas of the UI

The visual design for the UI focused on flat design and creating a quiet interface. The goal was to have the user be able to focus on the slide and not be distracted or confused by the visuals that are being used. The color palette was limited to only three colors using only tints and shades as hover and selected states.

image of the Ui on a laptop showing the select screen

At the time of this writing, the UI is still being developed. Although this product has not gain public praise, it has helped move the company’s internal team forward as they develop the software. Creating a visual structure that is focused on the end users goals enabled the engineers to think deeper about how the tools that they place into the interface effect the pathologist.