Syyclops

Syyclops brought me in as a contractor to shape the entire user experience and visual identity. They had a strong technical foundation with a digital twin engine that could ingest Revit models and render any building as a navigable 3D environment. What they needed was the product surface that would make all that technology usable for real facility teams, technicians and building managers.

My role was to take high-level scope documents and translate them into core user flows, detailed interactions and the production interfaces that engineering would build against. I was the bridge between what the technology could do and what the users actually needed it to do.

Digital twins are inherently dense. Thousands of assets, live telemetry, 3D geometry and AI predictions all fighting for attention on the same screen. The risk with a product like this is shipping something powerful but completely unusable for the people who need it most.

The design had to answer two very different questions in the same product. For a manager glancing at a dashboard between meetings: "what is wrong right now?" For a technician diagnosing a failing air handling unit on site: "why is this specific system behaving this way?" Those two users have fundamentally different needs, different contexts and different levels of technical depth. One interface had to serve both.

Technicians spend most of their working day on site, walking corridors and opening mechanical closets. They do not have time to sit down with a laptop. I designed a streamlined, touch-optimized version of Syyclops for iOS that lets them scan a room, see its assets, triage anomalies and create a work order, all from their phone.

Indoor air quality and space comfort metrics sit right at the top of the mobile interface because those are the first three things facility teams check when walking through a building. The mobile app is not a stripped-down version of the desktop product. It is purpose-built for how technicians actually work in the field.

A modular design system lives in Figma alongside the product. It includes components, color tokens, typography guidelines, interaction states and a full icon library. Every primitive is wired into Figma variables so handoff to engineering is lossless and developers never have to guess at spacing or color values.

The palette draws from Syyclops' brand identity. Deep blue as the quiet canvas that lets data breathe, and orange as the call-to-action that always means "act on this." That consistent visual language carries across hundreds of screens without ever losing its clarity.

I worked directly with product managers, engineers and company leadership to make sure every design decision aligned with real business goals and actual user needs. When a junior UX/UI designer joined the team, I moved into a mentorship role, reviewing their work, setting the design direction and making sure the design system could scale beyond me.

The goal was always to build something the team could maintain and evolve after my contract ended. A design system that only works when the original designer is in the room is not really a system at all.

Syyclops launched its v1 with end-to-end flows across both web and iOS. The handoff included detailed specs, motion documentation and an interactive prototype that engineering could reference during the build. The product is now deployed across K-12 school districts and commercial buildings in the US.

The design system I built serves as the foundation for every new feature the team ships. That kind of longevity is the outcome I care about most. Not just that the screens look good on launch day, but that the system keeps working as the product grows.