Daikin Hero Cloud
Daikin Hero Cloud
Establishing a functional and beautiful design language while monitoring hvac units
Establishing a functional and beautiful design language while monitoring hvac units
ROLE
UI Designer
CLIENT
Daikin
SKILLS
Wireframes, Prototyping, Color Variables, Components, Figma
SKILLS
Wireframes, Prototyping, Color Variables, Components, Figma
Daikin is one of the world's largest air conditioner manufacturers. I worked with the Daikin Hero Cloud team on designing a remote monitoring app for HVAC units.
Daikin is one of the world's largest air conditioner manufacturers. I worked with the Daikin Hero Cloud team on designing a remote monitoring app for HVAC units.
The Problem
The Problem
Daikin’s Hero Cloud team was in the beginning stages of creating a web app that allows building owners, technicians, and sales representatives to monitor and troubleshoot HVAC equipment data at different buildings on web and mobile.
The previous version of their app, built with a framework and without designer input, was not created with user experience in mind and lacked a unique look and feel to embody the Daikin brand.
Below is a couple screens from the alpha app.
Daikin’s Hero Cloud team was in the beginning stages of creating a web app that allows building owners, technicians, and sales representatives to monitor and troubleshoot HVAC equipment data at different buildings on web and mobile.
The previous version of their app, built with a framework and without designer input, was not created with user experience in mind and lacked a unique look and feel to embody the Daikin brand.
Below is a couple screens from the alpha app.
User Goals
User Goals
✧ Help building owners and service technicians easily review and diagnose alarms at their buildings
✧ Help building owners and service technicians easily review and diagnose alarms at their buildings
✧ Create a unique, modern user interface that was easy to scan and digest and also aesthetically pleasing to the eyes that follows Daikin’s brand guidelines
✧ Create a unique, modern user interface that was easy to scan and digest and also aesthetically pleasing to the eyes that follows Daikin’s brand guidelines
Business Goals
Business Goals
✧ Create a tool that helps technicians easily troubleshoot and monitor equipment, speeding up their workflow and saving money
✧ Create a tool that helps technicians easily troubleshoot and monitor equipment, speeding up their workflow and saving money
✧ Give building owners peace of mind to easily monitor the usage of their equipment at their buildings
✧ Give building owners peace of mind to easily monitor the usage of their equipment at their buildings
My Role & Design Team
My Role & Design Team
My main role was to lead the UI and visual direction. In addition, I helped out with story mapping, creating user flows and wireframes, and determining UX decisions.
I worked alongside my team that consisted of a lead UX designer, project manager, design manager overseeing the project, and a team of outsourced engineers.
My main role was to lead the UI and visual direction. In addition, I helped out with story mapping, creating user flows and wireframes, and determining UX decisions.
I worked alongside my team that consisted of a lead UX designer, project manager, design manager overseeing the project, and a team of outsourced engineers.
Crafting high fidelity designs
Crafting high fidelity designs
Adhering to brand guidelines
Adhering to brand guidelines
For Daikin’s brand guidelines I was given a set of colors and their brand logo to work off of.
For Daikin’s brand guidelines I was given a set of colors and their brand logo to work off of.
Creating Color Styles
Creating Color Styles
I created color styles and documentation based on the brand to help easily apply colors in Figma.
As new colors were established, once approved for usage by the client, I would add them to our color styles.
I created color styles and documentation based on the brand to help easily apply colors in Figma.
As new colors were established, once approved for usage by the client, I would add them to our color styles.
Forming a typescale
Forming a typescale
To keep hierarchy amongst text I established a typescale and implemented font styles in Figma to apply easily.
To keep hierarchy amongst text I established a typescale and implemented font styles in Figma to apply easily.
Spacing
Spacing
I established and encouraged the use of a spacing system based on 4px to keep spacing consistent and optically holistic.
I established and encouraged the use of a spacing system based on 4px to keep spacing consistent and optically holistic.
Iconography
Iconography
I leveraged Material Design's iconography to work around client budget and time constraints. Occasionally, I created new icons to fill a need for an icon that did not exist in the Material Design icon set.
I leveraged Material Design's iconography to work around client budget and time constraints. Occasionally, I created new icons to fill a need for an icon that did not exist in the Material Design icon set.
Responsive Grids
Responsive Grids
I developed responsive grids and converted them into reusable grid styles for Figma artboards.
I developed responsive grids and converted them into reusable grid styles for Figma artboards.
Start defining patterns
Start defining patterns
With the colors, font styles, spacing, iconography, and grids in place it was time to start working on the visuals of the user interface.
With the colors, font styles, spacing, iconography, and grids in place it was time to start working on the visuals of the user interface.
Header & Footer
Header & Footer
One of the first components I set up were the header and footer.
I created them as components in order to be reused and updated easily across all artboards.
One of the first components I set up were the header and footer.
I created them as components in order to be reused and updated easily across all artboards.
Wireframe
Wireframe
High fidelity
High fidelity
Tables
Tables
I worked on pages with tables first as it allowed me visually define several reusable components, such as:
I worked on pages with tables first as it allowed me visually define several reusable components, such as:
✧ input fields
✧ drop downs
✧ buttons
✧ pagination
✧ input fields
✧ drop downs
✧ buttons
✧ pagination
Alarm Details
Alarm Details
Working on the alarm details page allowed me to define the following components:
Working on the alarm details page allowed me to define the following components:
✧ cards
✧ weather widget
✧ comments
✧ linked units
✧ cards
✧ weather widget
✧ comments
✧ linked units
✧ cards
✧ weather widget
✧ comments
✧ linked units
Equipment Details
Equipment Details
Equipment Details allows users to easily find out information about a certain piece of outdoor or indoor unit equipment. It provides data points, links to highest-priority alarms, links to connected units, diagrams of pipes and their flows, live trending data.
There is a lot of information to digest on this page. It was important to keep this page as visually digestible as possible.
With all the different pieces on this page, it started to define a lot of the interface styles moving forward.
Equipment Details allows users to easily find out information about a certain piece of outdoor or indoor unit equipment. It provides data points, links to highest-priority alarms, links to connected units, diagrams of pipes and their flows, live trending data.
There is a lot of information to digest on this page. It was important to keep this page as visually digestible as possible.
With all the different pieces on this page, it started to define a lot of the interface styles moving forward.
Wireframe
Wireframe
High fidelity
High fidelity
User Profile
User Profile
With several pages starting to come together I was able to utilize many patterns that already existed for the user profile page.
With several pages starting to come together I was able to utilize many patterns that already existed for the user profile page.
Wireframe
Wireframe
High fidelity
High fidelity
Demand Schedule
Demand Schedule
The demand schedule allowed technicians and building owners to see the operation modes and settings for units in a calendar view.
The demand schedule allowed technicians and building owners to see the operation modes and settings for units in a calendar view.
Day View
week View
Month View
Wireframes
Wireframes
High fidelity
High fidelity
Dashboard
Dashboard
The dashboard was one of the last pages I worked on during our first scope.
The dashboard is viewed upon logging in and needed to be visually digested quickly as a snapshot of of the user's data.
The dashboard was one of the last pages I worked on during our first scope.
The dashboard is viewed upon logging in and needed to be visually digested quickly as a snapshot of of the user's data.
Wireframe
Wireframe
High fidelity
High fidelity
Furthermore, the dashboard widgets could be filtered. Users could remove modules from view.
This required me to visually see how the different parts of the dashboard would flex at not only different filtered views, but also responsively.
Furthermore, the dashboard widgets could be filtered. Users could remove modules from view.
This required me to visually see how the different parts of the dashboard would flex at not only different filtered views, but also responsively.
Iteration
Iteration
Not all of these designs came together at once. I would often get internal feedback from my team and also external feedback from our client.
Below are a few instances that changed over time.
Not all of these designs came together at once. I would often get internal feedback from my team and also external feedback from our client.
Below are a few instances that changed over time.
Table Headers
Table Headers
Initially I designed the table headers to not have color.
However the client wanted the tables to be more visually interesting.
I initially offered to go with a light gray background to provide some separation from the table rows.
However the client really wanted them to stand out and bring more color to the page so we settled on using a dark blue table header.
Initially I designed the table headers to not have color.
However the client wanted the tables to be more visually interesting.
I initially offered to go with a light gray background to provide some separation from the table rows.
However the client really wanted them to stand out and bring more color to the page so we settled on using a dark blue table header.
Initially I designed the table headers to not have color.
However the client wanted the tables to be more visually interesting.
I initially offered to go with a light gray background to provide some separation from the table rows.
However the client really wanted them to stand out and bring more color to the page so we settled on using a dark blue table header.
Nested Areas & Units
Nested Areas & Units
This is part of larger feature where you can edit settings for multiple units at once.
I put together the example of the left below to move away from the branching connections.
However, the client preferred the more traditional design pattern of the branching tree pattern on the right.
This is part of larger feature where you can edit settings for multiple units at once.
I put together the example of the left below to move away from the branching connections.
However, the client preferred the more traditional design pattern of the branching tree pattern on the right.
Iteration
Iteration
Approved
Approved
Solving UX problems while defining the design language
Solving UX problems while defining the design language
While my main focus was defining the visual language of the app, I often participated in UX decisions and sometimes took on UX role when needed.
I participated in story mapping exercises at the start of scoping out new features.
While my main focus was defining the visual language of the app, I often participated in UX decisions and sometimes took on UX role when needed.
I participated in story mapping exercises at the start of scoping out new features.
Refining and modernizing old design patterns
Refining and modernizing old design patterns
In the indoor unit controls feature we modernized the one of Daikin’s internal control tools, Thermal Mechanic Inc. (TMI).
The client requested for there to be no usage of radio buttons. We solved this request by utilizing radio button groups instead.
In the indoor unit controls feature we modernized the one of Daikin’s internal control tools, Thermal Mechanic Inc. (TMI).
The client requested for there to be no usage of radio buttons. We solved this request by utilizing radio button groups instead.
Daikin TMI
Daikin TMI
High Fidelity
High Fidelity
Responsive design
Responsive design
As we got sign off for our high fidelity designs, I created the responsive designs to match.
As we got sign off for our high fidelity designs, I created the responsive designs to match.
Prototyping
Prototyping
When needed I would mock up prototypes of interactions.
To the left is an example of navigating the different sensors on piping diagram on the equipment details page.
When needed I would mock up prototypes of interactions.
To the left is an example of navigating the different sensors on piping diagram on the equipment details page.
Dark Mode
Dark Mode
After finishing responsive designs in light mode I dived into creating a dark mode theme for the Hero Cloud app.
I returned to the orignal brand colors and play with tints of black and white to get the right hues of blue.
For some components I was able to utilize the same color in light and dark mode. For others I needed to create an alternative color that would work for dark mode.
After finishing responsive designs in light mode I dived into creating a dark mode theme for the Hero Cloud app.
I returned to the orignal brand colors and play with tints of black and white to get the right hues of blue.
For some components I was able to utilize the same color in light and dark mode. For others I needed to create an alternative color that would work for dark mode.
Documenting patterns
Documenting patterns
As the designs were coming together and getting client approval I started to document the established patterns into reusable components in a separate design system library file.
This became the first iteration of our design system which I later help refined into a second iteration later on during my time on the project.
As the designs were coming together and getting client approval I started to document the established patterns into reusable components in a separate design system library file.
This became the first iteration of our design system which I later help refined into a second iteration later on during my time on the project.
Results
Results
The Daikin Hero Cloud team has has praised my team and I for designing and delivering user experiences that not only help users accomplish their goals but also has defined and beautiful user interface that allows users to have an enjoyable experience while using the app.
This is turn has helped turn potential customers into subscribers of their product helping grow the business. This led to the Daikin Hero Cloud team continuing to work with my team and I on more features while expanding the app.
Futuremore, the Daikin Hero Cloud team invited us to attend a Daikin conference in Austin where we were able to speak to technicians and sales representatives and many expressed how not only was the tools solving problems for them but loved how pretty the interface was to look at as well.
Below are some photos from the conference where they were presenting our designs we created.
The Daikin Hero Cloud team has has praised my team and I for designing and delivering user experiences that not only help users accomplish their goals but also has defined and beautiful user interface that allows users to have an enjoyable experience while using the app.
This is turn has helped turn potential customers into subscribers of their product helping grow the business. This led to the Daikin Hero Cloud team continuing to work with my team and I on more features while expanding the app.
Futuremore, the Daikin Hero Cloud team invited us to attend a Daikin conference in Austin where we were able to speak to technicians and sales representatives and many expressed how not only was the tools solving problems for them but loved how pretty the interface was to look at as well.
Below are some photos from the conference where they were presenting our designs we created.
Reflection
Reflection
✧ Not everything needs to be a component. It is better to take an atomic approach and make building blocks into components and keep larger organisms separate.
✧ Not everything needs to be a component. It is better to take an atomic approach and make building blocks into components and keep larger organisms separate.
✧ Expanding design systems need more than a team of one person. Also it is challenging to maintain a design system while also working on features.
✧ Expanding design systems need more than a team of one person. Also it is challenging to maintain a design system while also working on features.
✧ While using a design system to create wireframes helps speed up workflow, it confuses clients whether wireframes are high fidelity or not.
✧ While using a design system to create wireframes helps speed up workflow, it confuses clients whether wireframes are high fidelity or not.