My Role: I conducted task analysis, sitemapping, sketching, wireframing, interaction design, UI design, and stakeholder evaluation all with the other two designers. And I also generated a design library and documentation on my own.
Sony China's intranet had become more and more complicated and hard to use during the past 10 years, so we shifted to a new platform and redesigned the intranet. We collaborated closely with the stakeholders and engineer team at Sony. Now, the intranet has already been launched.
Redesigned Sony China's intranet which is used by thousands of Sony employees now
PREVIOUS INTRANET
Cluttered, Complicated, Overwhelming, Chaotic
How might we make it easier for users to navigate such a website with a large amount of information.
How might we design a set of list-page templates which are able to support all the data types from more than ten departments.
Challenge
NAVIGATION
Sony China's intranet contains a large amount of information from staff's daily work and development to various news and events. Therefore, a good navigation system is especially important for such a website in order to help users find what they need easily.
Mega Menu
Search Bar with Filter
Side Navigation Menu
Side Navigation Menu _ A Great Place to Work (HR)
Breadcrumb Trail
List Page
There was a large amount of data required to be migrated to the new intranet, and data types varied a lot according to different maintainers. But they had to remain the same since it was impossible for maintainers to reedit them one after another. However, as designers, we were not supposed to create a brand new template for each maintainer since we must keep the consistency of the website. Therefore, we decided to create a couple of templates which can not only keep all the existing data types, but also ensure the learnability for users.
For example, different maintainers had various requirements of the list page because the types of the data they wanted to upload were different. Following are five templates of list page designed by us. We also sent them to maintainers and iterated according to their feedback.
Design Library
I generated a design library on my own in order to help us double check the visual consistency of our design. Besides, it can also be used as a design guide of this website later.
Process
Sitemap
Because of the old platform's technical limitation, Sony China's intranet descended into chaos as new contents were added. We analyzed the sitemap I made for previous website together, and found that it could easily make users confused. Meanwhile we had a couple of stakeholder meetings with representatives from different departments to collect user needs. Besides, the previous intranet had been used by Sony staff in China for about ten years until we started to redesign it. Therefore, we agreed on not changing the info architecture too much in order to make it easier for users to get used to. Finally, we rearranged the information architecture and made a new sitemap.
Sketch
Sony's intranet contains a large amount of information and is maintained by many departments together. It was a tough task to make the website easy for users to understand and navigate. And consistency is a critical point. So the mentor and I brainstormed some ideas to plan out the interface using paper prototype.
Wireframe
We need to both meet users' needs and fulfill the requirements of the stakeholders who were going to maintain the website. Based upon the sketches, we began to create wireframes and sent them to the stakeholders. Then, we iterated our wireframes according to their feedback.
Prototype
We designed and built prototype with Sketch and Figma.
Design Documentation
I also generated a design documentation with the mentor. It was used to communicate with stakeholder and will be used as a design guide for people who want to review or even redesign this website.
