Prototyping / User Research / UX/UI Design / Web app

Digital Twin App

Reimagining the digital twin technology for office buildings with building management system.

Role

Chief UX/UI Designer

Platform

Web App

Client

Animated Insights

Year

2022

Use innovative solutions to visualise data to help reduce cost savings for building portfolio owners

Objective

The project was about how to fulfil the needs of our building managers, tenants and building portfolio owners and enable them to have more control and visibility over their work and building portfolio.

Idea

Introducing new innovative ways to visualise the building sensor data to provide more control and visibility for the building managers and reduce the time and effort of managing the building efficiency.

High-level goals

Key Project Enhancements

Give customers more control by introducing new features that empower users to compare and override data in real time.
Introducing our first tenant app that enables full AC temperature control within the 1633 Broadway office - Paramount Plaza.
Enhancing the user experience by resolving the current design issues.
Set the design strategy of the AI twin app and inspire the CEO and CTO to be part of the vision

Approach

Validated Insights & Client Testing

At the start of a project, as well as understanding the brief and collaborating with the UK dev team, I would also reach out to the product team based in the US and gain valuable insights into their work, any specific challenges and uncover the problems that were blocking them to work more efficiently.

Having this connection with the US team allowed me to reach out for further insights as and when I needed to dive deeper into the current issues.

Strategy & Vision

I hosted regular design sessions with both the UK and the US teams to demonstrate the design solution for both current and future improvement. I explained the reasons and benefits of the design thinking and gained buy-in from the team and the CEO. This also helped both the UK and US teams understand how we could make improvements iteratively and manage their expectations.

Design Execution & Validation

I would discuss the business requirements with the relevant people to get a deeper understanding of the problem. Then based on the complexity of the problem, I would produce journey maps and visual design flows in Figma. I would set up regular design huddles with the team to review the design and gain buy-in from the CEO, CSO and CTO with the help of the interactive prototype to help them digest the new concept better. I used this approach as a way to help others understand a design concept and to break down solutions into smaller chunks which became an MVP approach as a result.

Once the design was confirmed, I continued to support the development process and helped to iron out issues as they surfaced.

Projects

Final Designs

Examples of some final designs for various projects of the digital twin apps include Data Visibility Control, Onboarding Improvement, Batch Data Editing and App UI Improvement.

Data Visibility Control

Global Point Widget

Global Point Widget MVP

GPW in Display With Collection of Points

Mobile Version

Demo for the Chrysler Building Manager

Onboarding Improvement

New Device Manager

New Device Manager Journey Flow

Previous Device MAnager UI

New Device MAnager UI

New Device Manager Demo

Batch Data Editing

Setpoint Control Center

Batch Override MVP Journey

List of Completed Setpoints

Mobile Version

Searching and Adding Setpoint to Override

Setpoint Control Center Demo

App UI Improvement

UI Redesign

App Navigation Improvements

Mobile Version

Desktop Version

UI Redesign for Desktop

UI Redesign for Mobile

Vision of the App

North Star Design

Building Portfolio Page

Building Insights Page

North Star Design Demo

Conclusion

The result was a real success. I presented the new set of features including the global point widget with the Chrysler building manager and his team and explained the core benefits of having these upgrades. The new features were well understood and the new changes would enable them to do their jobs more efficiently so they were impressed with the result.

Consequently, this helped the company to secure its next maintenance contract with the Chrysler building.

Fibre Visualisation App

keyboard_arrow_left

Clubcard Pay Plus Onboarding

keyboard_arrow_right