Author Archives: Jiaying Yong

De-blackboxing Alipay Wallet from design and social perspectives


Alipay is a third party online payment platform launched by Alibaba Group in 2004. It becomes one of the most important online services and poses great influence on the development of e-commerce in China. Its mobile app, Alipay Wallet, have reached more than 500 million registered users. Nowadays Alipay Wallet is far more than simply being an interface of convenient online payment, its wild popularity is tightly associated with a systematic design structure of personal wealth management and integrative social interaction functions which greatly change people’s lifestyle. This paper will firstly discuss about the design of main user interface. Then the paper will divide the big picture of Alipay Wallet into three specific parts: online transactions, personal wealth management, and its dynamic features of social interactions, analyzing each sector from both design and social perspectives.

Introduction of Alipay Wallet

Alipay stepped into the mobile payment industry and developed its mobile version for both iOS and Andriod operating system in 2009. The mobile app was renamed as “Alipay Wallet” in 2013, which highlighted its convenience as a virtual wallet and its huge impact on creating a cashless society. Since Ant Financial Services Group, a FinTech spin-off from Alibaba Group took over the business, more expanded features and affordances have been provided that enable users to do nearly every money-related activity on this single mobile app (video 1).

(video 1 – An introduction of Alipay Wallet.)

We will specifically focus on the latest 10.1.8 version of Alipay Wallet available on the App Store for iOS devices. Users can simply create an Alipay account by phone numbers and email addresses. After creating an account password, users are required to set up a payment password to enhance account security for future transactions. Beyond the basic account registration, Alipay Wallet has a strict real-name system. Only by filling out real personal information can users experience all the app functions. We will later dig deeper into the real-name system regarding governmental restrictions for online transaction platforms.

Having a look at the general layout of Alipay Wallet, users are able to randomly switch between different types of the main user interface by clicking four icons at the bottom. The interface is designed in a highly customizing fashion. Take the default  “Home” page as an example. Functions are well organized into different rows. To deal with conflicts between the increasing number of add-on features and the demand of simplicity, users are able select eleven most frequently used services and arrange the icons in the main interface (image 1). Under such circumstance, users participate in designing their personal-customized interface, which provides great convenience for them to navigate certain features.

(image 1- Customizing the order of icons in the area highlighted by a red frame.)

Customization of the main user interface is correlated to user’s GPS location. The second page of the interface shows huge differences when Alipay Wallet is used in different countries despite of the same version of the app (image 2). The second page is named as “coupon” for people who locate in Washington, D.C., in which users have access to services including travels, oversea shopping and exchange rate reports. For users in Mainland China, the second page is “Koubei”, a life service platform operated by both Alibaba and Ant Financial Services Group. The services include local transportation, entertainment consumption and product promotions.

(image 2 – Layout differences based on GPS locations: Washington D.C on the left vs. Shanghai on the right.)

The main user interface of Alipay Wallet is designed based on the knowledge of customers’ needs and expectations. An important task of digital designers is to “have an open-ended assessment of human needs and widen the range of design choices” (Murrey, 2012). To meet consumers’ demands under ever-changing global contexts, Alipay Wallet extends its services to people all around the world with the permission of registration by foreign phone numbers, providing them with online payment methods of goods and services from abroad. However, the app has constraints in terms of language barriers. Simplified Chinese is the dominant language for Alipay Wallet. Although multiple language versions are available for foreign users, the user interface does not display entire content in English even if the user shifts the language setting. Language constraints increase users’ confusion, which negatively influence their future using experience.

Forwarding its evolution as a “global lifestyle super app”, Alipay Wallet cumulates increasing numbers of functions into one single app. Under the inspiration of combinatorial design principles, Alipay Wallet combines existing technologies of online payment methods with new integrative designs. This paper attempts to categorize the complex but inventive system of Alipay Wallet into three major modules: online transactions, wealth management, and massive features of social interactions. These divided subsystems are designed separately in different ways with various social and cultural dependencies.

1. Online Transactions

As an online transaction platform, Alipay Wallet provides three major payment methods. Quick pay is an idea of adding debit or credit card information directly on the app. Online banking payment means that users are redirected to the online banking systems provided by according banking institutions during the payment process. Convenient payment method is to pay by account balance. For Alipay Wallet, there are two distinct types of online transactions: secured transaction and instant transaction.

1.1 Secured Transaction

Secured Transaction was traditionally designed for boosting e-commerce on, an Alibaba Group owned online shopping website. Alipay and Paypal share a similar role as an intermediary between sellers and buyers. However, the operational processes of these two services have huge differences. If a buyer makes a purchase through Paypal account, Paypal will immediately send the amount of money to the seller’s Paypal account as soon as the buyer place the order. Using Alipay as a payment platform, the buyer has to firstly remit money to Alipay, confirming success of the order placement. The seller will then be notified about the buyers’ payment, and will be informed to ship the goods to the buyer. Alipay holds funds during the shipment process. The money will not be forwarded to the seller’s Alipay account until the buyer confirms delivery and satisfaction of the commodities at a limited period of time, roughly a week after the order shipment. Paypal acts as an agent of money collection while Alipay can be treated as an escrow holder. The differences of law system between U.S. and China greatly affect the distinctions between these two third parties. There are strict rules and statutory laws about escrow in the U.S. such as California Escrow Law, which poses high standard for licensing companies to perform online escrow services (Yu & Shen, 2015). It is reasonable for Paypal to be distinguished from escrow, in order to avoid any cost under the supervision of strict regulations. However, China’s law system lacks rigorous rules regarding escrow, which provides Alipay with free space to set up systematic online escrow services. Therefore, governmental regulations and law systems significantly influence the design of secured transaction system in different countries.

1.2 Instant Transaction

Secured transaction is primarily designed and developed from online shopping, while instant transaction can be regarded as a newly emerging model of payment type that facilitates peer-to-peer payment interactions and daily offline purchasing experiences.

Peer-to-peer transaction, or P2P transaction, refers to an interpersonal online money transfer process. To provide a better user experience, Alipay Wallet combines online transactions with instant messaging services. It embraces already existed functions of instant messaging apps. Once users become friends on Alipay Wallet, they can freely send texts, photos, emojis, videos, and even real-time locations with each other. However, Alipay Wallet goes far beyond simple emulation of prior technologies and functions by embedding a cumulative combinatorial design approach. Alipay Wallet allows users to directly transfer money to their friends in the chat box. The combination of instant transactions and instant messaging services shapes a new way of online interactions.

