Background
SIVONIC's browser-based interface was functional—but outdated. Users struggled with browser compatibility issues, clunky design, and inefficient workflows. For a company built on scientific precision, this was a gap that needed closing.
The goal? A complete redesign of their web application’s interface without disrupting the powerful backend architecture. The result needed to feel seamless, intuitive, and as robust as the devices it controls.
How We Worked Together
Our collaboration kicked off with a deep-dive discovery phase. We explored the existing system, reviewed device behavior, and gathered feedback from both internal teams and end users. Together with SIVONIC’s stakeholders and design partner, we co-created a new vision for the user interface—balancing clarity, performance, and brand coherence.
Once wireframes and high-fidelity designs were approved, we moved into development, beginning with a modular UI component library that served as the foundation for the entire application.
Rüdiger Härtel
Senior Software Developer at SIVONIC GmbH
“We had a good experience working with Makers'Den. Despite tight deadlines, the project was completed on time, covering all necessary topics. Our weekly agile-style meetings ensured clear communication and progress tracking. We highly recommend Makers'Den for their professionalism and efficiency.”
We operated in weekly sprints, holding regular live demos in a staging environment. This rapid feedback loop ensured that both design and functionality stayed aligned with user needs and business goals. Every sprint delivered tangible results and clear action items for the next one.
The Technical Setup
SIVONIC’s frontend was built to work seamlessly with their existing API, which provided real-time configuration and data delivery.
Each screen—including the Dashboard, Device view, and Diagnosis section—was structured with flexible, reusable components. These dynamically rendered layouts adapted based on the API’s responses, making the system adaptable for future device updates.
Key Features Developed:
Always-on Navbar: Constant visibility of device status and session login.
Dynamic Dashboard Cards: Users could customize their workspace by adding, resizing, or removing data cards to suit their workflow.
Measurement Settings Panel: Full control over EIS measurement parameters before test initiation.
Custom Slider: Built on Radix UI, this feature-rich slider supported both linear and logarithmic scales for advanced control.
We also added layout-saving functionality, letting users save and load custom dashboard configurations with a click. Dark mode? Of course. Fully accessible? Absolutely.
The Tech Stack
To ensure scalability, performance, and developer happiness, we used:
TypeScript – For type safety and a better developer experience
React.js – Our go-to frontend framework, ensuring speed and modularity
TanStack Query – Efficient real-time data fetching with background syncing
ShadCN (Radix UI + TailwindCSS) – Fast, accessible UI components with dark mode support
TailwindCSS – Utility-first styling for rapid development and consistency
Plotly.js – Advanced, interactive data visualization tools for scientific plots
The Results
The redesigned SIVONIC web app is now a powerful extension of their EIS device—polished, high-performing, and user-focused.
Improved UX: The responsive interface adapts to different screen sizes and user needs, improving overall usability and reducing onboarding friction.
Live Data Visualization: Users now see real-time updates of their measurements, with dynamic, interactive charts that can be customized on the fly.
Custom Workflows: With drag-and-drop layout control and persistent configurations, users can tailor the app to their specific workflow needs.
Future-Ready Foundation: The modular setup means faster iteration on future features and integrations.
SIVONIC’s new app reflects their brand values: technical excellence, user empowerment, and scientific rigor.
If you're looking to modernize your product interface while keeping your backend intact, talk to a Maker!
