Project Overview - Johnson Controls Solution Navigator
Prototype: Provide on interview due to content sensitivity.
Role: Lead UX/UI Designer
Platform: Responsive Web/Mobile/Tablet (E-commerce)
Duration: 6 Months for MVP Launch
Launch: 1% Throttle - 2 Weeks then 5%
Design System: Checkout & Parts Catalog Scalable (Figma)
Johnson Controls tasked me with reimagining Solution Navigator, their platform for guiding engineers, contractors, and facility managers to the right building automation solutions. This wasn’t just another product catalog — it needed to be a decision-support tool that could handle complex product families, technical specs, and compliance standards, while still feeling approachable and intuitive.
Over six months, I collaborated with engineers, product managers, and regional sales teams to uncover where users struggled. Leading the UX/UI design effort, I built a scalable system that simplified exploration, comparison, and configuration across Johnson Controls’ vast portfolio. Using Figma, Miro, and Usertesting.com, I translated research into flows, wireframes, prototypes, and a design system that helped customers find solutions faster, driving adoption and aligning sales teams globally.
Empathize - Understanding Complexity in Building Automation
I immersed myself in the day-to-day workflows of engineers, contractors, and facility managers to understand how they navigated Johnson Controls’ sprawling product ecosystem. Pain points surfaced quickly: overwhelming catalogs, technical jargon without context, and compliance standards buried in PDFs. Users didn’t just want a list of products — they needed guided decision support that could adapt to projects ranging from small retrofits to large-scale automation.
To dig deeper, I conducted stakeholder interviews, mapped user journeys, and reviewed legacy catalog systems across regions. Insights revealed frustration with fragmented tools, inconsistent product naming, and lack of integration with procurement workflows. What customers needed was clarity and trust: a platform that could cut through technical clutter, surface the right options quickly, and guide them with confidence through specification, comparison, and checkout. These findings became the foundation of the redesign — one focused on reducing friction and empowering informed decisions
Research - Benchmarking and Uncovering Market Gaps
To build a solution that felt both modern and practical, I benchmarked against leading B2B platforms and e-commerce experiences. Amazon Business, Grainger, and Siemens tools offered clues: strong search, filters, and technical context. Yet none addressed the complexity of HVAC systems, compliance overlays, or multi-stakeholder workflows. This gap underscored the need for Johnson Controls to set a new standard — blending enterprise-scale product data with consumer-level usability.
I also conducted usability audits of Johnson Controls’ existing digital catalogs and global sites. Patterns showed users spending excessive time searching, cross-referencing, and validating specs. Procurement managers wanted confidence in compatibility, engineers wanted clarity on technical specs, and contractors needed speed. By synthesizing competitor analysis, usability audits, and customer feedback, I defined clear opportunities: simplify navigation, surface critical compliance data, and create a unified experience that could scale across product families and regions.
Analysis & Planning - Turning Research into Actionable Blueprints
With research insights in hand, I mapped the end-to-end experience across discovery, product evaluation, compliance, and checkout. Journey maps revealed where engineers lost time cross-referencing specs, where contractors hit dead ends in search, and where procurement managers lacked confidence in compliance validation. These insights clarified not only where users struggled, but also where Johnson Controls could deliver a differentiated advantage.
From there, I built feature hierarchies and information architecture diagrams that balanced technical depth with usability. At the top of the hierarchy sat powerful search, guided navigation, and transparent compliance indicators. Secondary features supported comparison, configuration, and collaboration. Working closely with engineers and product stakeholders, I prioritized features into MVP versus future releases, ensuring a launch that was lean, scalable, and aligned with Johnson Controls’ long-term product strategy.
Wireframing - Sketching for Clarity and Scale
With the blueprint established, I moved into low-fidelity wireframes to translate flows into tangible screens. These early sketches prioritized structure over polish, testing how users navigated product catalogs, spec sheets, and compliance checks. By keeping designs simple, I could validate whether procurement managers, engineers, and contractors could quickly find what they needed without distraction.
Wireframes also helped explore edge cases, such as what happened when a product spec was incomplete, or when a compliance requirement blocked checkout. By simulating these scenarios, I ensured the system provided clear recovery paths instead of dead ends. Wireframes became a collaborative tool—aligning engineers, sales teams, and stakeholders early—while minimizing risk before moving into higher-fidelity design.
Design Systems - Building a Scalable Visual Language
After validating wireframes, I created a scalable design system tailored to Johnson Controls’ broad product portfolio. Using Figma, I structured typography, color palettes, spacing tokens, and iconography into reusable components. Accessibility was a top priority: colors were tested for WCAG 2.1 contrast, forms had clear error states, and touch targets were optimized for tablet field use.
This system wasn’t just visual—it was functional. I built component libraries for navigation menus, spec tables, comparison grids, and checkout patterns, ensuring consistency across the responsive web, tablet, and mobile experience. The design system accelerated delivery, reduced duplication, and gave engineering teams a reliable toolkit. By embedding scalability and compliance into the foundation, Johnson Controls could grow Solution Navigator beyond the MVP without reinventing the interface.
Design - Bringing the Experience to Life
With the design system in place, I translated flows into high-fidelity screens optimized for clarity, speed, and trust. The catalog experience prioritized powerful search and filtering, supported by clean product cards with at-a-glance specs. Spec detail pages were restructured to surface the most critical information first, while secondary details were revealed through progressive disclosure. Compliance status indicators provided instant confidence, reducing guesswork for engineers and procurement managers.
Beyond the catalog, I extended design patterns into checkout and comparison tools. Checkout was redesigned to minimize abandonment with streamlined forms, inline validation, and transparent progress steps. Comparison views allowed contractors and engineers to evaluate multiple systems side by side, with visual cues highlighting differences in performance, compatibility, and compliance. These designs transformed Solution Navigator into a decision-support tool that was both intuitive and enterprise-ready.
Prototyping - Making Interations Tangible
To validate flows before development, I built interactive prototypes in Figma covering the full journey—from catalog search to spec detail, comparison, and checkout. These clickable prototypes gave stakeholders, engineers, and sales teams a hands-on way to experience the platform in motion. By simulating real interactions early, I reduced ambiguity and aligned cross-functional teams on how the system should perform.
Prototypes were tested with engineers and contractors in simulated workflows. Scenarios included searching for replacement parts, cross-referencing specs, and completing compliance-driven checkout. Feedback revealed where users needed clearer progress states, larger touch targets for tablets, and simplified error handling. Iterating quickly within Figma ensured usability improvements were captured before handoff, minimizing rework and building confidence that the final system would scale globally.
Testing - Validating with Real Users
To ensure Solution Navigator met the needs of its diverse audience, I conducted moderated usability sessions with engineers, contractors, and procurement managers. These tests evaluated how quickly users could find products, validate specs, and move through checkout without confusion. Remote studies expanded reach across regions, capturing feedback from global teams who worked with different compliance and procurement requirements.
Testing surfaced critical refinements: engineers wanted faster ways to confirm compatibility, contractors struggled with dense comparison tables, and procurement managers needed clearer compliance flags to ensure purchasing accuracy. By iterating on these insights, I simplified comparison layouts, added visual cues for compliance, and refined error handling in checkout. Testing confirmed that the platform was not only usable, but truly effective in supporting the workflows that mattered most.
Launch - Rolling Out Solution Navigator
After months of design, prototyping, and testing, Solution Navigator launched as an MVP across Johnson Controls’ web, mobile, and tablet platforms. The rollout was throttled for risk mitigation: first at 1% for two weeks, then gradually expanded to 5%. This phased approach allowed engineering and product teams to monitor performance, validate stability, and ensure customer adoption before scaling further.
Early launch data validated key design decisions. Search success rates improved, checkout drop-offs decreased, and contractors reported faster access to specs and replacement parts. Internal sales teams highlighted how the platform improved customer conversations by making technical details easier to explain. The MVP proved that a complex catalog could be simplified without sacrificing depth — positioning Johnson Controls to scale Solution Navigator globally with confidence.
Iteration - Refining Post-Launch for Scale
The MVP launch was only the starting point. Post-launch, I collaborated with engineering and sales teams to gather feedback from users in the field. Contractors highlighted the need for faster mobile performance, engineers requested clearer spec comparisons, and procurement managers wanted stronger compliance indicators. By analyzing usage data alongside qualitative feedback, I identified high-impact opportunities for refinement.
Iterations included optimizing search filters for speed, redesigning comparison tables with clearer visual hierarchy, and expanding compliance flags to support regional standards. I also refined tablet layouts to improve field usability and added tooltips for dense technical specs. These updates reinforced trust and usability, ensuring Solution Navigator could scale beyond the MVP. By treating the platform as a living product, Johnson Controls remained responsive to evolving customer needs while strengthening its digital ecosystem.
