Unified Webalo’s previously separate administrative and end-user platforms into a single, scalable experience—reducing legacy complexity while supporting thousands of enterprise users across desktop and mobile.

To unify the experience, I designed a flexible layout framework that could consistently accommodate different components and workflows—providing a clear structure while maintaining visual and interaction coherence.

Webalo is a complex platform that provides powerful tools for manufacturing users. As the product grew, this complexity led to an increasingly dense navigation system that made it difficult for users to explore features and understand where to go next.

I explored multiple menu design approaches, testing different folding and grouping behaviors to reduce unnecessary page changes and minimize interaction cost. The goal was to preserve the platform’s power while making navigation clearer, simpler, and easier to use.

I worked closely with product managers and engineers to reorganize the navigation structure. This included removing unused features, resolving overlaps, renaming menu items, redesigning icons, and restructuring the navigation around user tasks—making it easier for users to find what they need within a single, unified platform.

Permissions allow the unified interface to dynamically serve different content to different roles—giving admins full access while keeping the view focused for end-users.

Over years of development, Webalo accumulated multiple icon sets created at different times and for different needs. Without a unified icon system, the interface felt inconsistent, making it harder for users to quickly recognize actions and navigate the product.

I defined a new icon set, leveraging Google Material icons where appropriate and designing custom icons when needed to ensure consistency, clarity, and full coverage across the platform.

One of the key challenges we were facing was that Webalo lacked a well-maintained and up-to-date design system, which led to visual inconsistency, design confusion, and implementation issues.

Building on the new interface and icon redesign, I established a new design system to align the team around consistent patterns. This enabled rapid component reuse, improved design consistency across the team, and supported long-term scalability.

Design tokens and Figma Components were used to ensure visual consistency during design and to make implementation easier for frontend developers.

I collaborated with the team to redesign all core components, modernizing the visual language and ensuring the new design system was applied accurately across the platform to create a cohesive experience.

We successfully transformed two fragmented tools into one seamless ecosystem. The new design system empowered the team to work more consistently and efficiently, bridging the gap between design and code through reusable components and shared tokens.

This initial phase focused on unifying the core web experience, while establishing a scalable foundation that can extend to mobile clients as development capacity allows.

This project pushed me from execution into leading design discussions and decisions. Building a design system from the ground up—and working closely with engineering and product—deepened my understanding of design as a platform-level, collaborative practice shaped by real-world constraints.