Homepage redesign of Azure.cn

This page was designed in June 2018. I started homepage redesign first as part of the Azure.cn rebranding project. Learn more about the rebranding project, the process, plan and study report →

Background

The previous version of the site has been through many minor iterations that included new features update, UX details optimization and visual elements fine-tuning for holidays. This redesign was however a major change to the site. We wanted a brand new impression that Azure.cn is part of Azure.com, not a site which sold cloud services independently in China. That was the strategic level change. Additionally, Fluent Design System was just announced and had to be considered it in the new design.

The goal for UI design was clear: to make sure we have the same look and feel with Azure.com. All the visual elements were going to align with the global site and introduce the ideas of Fluent Design. We had more freedom in the interaction design: the navigation, the content presented on the pages, and the user behaviors which we could tune for users in China.

Thinking

What should we present on the homepage? Besides the overall parameters, I checked both the one-month and 12-months data on each section of the homepage and navigation ( both header and footer ). I tried to find out what the users were interested in, how the hypothesis in the past went on, in which step we frequently lost our users. I checked data of the page views, the link clicks, unique visitors, new visitors, user path funnel by pages or content ID. Below are some pages of the report I produced. I reviewed the report with the stakeholders along with proposal of the wireframe for the homepage.

Overall thinking of the one-month data on the homepage

Each section of the homepage

Top navigation and footer

Result

For the wireframe part, I kept the overall content and made the following changes:

Top Navigation. Tend to the super-sized menu in the top navigation, especially for “product”, so that users would not linger and switch back and forth on the second level and make decisions. Set rules and show a “new” icon for newly released products.
Order of the sections. This was one of the biggest changes on the homepage. I had a hypothesis here, based on the data and previous user interviews: new users, especially new users in business background, were more likely to view the User Case area of the page. Famous companies got more clicks relative to less known companies. When designing the user journey, I hoped users could get some introductory information first before diving into details, since the homepage serves more new users. Returning users could skip this section or use the top navigation. That’s why I condensed the area but put the more popular links higher in it. After that, users could start to look at solutions. There would be more scenario-based solutions so that it would be much easier for users to onboard to the cloud. Whatever the position was, product area got stable clicks. That was reasonable because it was the foundation for users to understand the Azure offerings. After all important information part, community-related content and entry points to further details were provided.
Rearrangement of the community and quick links section. “Community” was above the last part except for footer, including 3 parts: webinars, Azure School and blog. The idea was to integrate community-related information together and just provide the entry point links which were good for decreasing the unnecessary dilution of homepage clicks. I decided to show the newest webinars and blogs, and the most popular curriculum and experts in card format. For the quick links part, I kept the 1-RMB-trial promotion entrance and resize it based on the data analysis. Start tutorial also got stable high clicks before, so I did not make any changes. At the bottom of the page I positioned three entry points: trial, tutorials and documentation so that they form a progressive journey for new customers.
Content details in each section.
1. I added an external icon and opened a new tab for external links.
2. Users could then click and jump to the product introduction page in card format in the products section.
3. I applied a new layout for new solutions.
Automation vision for the new homepage. I also established a few rules for each section: Cases will update by clicks. Webinars, blogs and Azure School all had their own rules. Navigation items could be adjusted by CMS.

For the UI part, besides basic styles change, like font size, font weight, colors and icon details, I applied the fluent design guidelines: layers to demonstrate the information relationships; detailed visual hints to differentiate the clickable items from pure text even in a very flat UI; full consideration of responsiveness; UI as the surface layer of the backend interactions to help users understanding the interface, content and relationships.

I made the following main changes:

Top Navigation. No maximum limitation for the responsive header and far more details based on the width of the browser; more obvious trial button and acrylic effect for the super-sized menu to show the relationships between information and the hierarchy when users interact with the items.
New styles. Change the basic font size into 16px, which is good for reading on PC. The size is usually 18px for English characters. Other size hierarchy changed accordingly. Further, a set of font size for mobile was also designed, according to the set on PC. Use semibold for titles instead of light to increase the contrast in font weight. That is also an idea in Fluent Design. Distinguish clickable and unclickable icons and also have the thickness for action icons by importance. Find more details on the Study Report.
New responsiveness and grid system. All elements stay on 4px-grid and 12-column grid system. No changes happened beyond 1608px. Details of it could be found in the Study Report in grid and breakpoints section.

Hi-fi mockups of header and footer