Empower the manufacturing industry with industrial digital twin

My Role

UX Designer & Researcher, MR Prototyper


Sketch, Unity, C4D


July - Aug. 2020


In Summer 2020, I worked as a product design intern with Alibaba Cloud Industrial Brain team in Hangzhou, China.

It was an amazing experience for me to contribute to the PaaS offerings and industrial digital twin roadmap of Alibaba.

I worked on 3 projects: 1)A developer tool 2)A mixed reality app 3)A research report on future roadmap opportunities

Overview of my internship

To learn more about ‘Industrial Digital Twin’, check out this article on Medium which was written by my team and translated by me.

Project1: DTwin
DTwin is a web-based PaaS product that generates visualization applications for industrial monitoring.I designed two features for DTwin.

Impact: The features were shipped in late Aug. 2020, which helped DTwin team achieve the first million in revenue.

Project2: Research report and proposal
I conducted interviews(10+), field research(3+) and competitive analysis(7+) to find pain points in industrial production and opportunies of industrial digital twin applications. Further analyzed ‘manetaince’ scenario to dive deeper into the needs of different roles, and proposed the possible solutions for this scenario.

Impact: The proposal was added to the team’s roadmap.

Project3: Mixed reality app for indutrial maintenence
This project was a touchpoint of the proposal above. Designed a tool that assists shop workers to do daily maintenence. I developed a demo on Hololens utilizing the assets from DTwin. I initiated and created ‘Mixed Reality Design Guide’ that covers the design process, hardware capabilities, and deliverable format for internal references.

Impact: Demo video received interest in customer meetings; design guide was shared in sharing sessions with 10+ designers

Due to the NDA, I could not reveal the details of the projects. However, I would love to share my reflections and I will use the DTwin project as an example to present my design process.


Designed a feature to display data in 3D view for industrial monitoring

The product I designed for is DTwin. It is a web-based platform for engineers to generate industrial monitoring applications for plants and factories to monitor equipment operation and parameters.

Hold on, what is DTwin? Who use it?

The direct users of DTwin are delivery engineers, who use the DTwin to configure and generate monitoring applications for end users--plant O&M staff. Therefore, we have to consider the needs of both groups.

Start from designing for the end users

My approach was to start from the monitoring applications, firstly figure out how to display the data, so we can look back into how to configrue the data.

To refine the end-user's needs, I researched the actual project's needs (ZTE), and also went to the factory to conduct field research and understand the industry norms and habits.When designing for the configuration, I also communicated frequently with the front-end engineers of DTwin to understand the capability and cost of technical implementation.

OK, to display data of the measure points in 3D view. But what exactly do end users need?🤔

After research, the refined requirements include these. There were three areas that were more ambiguous and difficult to design: there were interaction methods, zooming display, and card layout. I first dispersed the single points separately and chose the final solution by evaluating the advantages and disadvantages and iterating.


How do end users interact to view the measurement points and the corresponding data?

“I want it simple to interact. I also want to view data of a specific measure point. ”
The trade-off between learning cost & flexibility

The advantage of the final solution is that it is flexible and solves the problems of other methods, it allows to interact directly with the measurement points, and for each card it is possible to configure the desired interaction method, and it can be triggered unconditionally. This makes it easy for the user to distinguish between important and minor data.


How do we define the layout rules of the data cards?

We want the data cards to be organized, and the rule should be technically feasible.
The trade-off between technical constraints, visual, and flexibility

The first three options were to develop an automatic layout rule. After critique and discussion, we changed our mindset and decided that if we gave the option to adjust on top of the automatic one, we could solve the problems of unattractive, capped quantity and low flexibility of the automatic layout.

The final solution was to give the card position coordinates a default value and provide the delivery engineer with an option to set the offset value.


How to display cards when zooming in and out?

The trade-off between readability & page layout & experience fluency

For the production line view, the difficulty lies in how to display the cards when scaling. The first two solutions I did not change the font size when scaling to ensure readability, by reducing the card content, and by integrating multiple cards to avoid card overlap. The problem with such a solution is that the user experience is not smooth, the card style will change as the scaling ratio changes, and the development and configuration costs are high. After a trade-off between readability and smooth experience The cards can be seen clearly in more than half of the scale range, and it is a smoother experience to read the cards by zooming in.

Deliver the final Design of the visualization application

What has been improved and refined compared to previous version of DTwin?

Compared to the previous version, the design solution was optimized in several aspects. Many design decisions and iterations were made before I could organize and define the elements clearly, and generate the final design. For example, we need to consider which information is most important to the user, whether there are conflicting interactions, limitations of technical capabilities and costs, etc.

Now we’ve decided the design of the final application. How do engineers configure it on DTwin?

Due to NDA, I could not reveal the hi-fi mockups of the configuration flow. Please contact me if you are interested in learning more! 😊

My main take-aways

Learned more about myself as a designer ️🎨

I had the pleasure of attending many sharing events and seeing other design teams' businesses and approaches. I gained a better understanding of what I like and what I less like as a designer. I found myself more value-driven, that I like solving complex problems and enjoy making products that really empower people. This has helped me a lot in my career planning.

Learned to work with a crossfunctional team on a product that requires lots of domain knowledge 🛠

Working on such a new and specialized product, I learned how to be a ‘small pm’, to research and refine requirements by myself; I also learned how to interpret engineers' opinions and take ownership of the design. I realized that users are not always accessible and rely heavily on the research and insight of pm's and account managers. Who to ask and what questions to ask are especially critical.

Shout out to my best mentor and the amazing team!