CASE STUDY — 2025
UX/UI Redesign: Scientific Software
OVERVIEW
Blue Ocean Technologies is a startup that specializes in digital microfluidic software.
Their application, MicroDrop, had inconsistent UI, accessibility concerns, and lacked a cohesive brand identity.
I joined as a Freelance UX/UI Designer to address these challenges and improve both the user experience and interface design.
TASK
Improve MicroDrop's usability and interface clarity.
TEAM
1 UX/UI Designer
1 Project Manager
1 CEO
2 Developers
MY ROLE & CONTRIBUTION
-
UX improvements
-
Design system development
-
Component redesign
-
Branding
DURATION
3 months
PROBLEM
The MicroDrop software platform had UI inconsistencies, accessibility challenges, and no brand identity. Users struggled to navigate the application efficiently and were frustrated with usability issues such as confusing error messages, unclear feedback, and inconsistent interactions.
GOAL
-
Improve usability and interface clarity
-
Ensure accessibility guidelines are met (WCAG)
-
Create a scalable design system
-
Develop a cohesive brand identity
BEFORE
AFTER
RESEARCH & INSIGHTS
Analyzed Existing Research
I joined the project mid-development stage so initial user research had already been conducted. I used the raw data from their user survey to draw insights.​​​​
Key Findings
-
​​​Users were frustrated by unclear error messages and inconsistent alerts.
-
Navigation flows were confusing, slowing down task completion.
-
Visual and interaction inconsistencies caused cognitive load and reduced efficiency.
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
​​Heuristic Evaluation
Due to limited UX research and budget, I conducted a heuristic evaluation using Jakob Nielsen’s 10 usability heuristics to identify key UI issues potentially affecting usability. Many of these findings overlapped with key findings from the user survey.
Issue #1: Off State Colour
.png)
-
Heuristic Violated: Consistency & Standards
-
Issue: Red typically signals error or urgency. Using it for an “off” state breaks convention and risks confusing users.​​
-
Recommendation: Use a neutral colour (e.g., grey) for “off” to align with user expectations and standard UI conventions.
Issue #2: Unclear Error Messages
-
​Heuristics Violated: Help Users Recognize, Diagnose, and Recover From Errors & Match Between System and the Real World
-
Issue: Error messages were overly technical, offered no resolution guidance, and lacked recognizable visual cues, creating accessibility challenges for users with colour vision deficiencies.
-
Recommendation: Use standardized colours and icons for alerts, and provide clear, jargon-free instructions that guide users to resolve the issue.
Issue #3: Poor Colour Contrast
MENU
DEVICE VIEWER
-
​Heuristic Violated: Aesthetic and Minimalist Design
-
Menu
-
Issue: Small, low-contrast green text and black icons on grey reduces readability.
-
Recommendation: Increase text and icon size and change colour to white for better visibility.
-
-
Device Viewer:
-
Issue: Blue viewer lacks contrast against black background.
-
Recommendation: Improve contrast by lightening the blue or the background.
-
DESIGN CHALLENGES
Space and Accessibility
One major issue we encountered was limited space, which impacted accessibility. The font size was smaller than recommended for readability. While we tried increasing it, this disrupted the overall layout, so we retained the system default size and optimized spacing in other ways, such as converting some functions into icon buttons with tooltips.
.png)
This design compromise saved space and preserved usability but relied on users to understand iconography and tooltips for less frequent actions. Given the target audience (scientists and users familiar with microfluidics), this approach was appropriate in this circumstance.
Colour Transparency in Live Device View
I considered lightening the dark blue on the black background for better contrast, as the current contrast ratio was 1.28:1, which fails WCAG AA. However, users can adjust the fill and transparency in live view mode when connected to the external DropBot droplet hardware, so a lighter shade wasn’t necessary for accessibility in that context. Since most of the time is spent in live view moving droplets on the external hardware, we settled on the darker blue to ensure visibility and usability in this critical area. This was an example of how, as a designer, you sometimes have to make compromises based on the specific context and user needs.
.png)
COLOUR CONTRAST 1.28:1 (FAILS WCAG AA)
ABILITY TO ADJUST FILL
LIVE VIEW EXAMPLE
IDEATION & DESIGN
UX Change #1: Improved Alert Messaging
One major issue I found in my research was confusing error messages. I standardized all basic alerts and improved them to ensure the tone was clear, calm, and non-blaming.
ALERT TEMPLATES (LIGHT MODE)
.png)
ALERT TEMPLATES (DARK MODE)
BEFORE
FIGMA PROTOTYPE
AFTER DEVELOPMENT
UX Change #2: Unified 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.
UX Change #3: State Colours
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)
.png)
UX Change #4: Creating a Cohesive Brand Identity
​​MicroDrop lacked a consistent visual identity, using default system fonts, colours, and Sci-Bots’ logo (original developers of the software). I developed a new brand identity that honoured Sci-Bots’ legacy while giving MicroDrop a modern, professional look, resulting in a cohesive and polished interface.
OLD LOGO
NEW LOGO
Process Work & Notes
UPDATED SPLASH SCREEN IN ACTION
Design System Visuals​
I developed a design system to resolve key usability and accessibility issues identified in my research. It standardized iconography, typography, colours, spacing, and feedback messaging, with components designed to function in both light and dark modes.
.png)
NEXT STEPS
We are currently wrapping up development and preparing for user testing to gather feedback on the updated prototype. After that, I'll be analyzing results, creating insights, and making design and usability improvements based on the findings.
TAKEAWAYS
I learned a lot about working in a fast-paced startup environment. This was my first time working with developers and understanding the technological constraints of design. It taught me that as a designer, you have to advocate for the user while also designing within what’s feasible for the team. Sometimes, the sky isn’t the limit when you’re working within time constraints, system capabilities, and development realities.
I also learned how to prioritize tasks and manage my time. Development moves quickly and won’t wait for design to catch up. Another key learning area was how to properly hand off designs so developers can easily understand and implement them. This project was full of technical restrictions and really taught me how to balance creativity and practicality.
Testimonials
MicroDrop Software
"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