Instant transaction on Alipay Wallet also promotes innovation of offline purchasing environment. Without cash or credit cards, users are able to make any purchase in stores as long as Alipay payment is acceptable. Two types of Alipay payment methods are available in offline purchase: by QR code and by conventional Bar code respectively. In regular grocery stores, purchase can be processed successfully by either way. Customers have the initiative to scan the store’s QR code to make the purchase (image 3), while store cashiers are able to complete the purchase by scanning a conventional barcode displayed on the customers’ Alipay Wallet app (image 4).

(image 3 – How to process a payment by QR code.)

(image 4 – How to process a payment by conventional barcode.)

One of the prominent affordances is the QR code, a two-dimensional information matrix. It contains more information, and is more readable than a conventional barcode. Nowadays it is widely used for offline transactions, however, QR code does not substitute conventional barcode despite of its overwhelming superiority.

Barcode is widely familiar to the public, which has been used for commodity purchase for over 40 years. From the perspective of distributed cognition, display of conventional barcode on Alipay Wallet is treated as cognitive schema that users are able to clearly figure out the function of the barcode displayed on the app (Murray 2012). They understand that the barcode should be scanned by the cashier in order to buy a product from the store. This could be one of the reasons why the barcode, as an affordance, is still preserved by Alipay Wallet designers.

1.3 Security Mechanisms of Online Transactions

Regardless of the types of transactions, Alipay Wallet is processed with high level of security. Superficially, users can easily notice that it provides necessary mechanisms to secure users’ accounts and funds, such as two layers of password settings. A login password is used for entering the interface, while another payment password is required for processing any type of online transactions on the app. Users will be reminded to make two different passwords in order to enhance their account security.

From social perspectives, government regulations offer effective measures to improve the overall security of the system. People’s Bank of China, also the central bank of China, is a government sector that announces monetary policies and regulates financial institutions. With the rising prevalence of non-bank financial services, PBC takes great efforts to implement regulations about third party online transactions, in order to maintain a secure financial environment.

Firstly, according to the “Administrative Measures for the Online Payment Business of Non-Banking Payment Institutions” announced in 2015, PBC set up strict limitations in terms of time and amount of online transactions. For Alipay Wallet, the maximum amount of one-time payment is 200 thousand RMB, which equals to approximately 30 thousand U.S. dollars. Up to 100 times of online transactions are available for mobile users per day, and 200 thousand RMB is the maximum amount of online transactions per year. Establishing such kinds of limitations helps prevent users from being victims of Internet frauds.

Secondly, based on upgraded policies, real name authentication has become an indispensible procedure of using third party online transaction services in 2016. Alipay users are encouraged to perfect their personal information, including identification card numbers, aka U.S. social security numbers, for Chinese citizens and passport numbers for users from other countries. It helps raise credibility of interpersonal online transactions.

Thirdly, government dedicates to fighting with money laundering and potential of money stealing by consolidating its control over transaction data. Relevant policies greatly affect online transaction processing and relationships between third party payment services and commercial banks. Previously, any transaction from one bank account to another could be freely processed on third party online transaction services, in which had dominant control of transaction data and records. It was difficult for the government to obtain accurate transaction information and money flows. In response, PBC started to conduct interference to third party intermediaries in order to consolidate its power of supervision toward financial environment. A new rule was issued recently, requiring third party transaction platforms such as Alipay to pass through an independent online clearing house system controlled by PBC, which would be implemented in June, 2018 (Cheung, 2017). Adding one more layer between third parties and financial institutions (image 5), PBC is able to aggregate and secure sufficient data resources from disperse platforms and institutions, thus diminishing the potential of online transaction deception. Overall, designs of security-related features on Alipay Wallet could no be discussed apart from the governmental dependency.

(image 5 – Chinese government ensures security of online transactions by adding the layer of online clearing house system highlighted in the red circle.)

2. Personal Wealth Management

2.1 As Online Bookkeeping

Alipay Wallet is a platform that provides convenience for people to manage their personal wealth. Active e-commerce participants create huge numbers of transactions on Alipay Wallet everyday. It is necessary to design a more readable and portable online account book for them to track their corresponding transaction history. The “Money Tracker” is such a kind of cognitive artifact, a function “designed to maintain, display, or operate upon information in order to serve a representational function” (Norman, 1991). There are three ways of viewing transaction records: by chronological order, by category of transaction purposes, and by accounts used for certain payment (image 6). In physical world, the ways of billing arrangements vary from person to person. Providing three kinds of layouts makes it possible to meet more people’s needs and expectations. It enhances users’ memory of their past online transactions created on Alipay Wallet, and it enables users to know about their transaction activities and spending habits in different ways.

(image 6 from left to right – Three ways of viewing transaction history: by date of transactions, by category, and by account.)

2.2 As Online Commercial Bank

When people are immersed in online transactions, Alipay Wallet provides opportunities for them to make investment. Yu’ebao is an Internet fund product operated by Tianhong Asset Management Co., Ltd., which manages users’ account balance and produces profits to users. The funds in Yu’ebao can be topped up and withdrew at any time for any online transaction purpose on Alipay Wallet. Yu’ebao significantly attracts more people’s attention and interests with considerable returns. It offers around 6% in annualized return in contrast of only 0.36% return offered by banks’ deposits (Tu, 2014). Attracting 325 million active users in 2017, Yu’ebao have become the largest money market fund in China. People are more likely to save their money in Yu’ebao instead of making bank deposits considering high returns and convenience.

In addition to the substitution of bank deposits with Yu’ebao, the extension of credit service named Huabei becomes a replacement of bank loans. Consumers can do both online and offline shopping with borrowed money on Huabei, just like how they use traditional credit cards to checkout in the real life. Available credit line ranges from five hundred to 50 thousand RMB based on Alipay virtual credit scores raised by the account users. Those who made consumptions with Huabei are required to make the payment on the tenth day of each month. More and more people are reluctant to do shopping with credit cards. The number of Huabei users reached 100 million, and “60 percent of the users haven’t linked their credit card to Alipay accounts” (Ding, 2017).

