Project Name
Dimenso
Focus
Technical UI Designer / Frontend Developer
Tech Stack & Tools
Blazor, Git, Tailwind CSS Methodology, Figma
https://central.dimenso.cz/#central "Dimenso Central unifies accommodation and catering logistics into one platform. I designed and coded the frontend using customized Blazor component libraries, delivering a seamless, role-based dashboard for central administration, inventory purchasing, and meal management.
Explore prototype
The Problem
The engineering team behind Dimenso Central-a Brno-based platform unifying catering and accommodation logistics—had built a powerful backend, but needed a frontend interface to match. The core UX challenge was translating highly complex data into a usable dashboard. Administrators required a streamlined tool to oversee central purchasing, nutritional registers, and multi-facility operations without suffering from cognitive overload.
A Crisis of Information Hierarchy
Before the redesign, the Dimenso frontend struggled to present dense catering and inventory data effectively. The legacy UI suffered from several critical usability issues:
- Flat Visual Hierarchy: Lacks a defined typographic scale. Primary titles and secondary internal codes compete equally for the user's attention..
- Poor Spatial Grouping: Arbitrary whitespace between labels and values violates Gestalt principles, forcing excessive eye movement and increasing cognitive load.
- Unstructured Relational Data: Complex, nested information (e.g., nutritional values, vendor packaging) is dumped into flat text blocks and unstyled links instead of structured tables or data cards.
The Process
1. Structuring Complex Data (UX)
Before writing any code, I had to untangle the relational data. I designed dashboard layouts that prioritized critical daily tasks—allowing hostel staff to instantly cross-reference available products, track vendor stock, and manage meal allocations based on guest diet types. The goal was to reduce cognitive load and minimize clicks for high-frequency actions.
2. Designing Within Technical Constraints (UI)
The client required the use of a specific, pre-made Blazor component library. Instead of fighting the framework, I embraced it. I established a custom design token system mapped perfectly to Tailwind CSS conventions (e.g., utilizing functional scales like primary-50 to primary-900). This approach allowed me to heavily customize the off-the-shelf Blazor components, transforming a generic library into a cohesive, branded interface that felt bespoke.
Constraints? Not a Problem!
I designed and customized the UI using the mandated DevExpress Blazor library. To future-proof the frontend against framework updates, I used a minimal-override strategy—mapping Tailwind CSS tokens to global theme variables, utilizing native SizeMode settings for density, and safely targeting wrappers via Blazor's CSS isolation. For any unavoidable deep overrides, I embedded explicit developer comments to ensure seamless maintenance during future version upgrades.
3. Frontend Development & Collaboration (Engineering)
This was a highly collaborative, code-heavy engagement. I didn't just hand off Figma files; I actively coded the frontend UI representations using Blazor. By integrating directly into the client's engineering workflow, I pushed UI updates and component customizations through their Git repository, ensuring the frontend stayed perfectly in sync with their backend development cycles.
The Outcome
I successfully bridged the gap between the client's raw backend data and the end-user experience. By delivering a customized, scalable Blazor frontend and collaborating seamlessly via Git with the local engineering team, I provided hostel administrators with a powerful, intuitive tool to manage their daily operations.
