ENVISION

Overview

Envision is Hyatt’s transient customer relationship management (CRM) platform and proprietary sales application. It enables Hyatt sales teams, supporting both transient and group sales, to work within a single system while integrating with hotel sourcing suppliers.

The Envision database centralizes customer information alongside detailed data on Hyatt hotel facilities, including guestrooms, meeting and banquet bookings, and scheduling information across properties worldwide.

This project started with a very barebones legacy experience that functioned more like an old Excel-style internal tool than a modern product. The system had worked for more than 20 years, which meant it was deeply embedded in Hyatt’s sales operations, but it also carried the weight of dated interaction patterns, dense information presentation, and limited usability improvements over time.

The opportunity was not simply to make the interface look more modern. It was to rethink how a highly data-dense enterprise platform could better support scanning, interpretation, and decision-making while still preserving the depth and flexibility power users relied on every day.

Mid-Fi image of the dashboard

Goals for This Project

• Modernize a legacy Hyatt sales platform that had functioned for decades but no longer supported a clear or efficient modern user experience.
• Improve usability and introduce quality-of-life enhancements without disrupting the depth of workflows that internal teams already depended on.
• Condense a highly numeric and data-dense interface so users could see more meaningful information in less space.
• Create a more cohesive experience that aligned with Hyatt’s upgraded backend systems and broader product ecosystem.
• Support better visibility into performance and workflows through stronger dashboard patterns, hierarchy, and drill-down behavior.
• Balance product ambition with real implementation constraints, including AngularJS 1.5 limitations and fixed engineering timelines.

The Problem

The original Envision experience was powerful, but it was also dated, dense, and heavily utilitarian. It resembled an old spreadsheet-style tool, which made sense historically because users needed access to large amounts of operational data, but the interface placed a heavy burden on them to parse, interpret, and navigate that information efficiently.

This created a common enterprise UX challenge. The system had survived for more than 20 years because it solved real business needs, but longevity alone had also allowed interaction debt to accumulate. The platform lacked the hierarchy, visualization, and modern UI patterns needed to support fast decision-making at scale.

The problem was not just visual. Users needed to understand parent-child relationships across data sets, move between summary and detail views, and drill down into room-level or property-level statistics without losing context. That level of complexity made the redesign more than a cosmetic refresh. It required rethinking how information should be structured, surfaced, and navigated.

Research & Strategy

The work began with understanding how Hyatt sales teams were using the existing system in practice. I collaborated with subject matter experts, stakeholders, and leadership to identify which workflows were most critical, where the interface slowed users down, and what kind of information needed to be visible at both executive and operational levels.

A key part of the strategy was recognizing that this product could not be redesigned as if it were a blank slate. The engineering team was working within AngularJS 1.5 and a recently upgraded backend, which meant every design decision had to account for technical feasibility, delivery scope, and timeline constraints. The goal was to create meaningful UX improvements that were realistic to build and valuable enough to move the product forward.

I also helped push the decision to implement AG Grid as part of the interface direction. That was a meaningful strategic move because it provided a stronger foundation for handling dense structured data, improving scanability, and supporting more advanced interaction patterns in a way that aligned with the realities of the product.

Design Direction

The design direction focused on making Envision more readable, more efficient, and more scalable without stripping away the complexity that users actually needed. Rather than treating the density of the interface as a problem to remove, I treated it as a problem to organize more intelligently.

This meant introducing better visual hierarchy, condensing important information into more efficient layouts, and using visualization to reduce the cognitive load of parsing rows of raw numbers. I explored ways to show more data in less space while still making the interface easier to understand.

A major part of the work involved creating clearer master-detail relationships. Users needed to move from parent-level summaries into individual room statistics and other granular views without losing their place or the surrounding context. The design had to support layered exploration, allowing users to zoom in on specifics while still understanding how those details connected back to the larger picture.

The resulting direction was a more modern and structured enterprise interface that improved clarity while staying grounded in the technical limits of AngularJS 1.5, Bootstrap 4, and what the development team could realistically deliver within the project timeline.

Impact

• Helped modernize a legacy sales platform that had remained largely spreadsheet-like for more than two decades.
• Improved the usability and readability of a dense operational interface without removing the depth required by power users.
• Contributed to the decision to implement AG Grid, enabling stronger handling of dense tabular data and more scalable UI patterns.
• Created a clearer way to condense high-volume data into more usable layouts and visual structures.
• Supported parent-child and drill-down workflows that allowed users to inspect room-level and property-level details without losing context.
• Designed executive dashboards that gave leadership more transparent visibility into workflows, KPIs, and operational metrics.
• Balanced UX improvements with the realities of legacy front-end architecture and fixed engineering timelines.

My Role

As the sole Product Designer on the project, I led the design effort end-to-end. I was responsible for balancing user needs, technical constraints, and business goals while designing a scalable UI system that integrated with an existing, recently upgraded backend.

My role extended beyond visual design. I had to understand how users worked inside a legacy enterprise platform, identify where the spreadsheet-style experience was causing friction, and shape a more modern direction that still respected the underlying workflows the business depended on.

Methodologies & Responsibilities

• Workflow Discovery: Collaborated with subject matter experts, sales stakeholders, and upper management to understand daily workflows, reporting needs, and strategic priorities.
• Legacy System Analysis: Evaluated how the existing barebones interface functioned and where dated patterns were limiting efficiency, readability, and usability.
• User Flow Design: Translated user needs into clearer flows that aligned with Hyatt’s broader ecosystem while preserving the complexity required by internal users.
• Iterative Prototyping: Designed and refined low-fidelity, mid-fidelity, and high-fidelity mockups for core workflows and dashboard views.
• Data-Dense Interface Design: Explored ways to condense highly numeric information into layouts that showed more relevant data in less space.
• Visualization Strategy: Used charts, layout hierarchy, and structured grid behavior to make dense operational information easier to interpret.
• Master-Detail Patterns: Designed parent-child and drill-down experiences that helped users move from summary-level performance to individual room and property statistics without losing context.
• Usability Validation: Conducted remote usability testing to validate clarity, flows, and ease of use.
• Executive Dashboard Design: Created high-level dashboards that gave leadership transparent visibility into KPIs and workflow performance.
• Technical Constraint Alignment: Worked within AngularJS 1.5, Bootstrap 4, and engineering timeline constraints to ensure the final direction was realistic and buildable.

Learnings & What I’d Do Next

This project reinforced that modernizing enterprise software is rarely about replacing complexity with simplicity. More often, it is about organizing complexity so users can understand it faster and act on it with more confidence.

It also reinforced how important it is to design with engineering reality in mind. Working within AngularJS 1.5 and fixed delivery timelines meant that every design decision had to be intentional. The best solutions were the ones that improved the user experience in meaningful ways while still fitting the boundaries of what the team could implement.

If this work were expanded further, I would focus on:

• Continuing to evolve the dashboard system to support even stronger filtering, comparison, and drill-down analysis.
• Refining summary-to-detail transitions so users can move across data layers even more fluidly.
• Establishing a more formal design pattern library for dense enterprise tables, cards, and metric views.
• Measuring adoption and efficiency gains through workflow-based usability benchmarks and post-launch analytics.

Tools

Design & Research

Sketch, Zeplin, Axure RP, Balsamiq, UserTesting.com

Data Visualization & UI

Charts.js, AG Grid

Backend & Technical Context

AngularJS (1.5, legacy constraints), Bootstrap 4, D3.js, Flot.js

Communication

Slack, RingCentral, Skype