Sony Intranet Design


2017, Shanghai, China


Role
Interaction Design, Information Architecture, Research Synthesis


Team
1 design lead, 2 design interns


Timeline
6 months

Redesigned Sony China Intranet to boost content engagement and office efficiency



Sony China Intranet is an internal communication platform by over 40,000 Sony China domestic employees.

Together with another UX intern and a design lead, I worked with developers to help redesign the Sony China intranet in 6 months. 





01 Context





The old intranet can no longer support content growth.


Built 10 years ago, the old Sony China Intranet had a rigid information architecture that can no longer support the content growth associated with different departments.



Old Sony Intranet Portal

New Sony Intranet Portal






I redesigned 2 key features


The new intranet needs to increase efficiency and clarity while addressing Sony enterprise culture.



Site Navigation


new site navigation design

The navigation allows user to easily navigate complex information system with mega menu, site menu, and breadcrumb, minimizing clicks at different site hierachies.

News



new news thumbnail design

The news layout design not only addresses information hierachy and consistency of look, it also make it adaptable and interactive to encourage content creation and cross-department communication.








The site engagement was boosted by 10%, and the size of the intranet was reduced by 15%.



The click-through rate of the intranet has been growing 10% year-on-year since the launch of the intranet in 2019. The engagement went up 14% during the month between April and August (compared to 2019).
The new information architecture reduces the size of the intranet by 15% by cutting away the redundant intranet pages





02 Research







Information architecture:
detangle the complex system


check out full sitemap here

I mapped out the existing structure through a comprehensive sitemap with my team to understand the existing structure of the intranet.  

This exercise helped me identify broken connections on the existing portal, as well as have an intuitive understanding of the types of service people are accessing from the intranet.








Synthesize Insights


My team and I held an internal workshop with stakeholders from different departments. We also talked to site-maintenance developers to identify pain points. 


insight 01

Site navigation and customized tools are key to address employees’ work efficiency





Old intranet navigation


The old intranet has a rigid three-column structure. With growing site content and feature over 10 years, the navigation gets confusing and strenuous: the overall site layout looks similar, but the navigation function on each page is different.
insight 02

Employees are not only information consumers, but also content creators  of the intranet





Analysis of visual inconsistency


The intranet is not solely maintained by website professionals. Instead, it is also a portal where amatuer employees need to upload the latest news and updates of their department. In other words, employees not only consume information on the intranet, but also are also content creators.





03 Two Design Challenges







design challenge 1

Redesign site navigation and customized tools to improve office efficiency


response to insight

“ Site navigation and customized tools are key to address employees’ work efficienc”





Break the layout, free up space


The old intranet has a rigid three-column structure. There is no indication of active page in menu navigation, and it was strenuous to jump between site depth.

Based on the first research insight, I conducted usability and interaction analysis to find solutions that free up viewport space, and to orient users.









Align design with stakeholders



I mapped out a stakeholder map responding to stakeholder values. From the feedbacks I got from wireframe prototypes, I learned that the HR department preferred the old three-column layout because they feel more familiar with the old site navigation.







I revamped the navigation based on the insights.




Breadcrumb


A breadcrumb under the top sticky menu allows the user to navigate site-depth and trace their browsing record.










Vertical Sidebars


Sidebar navigations are used widely for the HR department to navigate the complex information architecture. The secondary navigation will be displayed on the left, and the tertiary navigation will be displayed on the right.











Mega Menu


The meta portal navigation will still exist as a sticky menu on the top so that users can easily switch to different information portals.








design challenge 2

Redesign news layout to address visual inconsistency, and encourages cross-department interaction


response to insight

“ Employees are not only information consumers of the intranet, but also content creators”







Research interaction design



The news thumbnail design not only has to address content prioritization, but also inconsistency in news headlines with varying length.

I conducted interaction research looking into different existing interactions that adapts to content dynamically.







an early wireframe of “like” feature in the article wireframe 


an early wireframe of  “like” feature in the landing page wireframe

“like” the News



Sony enterprise want to encourage cross-department interaction in the new intranet design, and the design team decided to incorporate “like” function into the news design.

I initially designed the function where employees can “like” and “forward” a post, with the statistics showing under the post. However, when aligning design with developers made me realize that the intranet hosting service does not provide functions to track individual IP on browsing the page, thus showing a number all the time would be inaccurate.










I designed a new browsing experience.








Highlighted Sony culture


I deliberately gave Sony annual events and leadership memo more space for display, because they are prioritized by enterprise.





Flexible thumbnail size


The layout addresses the issue of potential inconsistency of bilingual posts by creating adaptive edges of the news cards that creates visual uniformity and flexibility of headline space.








Likeable news


I get rid of the static display of “like” numbers in the individual news page, and the number of likes will only pop up when employees click on it. The number will not represent the accurate overall likes to individual employees, but will represent an accumulation of likes based on cookies.





04 Design System








setting the design system

I took the lead in defining visual style and interaction design.


I referenced many Sony internal presentations from the Japan headquarter to gain a deeper understanding of the company value and culture. Sony needs to have a younger, refreshing company branding internally, while maintaining its core value of open collaboration.








Interaction metaphor


I decided that the interaction metaphor should resemble a sticky-note, an artifact that invites collaboration, communication, and is easy for mobilization. The interaction with the website components should be blocky, showing awareness by floating.
The interaction with the website components should be blocky, showing awareness by floating. I picked 4 keywords for the visual design: light, airy, green, soft







Design Spec Doc



I handed off deisgn sppec doc with redlining, design components, color and typography.







Reflections




There is no One-Size-Fits-All Solutions


The intranet is designed for all Sony China employees, however, we collected different feedback on preferences during the design research.

When optimize information architecture, taking users’ mental models should also be taken into consideration. UI design with complex navigation structure needs to build up change overtime.




Designing Complex System Requires Systems Thinking


Throughout the design process, I have to make design decisions aligning different stakeholders including developers, users, and enterprise managers. The complexity requires systems thinking to frame design challenges.