Both Yu’ebao and Huabei share many things in common. From the perspective of design thinking, creation of perceived affordance is the starting point of name design. According to Norman, “designers care more about what actions the user perceives to be possible than what is true” (1999). Perceived affordances suggest and drives people to take possible actions. Designers embrace meanings into names that people can easily know about what each function is about. The name “Yu’ebao” and “Huabei” come from Chinese Phonetic Alphabet. To directly translate “Yu’ebao” from Chinese into English, it means a treasure of balance, thus having the extended meaning of a good function for managing account balance. Users can easily perceive the features of Yu’ebao, and then take the action to use it for the purpose of making corresponding investment. “Huabei” is the meaning of “just spend” in Chinese, which can be connected to the idea of spending money without concern if one runs out of short-term savings. Users will be implied that Huabei is the interface for loaning money. They may be more likely to take the action to use this credit service for purchasing commodities. Name design also has cultural dependency. Connections between the meaning creation and shared cultural knowledge could not be ignored. It is easily for Chinese users to perceive the meaning of both names “Yu’ebao” and “Huabei”. However, these words hardly make sense to users who are not familiar with Chinese culture and language.

From the perspective of social consequences, Yu’ebao and Huabei have significant impact on the operation of commercial banks and government works. Commercial banks encounter great challenges to retain their potential customers when facing with huge competition of better online investment and credit pay services. With Yu’ebao and Huabei, users are more likely to make payments with their account balance rather than use linked debit or credit cards. When it comes to the positive side of social consequences, design of virtual credit scores facilitates the perfection of social credit system in China. The Alipay credit score which ranges from 350 to 950 is compiled by transaction records, payment history, credibility of personal information, and personal impression obtained through online interactions, etc. Not only can Alipay credit score be used for calculating a reasonable credit line on Huabei, but it also provides convenience in people’s daily lives. For example, users who get higher Alipay credit scores have the privilege to waive secured deposits for shared bikes. Virtual credit scores assess citizen’s financial trustworthiness, which becomes an important factor for improving “social credit score plan” in China. China’s State Council issued a planning outline for the construction of a social credit system in 2014. It aimed at setting up social credit scores for citizens based on onmindirectional analysis of people’s daily behaviors, including “financial transactions, political and social participations, as well as their general lifestyles” (Dörrer, 2017). Although Alipay credit score is not a part of the official social credit system, it provides Chinese government with invaluable resources to establish social credit scores in the contemporary society.

3. Online social interactions

In addition to the dominant online transaction services and fast-growing wealth management products, Alipay Wallet puts more and more emphasis on generating innovative designs regarding online social interactions. These design ideas have close correlations with the deep knowledge of new media, as well as social and cultural dependencies. The most significant features are Virtual Red Packets and Ant Forest.

3.1 Virtual Red Packets

Sending red packets during festivals and important occasions have been a Chinese traditional custom for thousands of years. Enclosed with an amount of money, a red packet is the representation of sender’s best wishes to friends and relatives. Currently, an evolution of virtual red packets brings about a new way of online transactions. Most online transaction services, remarkably Alipay Wallet and WeChat Pay, enable people to send money by red packets once they become friends. Unlike regular money transaction notifications, receivers are not be able to see the actual amount of money in the red packet until they click the red packet icon, just as the action of opening the paper red packet in real world. Based on the respect for Chinese custom, Alipay Wallet designers particularly extend conventional meaning of red packets with the inspiration of metamedium. Alipay launched a marketing campaign during Chinese Spring Festival in 2016. All Alipay Wallet users had the same opportunity to participate in the lucky draw of 200 million RMB in the form of red packet after they had successfully collected all five kinds of lucky cards. The five lucky cards were named as “Aiguo Fu”, “Fuqiang Fu”, “Hexie Fu”, “Youshan Fu”, and “Jingye Fu”, which represented the good fortune of patriotism, prosperity, harmony, friendship, and dedication. The meanings of these five cards are correlated to the core values spread by the Chinese government in recent years. “Fu” specifically means good fortune in Chinese characters. To highlight its function of social interaction, friends could exchange their cards to complete the mission. However, the fundamental way of card collection is by scanning different kinds of the letter “Fu” anywhere with AR technology (image 7). During the scanning process, the letter would be digitized into discrete data which could be interpreted and recognized by the mobile system. If the scanned letter matched with the character of “Fu”, users would randomly get one of the five cards. “Metamedium is a combination of already-existing and not-yet-incented media” (Manovich, 2013). As an early medium, a simple written or printed letter “Fu” helps add new properties to the emergence of new media that were born from digitization such as the random fortune cards and virtual red packets.

(image 7 from left to right – How to scan a written or printed Chinese character “Fu” with AR technology & an example of rewarded red packet after successfully collecting all five kinds of lucky cards.)

3.2 Ant Forest

Ant Forest is an interactive game on Alipay Wallet, which embraces profound significance of environmental protection in China. Ant Forest users plant virtual trees by collecting “green energy”, which is calculated in the unit of kilogram. The energy comes from users’ low-carbon activities detected by Alipay Wallet. For example, Alipay Wallet counts users’ everyday walking steps and offline payment transactions which help save paper receipts. All these eligible activities will be converted into energy that makes a tree grows bigger. Once an activity becomes energy, it has to be manually collected by users. An interactive way of collection is to visit friends’ Ant Forest account and steal their uncollected energy. According to Yin (2017), “technology, which can be used to mobilize the public. If everyone is involved, we can easily popularize a low-carbon lifestyle.” Virtual trees planted by Alipay Wallet users do not only represent a kind of game acquirement, but these trees also exist in the real world. Cooperating with Ant Financial Services Group, public welfare organizations grow real trees in desert areas in China on behalf of virtual tree owners. Based on the social implication of environment protection, Ant Forest is designed in a way of media hybridization, which allows users to see what their trees look like in reality through satellite images, real-time photos and locations (image 8). Media hybridization stands for “a more fundamental reconfiguration of media universe in which media properties are exchanged, and new structure are created.” (Manovich, 2013). Ant Forest is taken as an example of media hybrids that include graphic design, photography, GPS location, and the technology of satellite communication. The recombination of various media forms facilitates people’s experience of online social interactions and their offline daily lifestyle as well.

(image 8 from left to right – The user interface of Ant Forest & viewing actual trees through real-time photos.)

