Project Name
My Tarot Life
Focus
Technical UI Designer / Frontend Developer
Tech Stack & Tools
Next.js, Three.js, OpenAI API, Figma, Vercel
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 live site
The Problem
To drive engagement and monetize a tarot reading platform, a static website was not enough. The project required two complex, interactive components: an engaging top-of-funnel lead magnet that generated personalized AI readings, and a robust e-commerce customizer where users could design and order physical card decks. The challenge was blending seamless 3D interactivity, real-time AI generation, and a multi-step customization flow into an intuitive, high-performing web application.
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. Designing the Interactive Lead Magnet (Engagement UX)
I designed and developed a highly interactive 3D web experience to capture user interest. Using Three.js, I built smooth card-flip mechanics that feel tactile and engaging. When a user interacts, the frontend hits an OpenAI endpoint to fetch a dynamically generated, personalized reading, converting a simple UI interaction into a high-value content delivery system.
2. Architecting the Deck Builder (Complex User Flows)
To monetize the engagement, I engineered a multi-step "Card Builder" flow. I mapped out the user journey from start to finish: Theme Selection -> Card Back Customization -> Real-Time 3D Preview -> Order Flow. I heavily prioritized UX principles like progress indicators, error prevention, and progressive disclosure to ensure users wouldn't abandon the complex funnel midway.
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. Full-Stack Frontend Execution (Engineering)
I brought the UX to life by coding the interface in Next.js. This required managing complex React state to ensure that as users tweaked their custom card borders, text, or AI-generated artwork, the Three.js 3D preview updated in real-time. I handled the API integrations and deployed the entire application to Vercel, ensuring fast, production-ready performance.
The Outcome
The result is a fully functional, deployed web application that transforms a static concept into an end-to-end interactive product. It successfully demonstrates the ability to merge cutting-edge web technologies (3D and AI) with strict, conversion-focused UX/UI principles, proving I can independently design, code, and ship complex digital experiences.
