During the 3 months internship in the IoT division of Alibaba Cloud, I delivered high-fidelity webpage design for their Industrial Internet Platform under the mentorship of senior designers. I also experienced a complete iteration of the design of dashboard editor, participated in the regular review and sharing among in-house UX team of the IoT division and other design groups in Alibaba Group.
I'd like to share 2 case studies and 1 set of takeaways I learned during the internship. If we de-construct typical enterprise web application into the following three elements: operation, content and navigation, each of my sharing here will cover different elements as shown below:
To comply with the non-disclosure agreement, I have omitted and obfuscated information specific to client/employer.
All interfaces shown here are mockup pages I re-draw based on but different from my works in internship to illustrate my understanding on specific design topics.
The dashboard editor allow user to create dashboard to view and control real situations in factories. I was responsible to iterate the design of data configuration panel highlighted on right. My contributions include:
Clean up the inconsistency and formalized the expediency from the last version
Implement design improvements to help user draw clearer interface, find and set attributes quicker
Propose design guidelines of this panel, enrich our overall UI library and speed up the design procedure
Process Capability Analysis (PCA) is usually used in industrial engineering to monitor the quality of a manufacturing procedure. I designed the PCA page in our IIoT PaaS together with PM and manufacturing engineering experts. My contributions include:
Analyze traditional workflow with ordinary statistic softwares
Explore chart-human interaction and visual style to help engineers work more efficient
Deliver my full fidelity design as the final document compiling opinions from all parties
Flexible setup flow
Design for tabular data
The dashboard editor helps build data dashboard and other display and control interfaces used in factories. You can add shapes, diagrams, text, button, etc. into the interface you want to build. Your end users can use those pages online after you've published them.
Once you add an new component into your drawing canvas, you need to use data configuration panel on the left to set up the component and connect them with real time data. Each component, such as pie chart, line chart and button, has different parameters need to be set up.
We get much more components to design in version 2.0 than previous version 1.0. In order to resolve some design inconsistency in last version and improve the efficiency, a senior designer and I built a mirco UI library including UX flow guidelines and UI components for the data configuration panel and eventually enriched our original PaaS design system. Afterward, out-sourced designer use these to deal with the design work of the new component given by PM.
The majority items of data configuration panel are pairs of parameter name and its value, so first of all, we compared two solutions: put name and value in separate lines or the same line. We start from our typical users, who are probably working in a middle size factory in South China coastal. He's unlikely using a new MacBook Pro with retina display. So we set the width of the panel as 210px to ensure it displays well on an ordinary screen.
Our design is currently optimized for Chinese domestic market, so we choose separate lines as our basic layout strategy. With this design, more pairs of parameter name and values can be accommodated in the panel without scrolling.
Besides simple name-value pairs, there are also many special setting operations for different elements, so we enumerate all possible situations, reused some UI components existing in Alibaba Cloud IoT design system and created those new components that specific to this data configuration panel.
For instance, a dropdown list may have many variations according to the amount and kind of options in the list: data type has limited options, so we use a relatively small dropdown; device number has many options, so we introduce the search feature; more complex dropdown is used in cases such as color scheme.
I was surperised by the amount of variations a UI component can be by building such a tiny components pool. You are pushed to make better design choices time to time when setting up guidelines. Even it takes a lot of patience and energy, it feels amazing when it eventually helps to speed up the progress.
Process Capability Analysis (PCA) is usually used in industrial engineering to monitor the quality of a manufacturing procedure. I designed the PCA page in our IIoT PaaS together with PM and manufacturing engineering experts in our team.
PM and engineers were mainly responsible for feature selection and prioritization. They convey the needs of our target users in factories to me, meanwhile also act as typical users when I conducting research and testing prototypes. I was in charge of proposing new flows, layouts, and interaction.
Image you are using MS Excel to plot some diagrams in order to understand your personal financing situation, you will not be given any hint or guide when you create a new blank Excel sheet, you need certain prior training in order to use MS Excel for a domain-specific task. Traditional statistic softwares are the same: they are neither exclusively made for PCA nor optimized to provide hints for novice users.
Even features are not optimized for PCA, needless to say, workflows. I summarize the problems of the old workflow of PCA as the followings:
Technical functionalities are strong but seem overwhelming for beginners
Repetitive data query steps lower the work efficiency
Intermediate results like diagrams are well organized and made easy to access, manage and reuse
The entire workflow distributed in separate window, software or even need to refer to physical materials
Our target users are not sophisticated manufacturing engineering experts in huge corporate like Foxconn, but local technicians in thousands of small and middle size factories. They are expecting some application that perform basic quality control functions and easy to use.
Therefore, our design eventually aims at democratizing the quality control technique to more manufacturing participants by providing more organized, easier and intuitive applications so advanced user can enjoy the more effective when completing the task, and a novice user can learn the concept and procedure by using the application.
In order to do achieve this goal, our PM and manufacturing engineer first prioritized the features and selected a limited number of functions that are frequently being used and straightforward. Afterward, those features are passed to me to be composed into new layout and flow.
Given the information structure is quite clear after feature prioritization and simplification, we directly start from layouts. The following are two main options:
Option 1: Tab Switching
This layout displays diagrams under different tabs, causing inconvenience when we need to compare diagrams. However, it gives sufficient space fo line up raw data under the diagram.
Option 2: Scrolling (Final Choice)
This layout better separate shared content and unique content, meanwhile, allowing comparison between different diagrams.
Based on feedback from PM and manufacturing engineering experts in our team, I explored the new possibility of visualization of PCA in tiny iterations. As the following mockup drawing indicates, some of my proposals are reasonable and accepted by them while some are not correct. It also raised a lot of communication with front-end developer and even server-end engineers when we discussed the necessity and feasibility of those design proposals.
As a part of IIoT PaaS, our new design has easier and more powerful data query process capabilities compared with traditional native software. We reorganized discrete steps in previous PCA and realize the entire basic procedure within one interface to boost the efficiency and usability. However, we do sacrifice many advanced but rare features offered by traditional statistics and PCA software, since we are targeting at different market segments.
Here are some general takeaways related to enterprise UX that I learned during the research, design, critique, meeting, and alignment in my summer internship:
First of all, not all of the setup steps need to be accomplished in a single linear sequence In many situations. Moreover, when you carefully break down those setup flow that was regarded as linear, you can find steps that are not necessarily sequential to each other. Therefore, it's a good strategy to allow flexibility in the system so non-standard operations may also work. Here are some tricks:
Leaving more than one way to access to the same page
Appropriately aggregating steps to shorten the perceived distance of flow
Put off some steps to the very necessary end to reduce the panic during the initial setting up
Parallelly displaying multiple page entrance as cards matrix but paying attention to keep them in reasonable amounts
The most common considerations in designing for tabular data might be how to display info and how people operate columns and rows. But wait, do re-visit these steps before designing tabular data:
Is it necessary to show raw data here? any other more intuitive or efficient display of information instead of a page with tabular data?
Have I understand the access authorization management and flow?
Have I checked the steps that lead the user here, so I understand what they are expecting and have experienced?
Effectiveness and Consistency: As far as I experienced, the design strategy for tabular data is highly case-based, which means we could tailor better UI to help query, filter, aggregate data based on the specific use case. However, it's REALLY important to design and make use of prefabricated building block. The need to build new features are always overwhelming, so it's not feasible for designers to design new interfaces every time. Moreover, it's also a great way to guarantee design consistency with building blocks when features are dynamics.
Quick Display: There are various ways to allow user quickly accessing to detail information of particular piece of data in a long table without jumping into another page: tooltips, sliding in cards, pop up window, expanding and retracting content. Thes efficient quick displays help a user better remember where they are and significantly reduce unnecessary page transitions.
We used to think the learning curve of professional softwares are always steep. Now, enterprise applications are becoming more friendly by transferring a function based design into a role-based design. Functions are compiled into tasks, and tasks are affiliated to different roles, so features irrelevant to the role or current tasks are not presented. This design results into a cleaner interface, less confusion, gentler learning curve, and eventually better experience.
From a more practical perspective, one of the popular applications of this idea is the "quick start" pages asking who you are, what you want to build, and what you need to fill in step by step. From a more strategic perspective, different product/platform that based on the same cloud computing capability behind can also be regarded as a role-based design in high level. By selecting specific capabilities from the larger capability pool to make a separate PaaS that meets a specific need of a certain domain, it utilizes the resource more efficiently and makes the life of user easier.
I experienced the typical challenge of balancing between building features and managing a good user flow in enterprise UX design. It's easier to organize existing functions into tasks and roles, especially when you have solid user feedbacks. However, when building new features and capabilities taking priority, all the roles, tasks and features are changing rapidly. Sometimes, finding an appropriate menu where you can insert the new feature into is much quicker and easier than identifying when and how different role or task will call this feature in different situations. However, I still feel excited and meaningful exploring how to implement the role-based design to improve user experience in complex applications
Compared with customer UX, we are facing a high cost of switching and priority of building new features and capabilities in enterprise UX. The decision made by the designer, especially the framework you set up, may have a long-term influence on how the application feels like.
I also like the complexity of enterprise UX. Working with professionals and learning about their secret unusual professional lives are attractive to me. As a result of receiving years of science and engineering education, figuring out complex logic and flows gives me more sense of achievement.
In long term, I also want to have the ability building up design system to help maintain UX consistency. Enterprise UX gives great opportunity working with guidelines, visual assets and patterns.
Summer internship in a factory during my undergraduate made me feel I may not like being a typical engineer, but I always like technology. Therefore, I feel it's a fresh and interesting way to approach different technology as a designer to work between humanity and technology.
During my summer internship in Alibaba Cloud, my engineering background helps a lot in quickly understanding the features and leveraging appropriate design languages to serve use cases of IoT in factory. For example, my course working with process performance index for manufacturing quality control gives me first-hand experience on how to draw and use those diagram, it eventually helps me generate a lot of alternatives when designing data diagram interface. My design allows the user to check raw data interactively on screen rather than presenting diagram and tabular data in static as same as in printed material.
In order to work more comfortable with the current trend in technology, I'm taking some introductory courses like machine learning in current Fall 2018.