4. Conclusion

“It’s not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives.” –Don Norman (2004)

By analyzing the three main parts of Alipay Wallet from both design and social perspectives, it is clearly acknowledged that Alipay Wallet is keeping on the right path of being a “lifestyle super app” in China. With its combinatorial design structure, Alipay Wallet consolidates its dominant services of online transactions, and it also strengthens new functions and features including wealth management and online social interactions. The operation and design ideas could not achieve great success without social dependencies. Products with Chinese characteristics are designed to meet people’s daily needs and expectations under certain governmental and cultural contexts. Considering the scope of globalization, Alipay Wallet should pay closer attention to the contexts and needs of foreign users, making its products and designs more adaptive to the global market.


Alibaba Group. (2016, April 30). What is Alipay? Retrieved from

Arthur, W. B. (2009). The Nature of Technology: What It Is and How It Evolves. New York, NY: Free Press.

Chan, J. (2017, September 30). Alipay and Tenpay compete head-to-head for overseas market share. ASEAN Today. Retrieved from

Cheung, M. (2017, August 21). As China Tries to Go Cashless, Government Casts a Wary Eye. eMarketer. Retrieved from

Dörrer, K. (2017, March 31). Hello, Bog Brother: How China controls its citizens through social media. DW. Retrieved from

Manovich, L. (2013). Software Takes Command. New York;London;: Bloomsbury.

Murray, J. (2012). Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press.

Norman, D. A. (1999). Affordance, Conventions, and Design. Interactions 6(3), 38-43. doi:10.1145/301153.301168

Norman, D. A. (1991). Cognitive Artifacts. In Designing Interaction, edited by John M. Carroll, 17-38. New York, NY: Cambridge University Press.

Norman, D. A. (2004). Introduction to This Special Section on Beauty, Goodness, and Usability. Human-Computer Interaction. 19 (4). 311-318. doi: 10.1207/s15327051hci1904_1

Norman, D. A. (2010). Living with Complexity. Cambridge, MA: The MIT Press, 2010.

Sheed, C. (2009, April 3). We need to build products that bring joy and excitement to people’s lives.

Tu, L. (2014, March 19). Alibaba’s Yuebao dents Chinese banks’ profitability. REUTERS. Retrieved from

Yin, X. (2017, October 27). Ant Forest: from virtual trees to real forests. CHINA PLUS. Retrieved from

Yu, Y., & Shen, M. (2015, March 31). Alibaba and the Threat to China’s Banking Sector. The Foundation for Law, Justice and Society. Retrieved from

Yue, J. (2017, April 27). Alibaba’s Yu’eBao Becomes First Chinese Fund Management Firm With Over RMB 1 Trillion In Assets. CHINA MONEY NETWORK. Retrieved from

Viewing my daily-use browser in a different way

This week’s topic comes to the World Wide Web that most of people can’t live without nowadays. Web browser is a crucial tool to connect users with the Web. Most online users, not surprisingly, choose web browsers such as Chrome, Firefox and Safari to “surf online”. Although it seems that all users share the same using experiences of the services provided by these most popular browsers, more customized and “dynamic” interfaces have been built during their frequent usage of the web browsers. This trend derives from user-web interaction, while it also greatly influences the searching results and future using experiences.

Taking my most frequently used web browser, Google Chrome, as an example. In the search bar, I seldom type in the whole URL for viewing a website unless it is the first time I search for the website. Cookies help “memorize” and store my searching history so that I could quickly locate the wanted website by just typing in a part of the URL. For the Wikipedia page “Expectancy Violations Theory” that I have visited hundred times for a course project throughout the semester, I don’t even need to type the domain name “wikipedia” in the search bar. Instead, the website address displays in the drop-down menu with only “ex” typed in the search bar. This would never happen in another computer with different searching experience by other web users. Another customized feature about cookies is the convenience of automatic logins and quick online shopping experience. Cookies kept remembering your online behaviors. Even though you haven’t been to a shopping site for a long time, cookies include what you placed into the shopping cart will be found by the browser. The browser sends the URL to the Web server, and also “sends the information in the cookie” in order to restore updated online footprints left by the users.

Compared to other web browsers such as Safari, Google Chrome has a distinct design feature that allows users to add extended tools, which greatly customizes the way that users receive online information. I’m not able to watch several videos on Chinese video streaming websites because a US IP address is detected, showing that “this video can only be streamed within Mainland China.” I have nothing to do with this using Safari browser. However, Google Chrome provides users great opportunity to install extensions such as “Unblock Youku” to deal with the blocked situations.

Great extension like “Adblock” enables us to avoid annoying ads from different kinds of websites. This inspired me to make a comparison between the regular YouTube main page and an ad-immune YouTube main page based on the HTML source code about how different media sources are displayed in this web page. For the main page without ads, I did not find the according code resources for the GEICO Insurance ads.

I feel that those extended tools act as important parts of the modular design of Google Chrome. Whether the extensions exist or not does not have much connection to the primary design process of the web browser, during which developers build interfaces to the Internet system, cookies, different media content and HTML code resources, etc. However, by adding a process of customization, the existence of Chrome extensions partly affects the changes of interfaces, which enables users to view more expected content while filter useless media content. It provides greater using experience for the user-web interaction and more dynamic, ever-upgraded interfaces.


Ron White, How Computers Work. 9th ed. Que Publishing, 2007. “How the World Wide Web Works.”

Internet is not a “thing”

People often take what they acquire from the Internet for granted. I could not even remember the exact year when my online surfing did not affect my mom’s phone call, and when the Internet in my home became wireless so that I could link to different mobile devices. It seemed that Internet develops spontaneously. In fact, Internet is not simply a thing when tapping an icon on the computer to make it “appear”. It is a system that designed with modularity and layers, with the tight connection of social-technical context. Under such circumstance, being “on” the Internet means we are engaging in universal agreed protocols that enable the exchange of data through network, and we are also influenced by the social-technical-political-economic system at the same time.

