Google Mesa Dashboard

Mesa uses smart devices like sensors, thermostats and hot/cold buttons to collect data on any space, then optimizes the space’s conditions to reduce wasted energy. The AI powered dashboard shows the impact of Mesa and lets you make adjustments, if needed. For commercial real estate owners and tenants.

Website: https://www.sidewalklabs.com/products/mesa

Client: Google Mesa

Role: UI & Interaction Design, Frontend Engineer

Tools: Figma, Jirah, Github, ReactJS, TypeScript, CSS, Material UI

Year: 2021

The process

Design

Collaborating with the design leadership and project managers to document and implement the optimal use of the chosen framework and design standards.
Help the new designers to understand, and adopt the MESA flavour of Material UI, to create new elements, components and screens.
Through a constant process of definition, ideation and testing, refine and optimize the interface and design processes

Development

Translate the design definitions and requirements to easy to handle deliverables.
Track and account for the proper implementation of the design elements, components and screens.
Frontend Engineering with ReactJS and CSS components, using Material UI.
Testing and refining the code trough one-on-one and code-review sessions.Enter your text here...

The outcomes

A fast-paced iterative design and engineering process that allowed the delivery of the first stages of a functional product.
Fully functional, ready to use screens and flows that provided real-time feedback from devices and buildings.
A design process that accounted and took ownership of the customisation of Material UI.
The standardization and future-proofing for the frontend engineering process, through the proper extension of Material UI.
A constant sense of accomplishment and improvement from the team, thanks to the code-review and one-to-one dynamics.