My Avatar

Welcome! This is a craftsman living in Beijing. He used to work for Tsinghua University High School, DiDi Chuxing, and Tencent.


  • I'm glad to provide you with the following helps:
    1) Interaction design for mobile application;
    2) Design consultation of making a responsive website;
    3) Technical translation, from English to Chinese;
    4) Chinese localization copywriting, Simplified or Traditional.

    The picture below depicts what I'm interested in. Past experience is listed in it by relevance.


  • image of Adaptive Web Design in Chinese

    Jianjin-zengqiang: Kuapingtai Yonghu Tiyan Sheji



    The concept of Progressive Enhancement conveys in this book has provided an approach of thinking. It's about the best practice of communication between designers and developers. This approach has enabled them to go beyond the limits of their own perspective and achieve business goals together.

    — Comments by Hongyu XING, CTO of Inc.

    Well translated and easy to understand. It lets you know what progressive enhancement is.

    — A user from

    View comments on JD.comE-book on

  • image of Data Visualization with JavaScript in Chinese

    JavaScript Shuju Keshihua Biancheng



    In the data age, two professional skills become very important: the ability to analyze data and the ability to express data. Whether refining information from data or using information for the most effective communication, it places high demands on practitioners. Therefore, data visualization becomes the most effective means of communication in the realities of information explosion and time fragmentation. This book does not stop at the obscure theory, but introduces the display and interaction methods of different images with a vivid example system. In addition, the translator has a good technical background and truly reflects the essence of the original.

    — Comments by Ting LI, CEO of Yunfeng Capital

    View comments on JD.comE-book on

 Interaction Design

  • Promotion Webpages of DiDi Hitch

    As a marketing-oriented group, there are 4 roles within the design center of DiDi: Brand Designer, Interaction Designer, UI Designer, and Graphic Designer. Since the middle of 2015, with a 9-member design team, I was responsible for the interaction design and effects implementation of more than 20 promotion webpages.

    SPRING FESTIVAL TRANSPORTATION CALENDAR: This is a promotion webpage which cooperates with One-Way Street Bookstore. It can be accessed via a link in DiDi's Mobile Client. In order to attract users, we added a traditional Chinese Couplet game into this page.

  • Product Flow of DiDi Hitch

    Together with the design team, as an interaction designer, I was responsible for the entire product flow of DiDi Hitch. For fast-paced iterations, 70% of DiDi client's UI was implemented by webserver way, no exception this page was.

    The Survey Page After A Hitch Journey: After the trip, we will collect passengers' evaluation data on his or her driver to help us continuously improve the quality of our services. The survey page is divided into a real-name part and an anonymous part. The driver client will see a positive evaluation written by the passenger, and the negative evaluation written by the passenger will be submitted directly to the backend system anonymously as evidence, we will use that data to analyze whether a driver is good enough.

 Motion Design

  • DiDi Hitch

    Promotion Pages of DiDi Hitch Mobile:
    We believe in Sharing because it is of rock and sexy. Therefore, we should keep harmony between background music and the motion rhythm if a web page contains those elements. The value of animation-duration in the source code should be strictly tuned to be equal to an integer multiple of one beat.

    Tap or drag the content on the PHONE area to preview more if you are using a desktop browser.

    Transport During The Spring Festival


    Trip Data on The 1st Anniversary Show


 Design System

  • DiDi Hitch

    Since 2015, The design system replaced the guideline, gradually became a more efficient design practice. Some organizations, such as Salesforce, have done best practices in that way. The design system incorporates elements such as content strategy and accessibility into the design requirements and unifies the design guideline and component library. Rely on my previous experience of Tencent Weibo's Web design guideline, and Brad Frost's Atomic Design philosophy, we created this design system of DiDi Hitch.

    Firstly, this design system serves Web products of DiDi Hitch, including the built-in webserver and the promotion pages. Secondly, this design system serves UX designer and front-end developer. It is both a front-end guideline and a UI component library.

    View it online

 Make Websites

  • The International Official Website

    From June to November 2015, I was responsible for interaction design and front-end development in the redesign project of the International Official Website of Peking University. 3-member team, 3 editions, delivered after the 6-month design & development cycle and passed the final assessment.

    The International Official Portal Website of Peking University has made its debut on November 20th 2015. This new responsive site is designed with "Future-Friendly Design" thinking, applied bootstrap grid system, and support IE7+ browser.

    Visit it onlineDraft 1Draft 2

 UI Development

  • Tencent Weibo, Weishi

    Responsible for creating user interfaces by frontend coding, PSD to HTML/CSS/JavaScript. Apply BEM methodology to improve coding quality, Web design guideline management. Responsive Web design, and bandwidth-oriented optimization work.

 Build Tools

  • UFO Animate


    UFO Animate is a CSS animation system that can quickly build CSS animation effects visually. Depends on your system language settings, English and Simplify Chinese are supported.

    Try it online