We just need to wait 1-2 seconds for loading a website, however, the data sending-receiving process in not like this simple. According to Abelson, “the Internet is a delivery service for bits.” TCP/IP is designed for connecting servers on the Internet and processing data exchange. These data are broke down into packets for transmission, and being resembled and interpreted by the receiver’s device. Protocols are divided into different layers. Each layer of protocols has their own responsibility, using services of the lower layer and providing services to the higher layer. In the transport layer, the responsibility of TCP is to ensure the accurate delivery of data transmission, and it does not care about what other protocols do. As a modular design, it reduces complexity while increases modifiability. When first reading about the DNS in the application layer, I suddenly realized that I have once involved in the modular design of Internet. When I was at home in China last year, I found my computer could not load lots of websites, including domestic websites. I searched online for reasons and someone suggested look up for the DNS server address showed in the computer network settings. If it is showed as, then change it into I tried and it magically solved my problem. Later I found that is a public DNS address owned by Google, while is basically the router’s DNS address owned by the Internet service provider. Changing DNS address does affect Internet speed. According to a test, “the results showed a 132.1 percent improvement from using Google’s DNS servers over using the stock DNS serves”, which was totally different from my using experience in China. Although I still have no idea of the reason why my computer uses Google’s DNS address as default, I make an assumption of the reason why I could not use this address is because Google services are blocked in China. This is a typical example of how social-technical context connects with Internet system.

Here is the window of my computer where I can change the DNS server’s address.

The Internet censorship in China blocked access to a number of popular foreign websites and services through the Great Firewall in order to prevent information against governments’ interests from being spread to the public. It is really annoying for me because I’m not able to check my Gmail. The best option to break the wall is to purchase for VPN service. The VPN server provides accessible IP addresses that could be connected to blocked websites. By using any of the provided IP address, the real IP address is hidden so that the ISP could not be able to track your Internet status. Therefore, the impact of political context on Internet system is obvious.

Question: Internet surfing in China is relatively much slower than in the US. It will take longer time for a website to be completely loaded. Is it because of Internet censorship that adds the filtering process when loading the website? Which layers of the protocols fit into this process? Is the speed also related to the geographic location of the IP addresses?


Pinola, M (2017, October 5). Want to Know How to Double Your Internet Speed for Free? Retrieved from

Crawford, D (2016, January 20). VPNs for Beginners – What You Need to Know. Retrieved from

Denning and Martell, Great Principles of Computing, Chap. 11, “Networking.”

Barbara van Schewick, Internet Architecture and Innovation. Cambridge, MA: The MIT Press, 2012.

Irvine, M. (n.d.). Introducing Internet Design Principles and Architecture: Why Learn This? Retrieved from

How we benefit from digitization

The invention of the Dynabook brought about the concept of metamedium introduced by Kay and Goldberg. Computer is not simply a medium, but is “a metamedium whose content is a wide range of already-existing and not-yet-invented media.” Based on this definition, media can be divided into two types. Firstly, as a remediation machine, computer simulates a range of early media and adds new properties to these media. Texts can be edited with different fonts, while photos can be easily modified by changing different styles of filters and contrast. We are able to combine, cut, adding subtitles to existing video clips by video production software. Secondly, computer presents “new computational media that have no physical precedents”. Hybrid media achieve the reconfiguration of different media types with the help of computer, and this novel combination of media types could hardly realize in the past. Movie’s special affects, for instance, the properties of graphic design, cinematography and 3D animation are exchanged and interacted in a deeper level. It seems that most of us take our using experience of metamedia for granted, however, we should always keep in mind that all media development is inseparable from digitization.

Digitization provides new possibilities for metamedium

According to Manovich, digitization is a process of “converting continuous data into numerical representation”. Time-based music, a continuous, physically perceptible data (analog) becomes programmable through sampling. It is then converted into discrete data (digital) and assigned numerical values. In the past times, if we want to record music played by different instruments in a band, we could only gather all musicians to play the music continuously until we get the best version of the record. Representing in a mathematic way, we could easily locate a specific segment that we want to edit. It becomes possible to make music remixes by combining different pieces of songs together and adding more computational sound effects, which is widely used in pop music nowadays. Specifically, the embedded sound effects such as drum and bass are previously programmed in the computer. As Manovich asserted that new media have principles of automation and variability, computer in part helps us automatically create sound effects, thus inventing a new music with new properties.

djay 2 is an app for music remixes. Even new beginners can mix music perfectly through the interface like a professional DJ using a turntable in physical world.

The consequence of digitization is significant. New media is interactive that users can engage in media creation, which solved Kay’s concern about the availability and adaptability of programming tools for ordinary users. Moreover, digital computer “has capabilities to create new kinds of media for expression and communication.” Physical images, texts, sounds, as analog information are digitized in the numerical forms. After new media have been invented in computer, they have to return back to analog forms that enable human to perceive and recognize. According to Irvine, “everything computational and digital facilitates our core human symbolic-cognitive capabilities.” In my point of view, analog-digital-analog continuum creates a spiral for us to continuously accept new forms of media created by ever developing computational design and digitization, and it helps upgrade human’s cognition to the world.


Irvine-Computers-as-Cognitive-Interfaces-and-Metamedia-820.pdf. (n.d.). Retrieved November 8, 2017, from

Manovich, L. (2013). Software Takes Command, New York;London;: Bloomsbury.

Manovich-The_Language_of_New_Media-Principles-excerpt.pdf. (n.d.). Retrieved November 8, 2017, from

Reid, B. (2014, May 22). Popular App djay 2 Updated With Tons Of New Features, iPhone App Gone GREE For The First TIme Ever. [blog post]. Retrieved from

Prophecies drive computational development

If I were asked about changes of computer, the most significant impressions from my using experience in the past twenty years would be size, portability, and practicability with connection of Internet. I merely assumed that designers made these improvements to comply with the demands of the times and people. After reading this week’s influential articles, I’m surprised that our achievements of computation have been predicted by great computer scientists 60 years ago. Based on historic designs in the field of military, government and business, the conception of human-computer cooperative interaction brings about software innovation, and it also motivates computer’s role as metamedium.

