NetEase,

UX Designer/Developer Intern
Summer 2018
Hangzhou, China
NetEase Inc.

In the summer of 2018, I had the privilege to intern at one of the most renowned tech companies in China, NetEase. During my internship, I worked with my mentor to help improve gaming design and prototype efficiency by designing and developing an internal web platform used by 500+ people in the NetEase Pangu Creator Studio. Implemented front-end using Vue.js and presented the tool to a panel of 60+ people.

NetEase, Inc. (网易, 網易) is a Chinese Internet technology company providing online services surrounded on content, community, communications and commerce. Founded in 1997 in Guangzhou, the company was a key pioneer in the early-day development of Internet services for China. Today, NetEase develops and operates some of China's most popular online PC and mobile games, advertising services, email services and e-commerce platforms. It is one of the largest Internet and video game companies in the world.

Highlights
- Improved usability of an internal design and prototyping tool for the NetEase Pangu Studio of 600+ people
- Designed and Developed Version 2.0 within a small team of 2
- Presented and marketed the platform at the end of internship to a panel of 60+ people

Context
- The entire Pangu Studio is of 600+ people but the UX group only consists of ~10 people. Team leader wishes to focus on streamlining existing UX practices and the design handoff efficiency
- Current functionalities are all basic UI components - the design/prototype platform is of low usability and utilization

Below is a list of components that are currently active on the Pangu Design Platform, with what were newly implemented during the summer highlighted in grey. All components are implemented interactively with HTML/CSS/JS and are rendered front-end with Vue.js.

Group Feature
Problem
1. PMs and GUI designers would sketch various designs and ideas -> No Standardization
2. Repetitive work on same UI components aross various projects-> Low Efficiency & Re-usability
3. Extensive basic components and toolbar if added more components -> No Scalability
4. Still not of high usability and efficiency with exsisting components to achieve complex UIs -> Low Usability

Design Values
1. Standardization
2. Efficiency & Reusability
3. Scalability

Research
1. Sketch Symbols for reusable components
2. Photoshop Grouped Layers
3. Invision (Craft Manager) Cloud Collaboration
4. Internal NetEase server that can be used to host infinite resources
5. In CS, there is principles of inheritance and polymorphism

Ideation
1. Enable multiple section and copy/cut/paste
2. Place a canvas of custom draggable size and dashed borders
3. Double click the canvas to enter Edit Mode with overlay on top of main artboard and start editting components
4. Click anywhere else to exit Edit Mode
5. Name grouped components and upload to the NetEase server
6. Next time people can just choose pre-edited group components and start edit on top of it

Testing
1. There is still room for optimization -> users demand a function that has 1 to multiple relationships
2. In real work, still requires repetitive editing if have duplicate groups of the same styles

Solution
1. Requires a new component, List that reflects a one to multiple relationship
2. Be able to modify one single cell to affect all unit cell styles

GUI Upload Feature
Problem
1. Previously can only upload assets from local files -> No Version Control
2. Game design is GUI heavy with customized GUI and graphics, size, quality, color -> Hard to Maintain All Assets
3. Inconsistent local copies and versions of GUI cause confusions -> Low Efficiency & Standardization
4. Low efficiency for UX designers when trying to put together high fidelity prototypes -> Cross-Team Collaboration
5. Inconsistent namespace with UI components -> Education & Standardization

Design Values
1. Standardization
2. Efficiency & Reusability
3. Scalability

Ideation
1. All GUI assets are uploaded and maintained by UX and GUI team to company back-end server
2. Apply consistent namespace to each UI and GUI components

Research
1. Zepelin
2. Adobe InDesign Assets Sharing
3. Invision (Craft Manager) Cloud Syncing
4. Internal NetEase server that can be used to host infinite resources
5. Google Drive

Testing
1. Combined with the Group feature mentioned before, it is powerful enough to create complex GUI components
2. Higher maintenance for the UX and GUI team to organize all the assets
3. The conservation of engineering efforts -> High maintenance leads to better usability for the users

Final Result
Below is a video demonstrating the whole workflow using the new Pangu Design Platform. In this video I screenshot, three UI interfaces were shown to be built into interactive components from the Photoshop designs. These interactive components suggest both flexibility and standardization of the design styles in the demo. The newly implemented Table, Group and List features were showcased in the demo. This specific video file was also upoaded to the internal discussion forum of NetEase as a tutorial for the platform.

Find me on