top of page
My Role: Co-UX Designer
The Team: Catalyst CEO, 1 UX Designer & 1 Visual Designer, 2 Developers
Tools: Figma
Project Duration: 4.5 months
Problem
Lab researchers were using outdated software to look under the microscope for their work. They complained of complicated and unfriendly UI.
How might we redesign the microscope instrument software to allow researchers to easily create experiments, look at samples, capture and review images and videos, and leave comments/tasks for fellow researchers.
Requirements
The client had little requirements for the redesign of their microscope software. They wanted to make sure we kept in mind the importance of the real estate in the center of the screen that would display what the microscope was showing. They wanted to make the UI more user friendly and were open to designing new functionality. They had a color palette that we referenced.
Process
Discovery
Understood the client's requirements, vision, branding and problems.
Low Fidelity Wireframes
First focused on layout, information architecture and navigation and created user flows and wireframes.
Visual Design + Styling
Our Visual Designer created the look and feel, which was then presented to the clients and approved.
Feedback + Iteration
For the remainder of the project, bi-weekly meetings with the client were held to understand, design, and review each section of the software. We also brainstormed ideas for new functionality. There was a prototype that was updated to showcase the work that was done, which we presented during each meeting. Iterations were then made and reviewed in the next one.
Validation Through User Research
User Research was conducted throughout the project to validate designs and get feedback. The participants consisted of users and company stakeholders, whose feedback was analyzed and implemented into the designs after each session.
In House Development + Collaboration
A little over half way into the project, the Developers from our team started to code the views that were completed. There was back and forth communication between the Developers and Designers to ensure coding and designs matched.
Hand Off
There is a sprint and a half left until final designs are handed off to the client. We are currently working on all final touches to ensure the deliverables exceed their expectations.
User Flows / Scenarios
.png)
.png)
.png)
Navigation & Layout
We needed to design the navigation and layout with their most important requirement in mind: keep as much center real estate as possible. The clients did not want to block the center image that the microscope was displaying but needed all other elements and configuration settings to be present.
For all screens, we wanted to keep the navigation / layout consistent.
Previous UI + Low Fidelity Wireframe
.png)
We decided to create slide out panels on the left and right to hold vital information that pertains to the tab the user is currently on. We created the panels to be collapsable when the user does not need to configure and incase the user needs to view the image in a larger viewpoint.
High Fidelity Wireframe - First Pass
.png)
Final Navigation Prototype
Other Designs
(not all designs are displayed)
Previous UI
.png)
First Pass
Final Designs
New Functionality
Create an experiment
View an experiment's details & all of your assigned tasks
Add comments / tasks - collaboration (new functionality)
Next Steps
There is a sprint and a half left for this project. The final three weeks will be spent finishing any last minute or missed designs and fine tuning the completed ones.
So far we are over the expected designed view count and are targeted to complete on time.
*I left Catalyst UX before the project was completed and handed off.
bottom of page