Many computer technologies and software designs have corresponding ideas from early times. A prototype of personal computer has already existed way earlier than we expected. Vannevar Bush introduced memex in his article “As we may think” in 1945, a device for storing information. Microfilm helps people to trail original records store in memex. This idea initiated the invention of hypertext. Sketchpad originated by Ivan Sutherland in 1963 provided great inspiration to many popular graphic design software techniques. I found Sutherland’s sketchpad was aligned with Licklider’s thinking of “man-computer symbiosis”, which was introduced three years earlier, in 1960. Licklider persisted that the symbiotic cooperation would be successful if man and computer interact on the same surface and “integrate positive characteristics”. Take a circle drawing as an example. Men have incentives and imagination to draw a circle, while computers are “fast and accurate” to satisfy men’s irregular drawing of a circle with a standard round shape. Men could barely draw a precise circle (unless they use compasses) without the help of computer, while computer could not operate with men’s creative thinking.

According to Manovich, along with Alan Kay’s invention of Dynabook, a term of metamedium was introduced to describe computer as a platform to “create new tool of working with the media types it already provides as well as to develop new not-yet-invented media.” Opening the iMovie app, we can simply use the front camera to take a short video, just like how we use a video camera. But the app is much more widely used for editing videos. We can combine two video clips together, adjust video length, add subtitles and filters. With the help of computer, a new video is invented. We can even share the video to friends through emails or social media networks where not-yet-invented media such as feedback from friends (text, image or video formats) sprout consistently.

Manovich also explained “media hybridization” as the new stage of metamedium evolution, suggesting “a more fundamental reconfiguration of media universe in which media properties are exchanged, and new structures are created.” From Manovich’s hint from the book, categorizing photos and videos on iPhone by places where the photos are taken is an example of media hybrids between GPS location and photography.

Although I’m not sure whether the following example counts as hybrids of text, audio, and photos and videos, I would like to share my thought here. Many social media platforms such as Facebook allow users to view a video at the bottom right corner of the screen. Users can still browse the post of the video on the main screen where the video becomes a temporary screenshot. It also enables people to make comments on the main screen when the video is playing in the corner. As Manovich describes, “media hybrids represent our experience in a new way by combing and possibly reconfiguring already familiar media representations.” Traditionally, users have no choice but to watch a video in full screen, and make comments afterwards. This new social media experience offers a new way of interaction. The combination of these media provides users with more information and the opportunity of multitasking on social media platforms.


Vannevar Bush, “As We May Think,” Atlantic, July, 1945.

Licklider-Man-Computer-Symbiosis-1960-NMR-excerpt.pdf. (n.d.). Retrieved November 1, 2017, from

Manovich, L. (2013). Software Takes Command, New York;London;: Bloomsbury.

Thoughts about computer programming from a Python beginner

This week’s reading and assignment could be a great leap for my knowledge about computer science. As a new learner of coding, I really enjoyed the tutorial lessons of Python on Codecademy, from which I realized the distinctions between natural languages and programming languages. Furthermore, it also reminds me that computational thinking is happening in my daily learning process.

Natural language vs. Programming language

We’ve spent a long time since our birth to learn millions of words that natural languages provide us for communication and transmission of meanings. According to Evan’s critique of natural languages as uneconomic, we have to express meanings of an idea with sufficient words and space. Written in English, describing the calculation of total expense requires lines of sentences. Unlike the tedious expression by natural language, the same scenario is described concisely through programming language on Python.

The words “meal, tip, tax and total” are variables we create for computer to recognize and execute. The computer does not care about what these words mean in the real world for transactions. Particularly, not all the words “meal” here have the same meaning. In the 7th line, the “meal” on the left side of the equation is a new variable we reassign while the “meal” on the right side of the equation is the same as the one in the 3rd line. Similarly, the “meal” in the 8th line shares the same meaning of the “meal” on the left side of the equation in 7th line, which helps create a new variable named “total”. However, some words either in full spelling or abbreviation as symbols have similar meanings as in the natural language environment. For instance, string methods such as “len()” represents the calculation of number of characters in the variable. “Print” represents display of the result.

Different natural languages are ambiguous to a certain extent. Similar to English, Chinese have three main pronouns to abstract people, which are “他”, “她” and “它”, meaning “he”, “she” and “it” respectively. However, all these three letters have the same pronunciation as “ta”. People feel confused if they are not familiar with the context of the conversation. As Evans described, computer scientists dedicate to create simple, structured programming languages with less ambiguity. With Python’s own syntax, the layout of the language is simple. Different data types are distinguished from various colors, like variables in orange and strings in yellow. From a beginner’s point of view, it is easy for coders to detect errors by distinguishing colors of the codes. From my training experience on Codecademy, I totally agree with Denning and Martell’s words that “the virtual worlds created by software tend to be highly sensitive to errors.” (2015) I was stuck when trying to format the date and time in the order like mm/dd/yyyy hh:mm:ss.

I was hesitating on how to show a space between date and time. So I coded date and time separately as showed on the right of the image. After running the code, the error occurred although all the information were correct, displaying the actual date and time. I had no idea about the error until I requested for the correct answer, which was simpler than I expected (as showed on the left of the image).

Using experience of Wikipedia

I find an example of computational thinking in my ongoing Wikipedia project for another class. Contributors could edit Wiki pages via visual editing and source editing. Source editing, particularly, allows people to edit and format the page with codes specifically designed for Wikipedia, called Wikitext. For example, the equal marks are symbols to format the size of headings. The “~~~~” is a symbol for your name if you would like to interact with other contributors for the Wikipage.

A screenshot of Wikitext Cheatsheet

It is also error sensitive. Unlike Python, the codes could not be distinguished by colors. I seldom use source editing because the syntax is really difficult to memorize and it is hard for me to locate the error once occurs. Since the layout of visual editing is more user-friendly (“What You See Is What You Get”), it is hard for Wikitext to be adaptive to ordinary contributors. However, after this week’s reading about Wing’s idea of computational thinking, I’m trying to shift my thinking from a mere editing of a Wiki article to a systematic process of page formatting in a mathematical and engineering perspective. The involving computation thinking not only helps us solve problems on Wiki editing, but also permeates through our online conversation and interaction.


Jeannette Wing, “Computational Thinking.” Communications of the ACM 49, no. 3 (March 2006): 33–35.

David Evans, Introduction to Computing: Explorations in Language, Logic, and Machines. Oct. 2011 edition. CreateSpace Independent Publishing Platform; Creative Commons Open Access:

Peter J. Denning and Craig H. Martell. Great Principles of Computing. Cambridge, MA: The MIT Press, 2015, chapters 4, 5, 6.

Help:Cheatsheet. (2017, October 15). In Wikipedia. Retrieved from

