This project was completed in July 2018.

Goal

The design goal was definite in this project as you could see from a sight of the previous version that there was no UX design at all. Therefore, the goal was:

• Refine the UI styles
• Optimize the basic form process and define the UX details
• Solve the confusing points that had been noticed in this phase
• Plan and log down the next iteration plans

The previous version

• 

• 

UX

• The biggest change in the improvement was that I smoothed the whole process since one of the pain points from the previous version was that users had suffered from the obscure error pages, which meant they relied on the back button each time they corrected their mistakes. This was very insecure and abrupt for the users. Further, I cleared up all the wordings of the error messages so that users would know what the problem is much clearer than before.
• I optimized the procedure of uploading files and showed the uploading limitations directly on the page. It must be much fluid than before.

The basic definitions

• 

• 

• The whole form was separated into 2 parts. Users have to leave their personal contact information for the further communication with the agent and summarize the problems. Titles made the form clearer for users to know what they were going to do.
• I also fine-tuned a few details, including those confusing wordings, the space between numbers and Chinese characters, the capital and small letters in English, concealing part of the explanation in the information icon, adding icons for the external links, simplifying the header footer and opening a new tab for this form because it isn’t a page on Azure.cn.

The filled form and error messages

I added the time, calendar and calendar range selector for the dates-and-time-related items in the form. I set the default value of the calendar selector for the start date of the problem always today because users would ask for help as soon as they discover it. And for the start time selector, there is no default value. The drop-down selector will collapse automatically once both minute and hours are selected. Further, users were going to see the clear button after filling in them since these two selectors are optional.

And for the calendar range selector on the ticket history page, I set the default value a half year from today because the system now can only support the span of a half year considering the performance. The main purpose that users come to this page would be to check the status of the tickets. Additionally, I disabled the dates before September 25, 2015, instead of telling users that they can’t check the records before this date.

The time, calendar and calendar range selector

• 

• 

• 

The biggest change in history page is the sequence and the items optimization in the table. As mentioned above, most users come to this page to check the ticket status.  I added colored dots to represent different status and set it the first item. The order now is based on the importance of the items to the users. As a consequence, users can see all the information once they reach the page without doing anything. Besides that, I combined the last updated time with the status, remove the useless channel and closed time information. And we planned to have pagination and sorting by items in next iteration.

Ticket history page

UI

For the UI part, I used the new design language across Microsoft, Fluent Design System and the basic styles on Azure.cn. Please find more information about the new styles from Azure.cn rebranding study report and homepage redesign of Azure.cn.

Ticket submission form: time selector

The layout grid system

Both mobile and tablet friendly

The new styles
Below is the styles summary I applied in the new design, including font styles, colors, responsive principles, grid systems and so forth. What is worth to mention is that all the elements on the form just stand on the 4-pixel square grid besides the layout grid.

• 

• 

• 

• 

• 

• 

• 

• 

The new illustration on the maintenance page is according to the brand new Azure illustration guidelines and Azure marketing guidelines. I am going to design the error pages like 404, 500 ones in the next iteration. So the illustrations on those pages will become a collection, together with the maintenance page, animation also included in the plan.

The maintenance page

Some pages on Azure illustration guidelines

• 

• 

• 

• 

• 

•