Benny Chak

My Avatar

Welcome! Here is a craftsman living in Beijing with an X-shaped skill background. He owns a M.A. degree with distinction from the Education University of Hong Kong. As a professional UX designer who is familiar with Web design and technical writing, he used to work for Tencent and DiDi Chuxing Group and owns 10 years of industry experience.

Overview

  • 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.

Interaction Design

  • Promotion Webpages of DiDi Hitch

    2016,

    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

    2015 - 2016,

    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

    2015 - 2016,

    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

    December 2016

    Display

    Trip Data on The 1st Anniversary Show

    June 2016

    Display

Design System

  • DiDi Hitch

    2016,

    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.

Make Websites

  • The International Official Website

    2015,

    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.

Build Tools

  • UFO Animate

    2016, PERSONAL PROJECT

    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.

Translation

  • image of Adaptive Web Design in Chinese

    JIANJINZENGQIANG: KUAPINGTAI YONGHU TIYAN SHEJI

    2017, POST & TELECOM PRESS

    TRANSLATED FROM: GUSTAFSON, A. (2016). ADAPTIVE WEB DESIGN (SECOND EDITION).

    In the era of mobile Internet, designers and engineers need to be closer than ever. On the one hand, the development of technology provides more possibilities for product design; on the other hand, the increasingly complex contexts forces our designers to consider the adaptability of devices for solving current problems. Therefore, cooperation has become the only way. 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 58.com Inc.

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

    — A user from douban.com

    SAMPLE PARAGRAPH:

    He found that OS-wise, Windows use had dropped from 93.5 percent to 72.4 percent, no doubt because of the rise of Apple’s OS X and iOS as well as Google’s Android operating system. As you’d likely expect, he found that mobile usage (including tablets) had grown year over year at a rate of 200 to 400 percent from a paltry 0.1 percent in 2008 to 6.2 percent in 2012. Couple the decline of Windows with the rise of mobile and the launch of Chrome (which came out in 2008) and it’s no wonder Jason also saw a sharp decline in Internet Explorer’s numbers: Internet Explorer dropped from a dominant position, bringing 75.5 percent of their visits, to a mere 37 percent. (p. 93; ch. 4).

    从美国居民使用的操作系统来看,Windows操作系统的占有率从93.5%跌落到了72.4%,毋庸置疑,这些份额主要是被Apple公司的OSX和iOS操作系统,以及Google的Android操作系统蚕食掉的。不出意料,他在文章中表示,移动设备(包括平板电脑)的使用率,逐年保持着200%到400%的高速增长,2008年移动设备的使用率还不足0.1%,而在2012年,这个数字已经上涨为6.2%。考虑到Windows 的式微,移动设备的崛起,以及2008年诞生的Chrome浏览器的迅速普及,Jason毫无意外地看到了 IE浏览器那摧枯拉朽般的份额下跌,从占市场支配地位的75.5%,腰斩至是年的37%。(第79页; 第4章).

    View comments on JD.com E-book on epubit.com

  • image of Data Visualization with JavaScript in Chinese

    JavaScript数据可视化编程

    2017, POST & TELECOM PRESS

    TRANSLATED FROM: THOMAS, S. A. (2015). DATA VISUALIZATION WITH JAVASCRIPT.

    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

    SAMPLE PARAGRAPH:

    We haven’t specified the ranges of the x- and y-scales, but assume for now that each ranges from 0 to 100. The starting x-value of 12.5, therefore, is 12.5 percent of the full range. When we convert that value to polar coordinates, the result will be 12.5 percent of the full 360°. That’s 45°, or π/4. The x-value extends another 25 percent, so the final x-value adds another 90°, or π/2, to the starting value. For the y-values, our scales take the square root and map the results to the domain from 0 to 250 (maxRadius). The initial value of 10, therefore, is divided by 100 (for the range) and transformed to √ 0.1 × 250, or 79. The final value of 10+30 results in a radius of √ 0.4 × 250, or 158. That’s the process that creates an SVG for each data value. (p. 256; ch. 7).

    我们尚未定义x和y轴的取值范围,现在我们假设它们的范围都是从0至100。x值初始为12.5,对于取值范围为100的x轴来说,这个x值的起始点其实也就是整个x轴范围的12.5%。当我们把这一个值转换成极坐标的时候,结果将会转换为360°的12.5%,也就是45°,或者π/4。随后,x值在直角坐标系内递增了25%,换成极坐标的显示方法,x值即又递增了90°,或者π/2。另一方面,对于y值来说,直角坐标系内的值将会以开平方根的方法转换为极坐标,并在0到250的范围内(maxRadius)取值。因为y值的初始值等于10,即 10 / 100 × 100% = 10% (0.1) ,因此,y值的极坐标会转换为 √ 0.1 × 250 ≈ 79。而对于y轴上递增的30,我们要和之前初始的10合并计算,即将 (10 + 30) / 100 × 100% = 40% (0.4) 的值转换为极坐标,计算方法是 √ 0.4 × 250 ≈ 158。这就是为每个数据值建立SVG的全部处理过程。 (第268页; 第7章).

    View comments on JD.com E-book on epubit.com