WYSIWYG. (2017, October 19). In Wikipedia. Retrieved from

Understanding Information and Data

This week’s reading provides me a new insight to explain the concept of information and data through our daily use of digital communication.


According to Shannon and Weaver, the information source, transmitter, channel, noise, receiver and destination are crucial elements in communication system, which compose like a conduit for information transmission. Taking an instant messaging app as an example. Under binary system, when we send edited texts or photos to others, the words, signs, images are encoded into bits. Through the transmission, theses symbols are decoded from bits to texts and photos that allow receivers to learn what the content is. Shannon states in the classical information theory that “information can be transmitted and received accurately by processes that do not depend on the information’s meaning.” (Denning and Bell, 2012) During the transmission process, the actual meaning of a sentence becomes irrelevant when it is converted into the strings of 0s and 1s. Presented in binary data, an image becomes a series of numbers according to its pixel grids instead of showing the structure, characters, and background of the photo.

With the development of human-computer interaction, it becomes hard for information to exclude meaning. Rocchi points out that “meaning is the association between sign and referent”, which are two components of information. Considering Siri as an example. It is impossible to imagine a smartphone can talk with people in Shannon’s generation. Performed as an intelligent assistant, Siri can proceed an association between detected human voices (instructions in the form of words or sentences as signs) and corresponding function display (phone call, app activation or rejection to the instructions as referents). As new information is emerging continuously nowadays, we could not ignore the importance of meaning when talking about the substance of information theory.

Data (Further findings about “redundancy”)

When it comes to the transmission of documents and images, it reminds me of the interesting concept of redundancy in A Very Short Introduction to Information. According to Khalvati, in an image data, there are psychovisual redundancy (irrelevant information thus “ignored by human vision system”), coding redundancy (caused by “using higher number of bits per pixel”) and interpixel redundancy (“the correlation among neighboring pixels”). The reduction of data redundancy does no harm to the image itself. If the sender wants to send a high-quality image to the receiver, it is efficient to compress the image by reducing the redundancy, which narrows the size while it still keeps the original quality. It also helps increase the transmission speed at the same time. I’m wondering if the reduction of data redundancy can be treated as lossless compression that Denning and Bell discussed in The Information Paradox. As opposed to lossy compression with file quality is decreased.


From Floridi’s Very Short Introduction to Information, I’m confused about the concept of factual semantic content and factual semantic information. Why the former can be false while the latter should be true?


Luciano Floridi, Information: A Very Short Introduction. Oxford, UK: Oxford University Press, 2010.

Peter Denning and Tim Bell, “The Information Paradox.” From American Scientist, 100, Nov-Dec. 2012.

Khalvati, F. (2009). Computational redundancy in image processing. Retrieved from

Design of Amazon Webpage

After finishing the readings this week, especially for Murray’s article, I have strong feelings about the great efforts digital designers bring into the design process to meet human needs and expectations. I started to find screenshots of the Amazon webpage from different periods of time. It is obvious that the interfaces have been upgraded overtime. However, I have never thought that the way we think of affordances and constraints are also changing, which has great influence on people’s thoughts, behaviors and interaction with digital media.

What does Amazon webpage look like when it first launched?

The layout of the webpage is simple which consists of a logo, words in black and blue underlined words. Murray states that “some digital conventions script us in a transparent way”. The blue words are distinguished from the black ones, which cues us for hyperlinks. It also reflects the Norman’s idea of perceived affordances. They are cultural constraints that one should move the cursor to the blue underlined words and click them in order to reach the hyperlinks. At the same time, physical and logical constraints exist on the webpage in that one could only move the cursor inside the screen while knows how to scroll down for more lists of links. However, the webpage is not well organized into categories and genres.

When it comes to the Amazon webpage in 1999, more icons like the drop-down menu and the “Go!” button are designed as visual feedback to distribute affordances. Specifically, the protruding design of the “Go!” button implies that this is a button to press for more information. The icon with the letter “Go” also has a cognitive affordance of proceeding. Considering the situation if there’s a letter “Back” on the bottom, users definitely would not press it for search results while would press it for previous steps instead. In addition, there is a huge design evolution for the template. From the perspective of distributed cognition, the formats of websites could be treated as cognitive schemas that users clearly know about the functions of each part. An understandable template for an online shopping website should be designed like the layout of products in grocery stores, with design conventions like categories of products, the section of customer services, an available shopping cart for each customer, and the check out area, etc. The design conventions provide affordances for users during the interaction process.

In addition to abundant layout of information and perceived affordances, I think one of the most prominent design features of the newest site is the wide use of social participation compared to previous versions. Murray explains affordance of the digital medium as participatory, meaning the formation of many-many communication. Under the design convention of customer reviews, users not only post reviews, but also leave comments or even directly email to a customer for purchase experiences. It potentially raises the privacy issue that anyone could see your purchase history once you leave customer reviews about the products. Moreover, randomly noticing advertising related to Amazon purchase history also drives us attention and worry about security problems. After all, “a good design is aimed at perfecting the object and at improving the overall practice of the field” (Murray, 2012), designers should take the spread of information into account under the circumstance of the participatory media environment.

Question: I’m also considering the important role of algorithm takes place on Amazon nowadays, especially for the precise display of customers’ purchase behaviors. I’m quite confused about Murray’s explanation of procedural affordance, which particularly mentions about the idea of algorithm. How could we connect the use of algorithm on Amazon with procedural affordance?


Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012.

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Quito, A., & Quito, A. (n.d.). What Amazon’s homepage looked like when it launched 21 years ago this month. Retrieved October 11, 2017, from

Go Back In Time: How 10 Big Websites Looked 15 Years Ago. (n.d.). Retrieved October 11, 2017, from

Customer Review. (n.d.). Retrieved October 11, 2017, from

TripAdvisor – My thoughts about mediation

The TripAdvisor website firstly came to my mind when thinking about an example on how I understand about mediation under the context of social-technical artifacts. When I used the website several years ago, from a user’s point of view, I found it really user-friendly because it not only provides online booking services, but it also enables users to browse travel experiences that other users posted through that interface. After reading about Latour’s ideas of mediation, I was inspired not to merely regard user-generated content as something derive from online users that are dichotomized from the design/function of media technologies. Instead, it can be a tool, or an agent, that plays a role in technical mediation and has a function to provide useful traveling information.

