June 2019 - April 2022 / 10 min read
Product: Transforming a Data-Heavy App into a Powerful Experience to Boost User Satisfaction
Context
CBRE, the largest commercial real estate services company in the world, has a subsidiary known as Econometric Advisors (EA). EA utilizes proprietary data to identify key economic factors that shape current and future commercial real estate trends, offering clients valuable insights for informed investment decisions.
Locator, EA’s flagship product, offers access to essential building-level data across various regions in the United States. Additionally, EA previously maintained a legacy platform primarily focused on accessing market reports from diverse data sets.
The business objective was to phase out the legacy platform and migrate its data into Locator’s map-based user interface, enhancing the overall user experience and addressing the declining user satisfaction rate.
Overview
Imagine a team of 20 engineers, three product owners, and one designer who wants to be a front-end engineer. Overwhelmed by the responsibility of managing the design for multiple projects and frustrated by the lack of a dedicated design team, the designer reaches her breaking point and decides to leave. Her departure creates an urgent need to fill the gap. In response, two new designers are quickly brought on board.
This case study recounts my journey as one of those two designers for the redesign of a complex, data-heavy application — ultimately resulting in a significant boost in user satisfaction.
Activities
UI Design, Research Synthesis, Prototyping & Testing, Front-end HTML/CSS styling
Organization
Right before leaving, the previous designer conducted a series of discovery interviews to better understand user requirements. As newly hired designers, we were encouraged to review this existing research instead of conducting our own. Being new to the design field and unfamiliar with mature research methodologies, I accepted this directive without hesitation.
We began by watching the interview recordings, taking detailed notes, and consolidating our findings into a list of existing usability pain points:
-
Unlabeled Table Controls: Users were left uncertain about the functionality of table controls represented solely by ambiguous icons. Additionally, tables with extensive data suffered from infinite scrolling both vertically and horizontally, causing critical information to be hidden or overlooked.
-
Desire for Data Visualization: One of the primary personas expressed a strong need for data visualization to support their work, particularly when making investment strategy proposals or pitches.
-
Lack of Visual Hierarchy: Locator’s interface had a disorganized and cluttered layout, with little attention given to visual hierarchy and cohesive placement of UI elements.
-
Legacy Platform Challenges: The legacy platform had significant issues, including slow data retrieval, frequent crashes, and a confusing report menu that hindered navigation.
Migrating data from a different platform required an intricate analysis of the data and understanding ways in which it could be integrated within a location-based application. I created an information architecture to make this process simpler, and we decided on an MVP version with 3 of the most sought-after reports.
Next, we developed a user journey that considered the various permutations of both new and existing flows, ensuring that we covered major usability tasks. Our goal was to introduce new data seamlessly, avoiding any disruptions to the established workflows.
Old research, new perspectives
While the project faced several challenges, there were key areas where improvements could have made a substantial impact. For example, a more thorough initial research phase would have provided a deeper understanding of user needs, rather than relying on incomplete discovery research. Additionally, stronger stakeholder management could have helped prevent situations where personal preferences overshadowed user requirements. Having a design system from the outset would have also significantly enhanced efficiency throughout the project.
Despite these hurdles, the project saw significant advancements across all its iterations. We later implemented additional UI enhancements and introduced new features and add-ons, although these are beyond the scope of this case study. Our design team also expanded to include a dedicated UX Researcher, and we were fortunate to welcome a Design Manager who played a crucial role in our growth and mentorship.
My work on this and other EA projects contributed to my promotion and opened the door for collaboration with other design teams within CBRE. These joint efforts were instrumental in creating the first company-wide Design System, “Emerald.”
This project provided me with invaluable insights that reshaped my approach to design:
-
Collaboration and Cross-Functional Communication: Working within a dedicated design team highlighted the importance of UX maturity. Great design often emerges from collaboration, and regular check-ins with stakeholders, developers, and product managers ensured that all perspectives were considered.
-
Code Base Accessibility: Having access to the codebase was a game-changer. It empowered me to make technical design decisions seamlessly, ensuring alignment with the product’s overall design vision.
-
Research-driven Design: Aesthetic appeal alone is insufficient for a product’s long-term success without measurable metrics to assess its impact. A deeply integrated research practice is essential for understanding evolving user needs and aligning design strategies with business objectives.
Redesign
Key Takeaways
The team divided the workload to begin creating low-fidelity wireframes in Figma. Although EA lacked a formal design system, we adhered to basic available guidelines for brand colors and fonts while designing UI components. Once these were finalized, we gradually increased the fidelity of the wireframes, ultimately evolving them into a fully functional prototype. Throughout the process, I collaborated closely with cross-functional teams and conducted routine checks with engineers to assess technical feasibility.
Some of the significant design solutions we implemented included:
-
Market-Level Reports: Users could view market-level reports directly within the UI, supported by a “Queue” system, allowing them to browse, add, and download multiple reports effortlessly.
-
Data Visualization Panel: A key addition was the Data Visualization panel overlaying the map, which displayed graphs of popular real estate variables derived from the MVP reports. Users could also view market summaries alongside tables and configure chart variables with detailed precision.
-
Enhanced Visual Hierarchy: We organized UI elements to establish a clear visual hierarchy, improving the overall appearance, intuitiveness, and accessibility of the interface.
-
Improved Table Design: The table was redesigned for better readability, incorporating features like column sorting, searching/filtering, sticky headers, and pagination.
-
Upgraded Map UI: The Map UI now featured clearer delineation of submarkets within sectors, supported by a significantly faster geolocation API for enhanced performance.
-
Onboarding Tutorial: An onboarding tutorial was added to guide users in understanding the new features and design updates.
Development
I published our prototype to a URL accessible to the engineering team, which included font styles, icon SVGs, media assets, and interaction animations. Leveraging my background in Computer Science, I played a significant role at this stage. With full access to the front-end codebase, I was able to make precise adjustments directly in the HTML and CSS, ensuring that the code quality matched the prototype’s level of detail. Additionally, we implemented media queries to guarantee responsiveness and optimal scaling of the application across various screen resolutions.
.png)
Usability Testing & Impact
To evaluate our success in addressing user concerns and adding value through the new features, we conducted a round of usability testing with 19 participants. Each session lasted 60 minutes, during which participants were instructed to perform key tasks while we observed their interactions. We then analyzed their experiences both qualitatively and quantitatively to derive insights.
The feedback was overwhelmingly positive. Users appreciated the visual improvements, and for our power users, the ability to view reports and charts proved particularly impactful. User satisfaction saw a remarkable increase, rising from 64% to 93%.
Below is a KPI Summary Table:
KPIs | Before | After |
|---|---|---|
Task Success Rate | 73% | 90% |
Time on Tasks (Average) | 4 minutes | 2.5 minutes |
Search and Filter Success Rate | 56% | 80% |
Task Abandonment Rate | 61% | 35% |
Feature Adoption Rate (Data Visualization) | - | 70% |