CASE STUDY — 2025
Bringing Clarity and Consistency to a Biomedical Software
OVERVIEW
Microdrop is a biomedical software used to control tiny liquid droplets through an external hardware in a variety of laboratory settings. When I joined, the software was already mid-way through a full UI redesign, which had surfaced several usability issues and interface inconsistencies.
I joined as the UX/UI designer to resolve core UX and UI issues and bring clarity and consistency to the interface. I collaborated closely with the Project Manager, CEO, and developers to balance user needs, business goals, and technical constraints. My improvements guided development and set the stage for a more usable and maintainable interface.
💻
TASK
Resolve core UX and UI issues to bring clarity and consistency to the Microdrop interface.
🤝
WORKED WITH
1 Project Manager
1 CEO
3 Developers
🚀
MY IMPACT
-
UX/UI improvements
-
Branding
-
Style guide
⏳
DURATION
12 weeks
PROBLEM
Following a major UI redesign, Microdrop faced several UX and UI challenges. Without formal design oversight, developers relied on default Python styles and personal judgement, leading to inconsistencies and accessibility issues. Additionally, several usability issues identified in earlier user research remained unaddressed, further impacting the overall experience.
DISCOVER
Stakeholder Interviews
To kick things off, I conducted stakeholder interviews to inform project direction and understand constraints, priorities, and user workflows before beginning design work:
-
Project Manager: Highlighted areas of the interface she didn’t like and identified inconsistencies that needed to be addressed
-
CEO:
-
Working within a strict 12 week timeline before developers complete their internship
-
Provide clear design guidance and implementation for developers
-
Provide simple, feasible solutions that can be implemented quickly
-
-
Developers: Needed clear design guidelines, including icon set, colours with HEX codes, and fonts
Previous User Research
User research on the previous interface revealed the following pain points:
-
Challenges with edit protocols, with no provision to reorder, group, or reverse steps
-
Frustrating path creation tools requiring full resets instead of editable segments
-
Poor menu structure and visual hierarchy leading to misleading or hidden controls
-
Lack of clear system feedback in real-time or DropBot indicators
-
Obstacles to adoption by newcomers or laypersons because of inadequate
onboarding
Mostly when using plugins incorrectly, I get obscure error messages, so it takes me a long time to figure out what needs to be done.
-Survey Participant
Identifying UX Issues in the Current Prototype
With previous research based on the old interface and some issues already addressed, I evaluated the current prototype to identify remaining UX challenges, guided by Nielsen’s 10 Usability Heuristics
.png)
TECHNICAL CONSTRAINTS
After reviewing UX issues with stakeholders, several technical constraints emerged.
Font Size
Changing the default font size would disrupt the overall interface structure. This was not a change stakeholders saw feasible.
Light & Dark Mode
A key constraint was ensuring designs worked seamlessly in both light and dark modes, adapting to the user’s system settings. Since users control their preferences on macOS and Windows, the interface had to function well in both themes.
Colour Contrast in Device Viewer Dock Pane
In the Device View dock pane, I proposed a lighter blue to improve contrast. However, the area used adjustable transparency for aligning with the DropBot hardware during live operation, so changing the colour would have interfered with the live view. As a result, the dark blue could not be modified.
.png)
DEVICE VIEWER DOCK PANE
ADJUSTABLE FILL
LIVE VIEW ON
DEFINE
Problem Statement
Doctors and scientists running high-precision lab experiments need to use Microdrop to execute and monitor precise liquid-handling experiments in order to ensure accurate results, maintain efficiency, and avoid critical errors.
User Persona
.png)
DEVELOP
Style Guide
First, I created a basic style guide to establish consistency across the interface, helping developers begin implementation and preventing future slowdowns as I started working on the design.
Redesigning the Brand
Another key source of inconsistency was branding. Microdrop was using the logo of its creator, Sci-Bots. To give Microdrop its own identity, I designed a distinct logo that maintained a connection to the established Sci-Bots brand while giving Microdrop a more professional and standalone appearance.
SCI-BOTS LOGO
MICRODROP'S NEW LOGO
Alert Messaging Redesign
To address a key user pain point, unclear alert messages, I redesigned critical alerts and created scalable templates for developers, compatible with both light and dark modes.
.png)
ALERT MESSAGE BEFORE
-
Does not explain how to fix the issue
-
No button hierarchy
-
Lacks semantic icons or proper alert colours to indicate the error
ALERT MESSAGE AFTER
-
Clearly explains the issue in neutral, non-blaming language
-
Specifies which electrodes were expected to dispense droplets and that no droplets were detected
-
Buttons use hierarchy to indicate the safest choice and minimize user error
-
Proper warning icon and colour make the error immediately noticeable
ALERT MESSAGE BEFORE
-
Does not explain how to fix the issue
-
Lacks semantic icons or proper alert colours to indicate the error
ALERT MESSAGE AFTER
-
Clearly explains the issue
-
Clearly outlines the solution
-
Proper warning icon and colour make the error immediately noticeable
ALERT TEMPLATES
Iconography
Inconsistent icon sets made the interface feel unprofessional and confusing. I standardized icons using Material Design 3 for a cohesive and modern look. Additionally, MD3 icons are widely recognized, consistent, and well-documented, simplifying developer implementation.
State Colour
I updated state colors for buttons and alerts to improve clarity and accessibility. Green indicates active/on, grey indicates inactive/off, red is reserved for errors, and yellow for warnings. These choices align with user expectations and ensure clear feedback for all users, including those with visual impairments.
.png)
BEFORE
.png)
AFTER
DELIVER
Design Handoff
At the end of the 12 week period, developers were still building the prototype. I delivered UX guidance, design templates, and interface specifications to ensure clarity, consistency, and accessibility moving forward. These resources prepared the software for continued development, refinement, and eventual user testing.
BEFORE
AFTER
NEXT STEPS
The next phase would involve finalizing the prototype, testing it with users, and refining the interface based on feedback.
TAKEAWAYS
This project was a reality check: designing beautiful flows in Figma is one thing, but understanding what it actually takes to build them is another. I gained valuable experience working in a fast-paced startup and navigating the technological constraints of design. I learned about system logic and how design works in practice, not just visually. The experience inspired me to learn more about coding to better collaborate with developers and create designs grounded in real-world feasibility.
Team Feedback
"I had the pleasure of collaborating with Julia during my role as CEO of Blue Ocean Technologies, where she supported our team in improving the user experience of our Microdrop DMF interface. Julia played a pivotal role in modernizing the platform by developing a new logo, a comprehensive style guide, and custom button icons and dialog boxes. Her design work not only elevated the visual appeal of the interface but also improved clarity, accessibility, compactness, and overall usability...
Alexandros Sklavounos
CEO, Blue Ocean Technologies