Latour introduces four meanings of mediation in his book. In the meaning of interference, he states that the translation is symmetrical. In his “gun-man” example, “you are different with a gun in your hand; the gun is different with you holding it”. On the TripAdvisor interface, suppose one’s original intention is to book a cheap hotel room during a 3-day trip to D.C. He could hardly figure out the available hotels unless he fills in the destination, the number of days and travellers into the search boxes. Similarly, the interface, as an actant, displays its searching function if effective information is provided. As a result, the personal may have a full list of hotels on the website that are available for his trip and he might find out a most desirable one. According to Latour, “Reponsibility for action must be shared among the various actants.” This idea overthrows the separation between subjects and objects. Neither the user nor the interface is able to come to the final goal without combination.

The composition of mediation suggests that “action is not a property of humans but of an association of actants”. Under such circumstances, programs could be dispersed into various subprograms. Still taking the previous scenario as an example when all searching results of hotels are displayed. The user could narrow down the results by choosing preferred amenities, location, hotel class and ratings, etc. from the columns on the left of the interface. Each of these choices is a subprogram with particular filtering function. Moreover, “Actants offer one another new possibilities, new goals, new functions”. There’s a huge difference of outcomes if one only chooses the location filter while the other chooses all filters for the same results. Compared with the former outcomes, the latter is a combination of the function displayed by all filtering choices, thus have fewer number of much more precise results.

When it comes to the folding of time and space, I’m not sure that I could explain the interface of TripAdvisor correctly with this meaning of mediation. In my point of view, the interface would be like a black box out there that the associations of humans and nonhumans are usually opaque. Digging into multiple parts inside, we could think of the prolonged process of coding and digital archive collection from the very start of the point from the time aspect. From the space aspect, it is composed of various user-generated content and the real-time updates of booking status from all over the world.

The last meaning indicates that mediation crosses the boundary between signs and things. Delegation is introduced under the condition that “an action has been translated into another kind of expression”. My inspiration of the user-generate content reminds me to shift the roles between user and maker. TripAdvisor has a unique “Travel Forum” that allows users to write posts about their travel experiences and leave comments about their opinions to others. At this time, these active users are no longer users, they are absent makers of those actants displayed on the interface. Other users could still browse or even interact with the posts and comments. As Latour decribes, “Humans are folded into nonhumans in the midst of technical delegates”. Once a user participates in the forum, a new absent maker emerges, delegating active functional acants associated with future intentional users on this interface.


Latour-Pandoras_Hope-Technical-Mediation-excerpt.pdf. (n.d.). Retrieved October 4, 2017, from

GPS Navigation as a cognitive artifact

It always reminds me of my dad when talking about GPS. My dad literally never uses a GPS navigating device wherever he goes because he says that a driver with more than 20-years driving experience has already memorized every road in the city. However, the truth is that he often chooses routes with the heaviest traffic, or being fined because of neglecting the speed limit. The readings for this week truly make me confident to persuade my dad to use GPS. Cognition is not simply generated internally like human brains. Just as the habit in using handwritten to-do list, GPS is also a good example of cognitive artifact. As Norman states, “artificial devices enhance human cognitive capabilities and make us smarter.” The involvement of cognitive artifacts in this modern era changes the way we act to accomplish tasks.

The navigating function of Google Maps in iOS

Norman defines cognitive artifact as “an artificial device designed to maintain, display, or operate upon information in order to serve a representational function”. The feature of display begins at the very first step when typing in the address of the destination. Aligned with the located departure point, it displays several optional routes to choose from, with the fastest route recommended. While the user is searching for specific categorized destination, such as nearby restaurants, it accurately filters and displays results. As the navigation starts, only one chosen route maintains on the screen till the user arrives the destination, unless the route is manually cancelled halfway. We can see the operation feature during the entire navigating process as the cursor consistently moves according to the user’s real-time location. It operates because of the emergence of updated crowding, accidents, and constructions. Moreover, once the user adds stops along the route, the navigation operates accordingly and provides routes that cover all destinations. As a cognitive artifact, Google Maps is different from other artificial devices because it has a representational function that interacts with human brains, applying and mediating what we think, memorize, into visual interfaces. It represents our cognitive artifacts which make human cognitive abilities possible, visible and even powerful.

Norman’s classification of artifacts’ system view and personal view inspires me a lot in that it indicates that Google Maps, as a cognitive artifacts, is not just a simple artificial product. It involves offloads of massive cognitive thinking that people use it as a mediation to accomplish a task. From a system view, Google Maps is like a catalyst of human memory, aggregating thinking of map and enhancing the sense of direction. It helps keep the traveling record, show where the user is currently located. It also meets the user’s demand of expectations about real-time traffic conditions. Thus, “the artifact enhances cognition”. From a personal view, using the app can be treated as a task. Without this navigation app, we have to extract routes from memory and keep in mind of various cameras on the streets that we should pay attention to. With the app, it allows us to do little about memory. At this time, new tasks are assigned to us, that we should type in the accurate destination, change settings such as voice languages or distance units, and reading the routes carefully in order to have a better drive experience.

Question – Google Maps’ cultural implication & cognition

When reading about approaches of distributed cognition, it reminds me that Google Maps brought in the game Pokemon Go feature, allowing users to catch Pokemon according to the icons showed on the map. Since Pokemon Go is a game originates from Japanese anime, with a wide spread of culture, it has a large fan base around the world. In Distributed Cognition, Hollan, Huthins and Kirsch state that the study of cognition has tight connection with cultural study. Although the cooperation allows users to play this cultural characterized game with navigation on Google Maps, I wonder that will GPS navigation gradually be effected by the cultural environment and certain group members with the continuous information flows and integrations?


Norman-Cognitive-Artifacts.pdf. (n.d.). Retrieved September 27, 2017, from

Hollan-Hutchins-Kirsch-Distributed-Cognition.pdf. (n.d.). Retrieved September 27, 2017, from

Perez, S. (n.d.). Google Maps Now Lets You Add A Stop Along Your Route, Check Gas Prices. Retrieved September 27, 2017, from

Smith, C. (2016, July 20). Pokemon Go: Google Maps hack makes it easier than ever to find Pokemon. Retrieved September 27, 2017, from