The building environmental control system of Delta electronics has been using for several years without any design guideline. Facing the extended business needs, the company would like to rebuild a user friendly interface and create a brand’s guideline.
Current UX flow could not fit with users’ working flow. The system is relevantly easy for old users but hard for new users. The UI is very different by regions, and users behavior are also quite different.
1. Lay a foundation for Delta Electronics' digital brand to maintain its consistency and as a guideline throughout various business units.
2. Considering different types of workplaces, starting from the core concept of improving the efficiency of system integration, empowering users to adjust and control equipment intuitively and reduce misjudgments.
Product Designer x 1
Design Intern x 1
Project Manager x 1
Front-End Engineer x 2
Product Designer
User research, competitive analysis, usability heuristics review, visual design, rapid prototyping, design System
10 weeks
In recent years, DELTA Electronics has gradually moved from a "key component manufacturer" to an "overall energy-saving solution provider". Therefore, developing new fields into their repertoire. The upcoming challenge for DELTA is to improve the user experience at a software level and the overall brand recognition in this expanding field.
The score of system usability scale is raised by 44% and the client is very satisfied with the whole process and the results. Therefore, this happy cooperation opened up another door for us to get a new case from same client right after this project.
Firstly, understand the current product development situation, and then propose design ideas and suggestions.
Conduct an interview with the operation process of factory personnel and various stakeholders to understand the needs of all parties. Then combine with multiple methods, design theory, and propose a number of design suggestions.
Through qualitative interviews, we use semi-structured interviews to understand the workflow and the needs of factory affairs, IT, and brand teams. 9 in-depth interviews in total, from work content to troubleshooting and use expectations.
Based on Nielsn’s 10 Heuristics rules and previous user interview, we reviewed the system and summarized problems into 3 categories: UX issues, UI issues and Brand issues. And our aim is to optimize all the issues into new design.
The colors are too diverse, and the color standards are have to be establishedThe meaning of color needs to be defined jointly to ensure that people have a common understanding of color.
"The color is based on the display status of the machine. Red indicates running, and green means stopping. It is also reasonable. Running means there is danger."
- User01
The overall saturation is too bright. Important information cannot be highlightedInformation overload along with high-saturation colors are used in a page, which makes it impossible to distinguish the primary and secondary relationship through color, which increases the time for adjusting parameters and judging abnormalities.
"The current page looks ugly and dirty, with functions packed and crowded, and there are many colors."- User02
Clickable buttons are not clear which takes time to interpret and increase learning costs.
There is no uniform display method for the clickable fields, and many seemingly unclickable fields can actually be clicked. If you have not learned beforehand or have not used it for a long time, you will not be able to find the parameter field for adjustment.
From the interview we found that the factory staff will distinguish between different specialties and learn different pages, and some pages may only be used by senior factory managers.
Different regions have different systems, and there is no unified brand vision.
Covering the brand logo and factory area will make it impossible to distinguish the systems of different factory areas, and it does not match the brand image.
The interface of the Taoyuan factory in Taipei mostly uses bright colors to display the status, while the factory in mainland China uses gray and green tones and low-contrast colors to present different statuses.
After researching for the competing products relating to building controlling product, then we referred to automation-related products, and finally studied different dashboard designs. We showed the clients some good examples in the market and why it is good, so we can extract some advantages from the research and incorporate into new design as references.
After qualitative interviews and desktop research, we made product adjective cards to understand how users react to current product, and then disassembled current interface and asked the active users to “design for themselves” (re-assemble the components). As they were doing assmbling, we observed their actions and asked why they put in such order. Beside, I printed out a design revison based on the last interview and research findings, so the users could compare both the old and new version to speak how they felt.
After several design discussions and user testing, we designed both light mode and dark mode to fit different working scenarios. The design process was challenging in order to meet users' needs and aesthetic standards. I felt frustrated that time so I didn’t keep the sketches :( After many struggles, here is the final version of the key pages for this building control system. And we tested 15 users’ reactions with SUS evaluation and received positive feedback.
Both dark mode and light mode system have suitable color contrast. Compare to previous version it can lower visual fatigue while working long hours and create aesthetic pleasure.
Use the same components and modular elements to align all region’s systems and create the brand’s spirit.
Use the same components and modular elements to align all region’s systems and create the brand’s spirit.
In order to ensure high consistency and quality of Delta's digital products, the components and definitions that can be formulated in the development process are listed in this specification, so that when the engineering development team participates in cross-departmental collaboration, it can be effectively aligned and shorten the cognitive gap between the two parties, improving the efficiency of communication and output.
The brand’s core strategy is smarter, together, and greener. In order to relate to it, the design strategy is corresponded to it and is translated to a more understandable way.
We chose simple, clear and modern icons to ensure that each icon can be easily identified even in small sizes. When drawing, the image of light gradient is used to create a sense of technology style, and two versions of day/night mode are provided to create a detailed user experience for the brand.
The main colors include the three main primary colors that convey Delta's brand spirit, and based on the main primary colors, a harmonious spectral gradient is extended, which can be used to emphasize page elements and create a clear UI hierarchy. In addition to the main color and grayscale color, if additional color supplements are required, the auxiliary color within the specification can be used to maintain the consistent and professional style of Delta products.
As the main designer in this project, I conducted the research and did the full redesign with the intern. There were many challenges during the project but luckily I could ask a senior researcher and my director for advice which made me grow faster throughout the process.
The most difficult part of this revision was that the inertial operation of senior personnel does not conform to the logic of UX usage, so it was impossible to build a new product from scratch. After many rounds of negotiations, the design met the logic of usage, aesthetically pleasing, both user-friendly and easy-to-learn. In the Agile development process, the way of running in small steps can indeed make the design develop more efficiently!
