UI design of Azure School

This project was completed in early 2017. Below is the version for private preview.

Azure School is a website to support Developers and DevOps who would like to deploy their services on Azure with tutorials. There are two important features of Azure School.

The first one is “Course”. The formats for the courses are diversified, integrated videos, slides, articles, webinars and live-streaming etc. – as a related whole.
The other concept is “Curriculum.” “Curriculum” is a series of courses that detail central topics, like “Start tutorial”, “Open Source solutions on Azure,” etc.

We designed the responsive pages based on the ideas above. The strategy was mobile first so that all the design work focused on mobile devices, meaning the pages were optimized for this platform.

Challenges

Limited time. The timing for this project aligned with the three-year anniversary of Microsoft Azure in China. Additionally, the Project Manager had listed a large number of features to be incorporated. Though “mobile first” launched the effort, the requirement to support desktop was also included. So, how to prioritize?
Deciding on the style and orientation as fast as possible. This was necessary since all the UI for the new features depended on a final decision for the proposal. Because it would be a totally brand new website, it was necessary to think through the concepts, incorporate the results of discussions with other stakeholders – plus craft the proposals. All this had to be accomplished in a week.
Coordination of the development work. Since the PC layout would influence the bottom framework, it was necessary to jointly work on three front-ends at the same time. Beginning with the mobile mockups, there was continuous back and forth communications and networking regarding how well they looked on the PC.
Project communications. Though the developer work was divided by pages, the UI components for a specific page may not have been done by the developer who was responsible for the page. There was a danger that this work would not be properly integrated. Consequently, project communication, though difficult, became a necessity in order to achieve the proper alignment of each page’s UI.
PC version issues. The PC version for “promoted curriculums & courses” could have had roughly three to six promotion positions. It was necessary to provide flexibility for these circumstances within the PC version. This was not an issue with the mobile version since the users simply slide the tiles regardless of the number of courses or curriculum.

Solution

All the features were prioritized with several measurements. The goal was to determine what caused the most “pain” for our users and provide features that addressed these issues for them. This became the highest priority for the project. Much discussion ensued among all stakeholders to determine what features had the most impact on achieving this goal and what resources were necessary to implement them. It was also decided that lower priority features would be deferred to future iterations.
A multi-step process was initiated. First, conduct a competitive analysis and evaluate similar learning websites which target Developers and DevOps. (1-Day). Second, study articles on most recent (2017) UI trends, focusing on key points of UI design. (1-Day) Third, review the most recent best-thinking for responsive web design with emphasis on mobile optimization. (1-Day) Fourth, craft the proposals and review with the developers and Project Managers (3-Days) Finally, solicit and collect feedback, narrow the focus to one proposal and refine the details.
Evaluate the PC layout and draw the wireframe of the PC version for the developers. When developing the mobile UI, less time had been spent on the PC version. Though the development of the mobile UI initiated the process, it provided preliminary thinking for the ultimate layout of the PC version.
Communicate with the lead Developers of the project in order to better understand their divisions. Recommended that front-end and designers meet together the last week before the project was placed online.
Use cards. Established the display rules for these cards and their variation from mobile to PC. See the pictures below. As a consequence, each course or curriculum is flexible to demonstrate the content on the different pages.