Author Archives: Yingxin Lyu

Modular design principles: ios and WeChat

For the first question, I will analyze how modular design principles applied in an iPhone as a smart phone with a graphical user interface. When an iPhone is awakening, people usually interact with five different interfaces: home page where all apps locate, control center where to adjust brightness, notification center, search and siri, and backstage of apps. Each of the interfaces can be seen as a subsystem, with many elements grouped into it, in order to manage the complexity of all these functions. Moreover, each of them works independently. For example, if the user pulls out the control center, although the page looks like floating over the home page, whatever the user operate will not has impact on the home page; everything is operated in the subsystem. Further, every time when Apple updated the ios, they had made small adjustments in each module, like using new icons for apps in home pages, changing the appearance of notification bars, and so on. They can make innovation in each module without impacting other ones. To sum up, it is a system in which the visible design rules are enabling—firm enough to encourage modular innovation and recombination—but loose enough not to be constraining to the evolution of the system(Graud and Jain, 1996).

For the second question, I will use WeChat as an example again. First, as an instant chatting app, in order to let the user to send pictures, documents, locations, or make a video or voice call, the app has to work with other related apps of the smart phone, like Photos, Camera, Files, GPS, and even some hardware of the phone, like the microphone and telephone receiver. In addition, it performs the same way if the user wants to post photos and videos to share with friends in Moments. Second, if the user receives a document in the WeChat, and wants open or save it in other apps, the WeChat will communicate with other apps in the smart phone, like Kindle, Word or Gmail. Third, now articles, videos, news and other contents published on other platforms (viewing from their apps), can be shared by the user to friends through WeChat.

In order to answer the third question, imaging that all WeChat functions, including chatting, sharing, WeChat pay and others, are all messed up in one page, it will be very hard for user to find which the exact function that he or she wants to use. Although everything is visible, it is difficult to interact. In the contrast, actually, WeChat grouped their functions in different modules with interfaces to communicate to each other. For example, now the user is browsing the first page (including all information about chatting), he or she cannot see the functioning of Moment (the name of sharing platform, on the third page). However, if there shows up a red dot with a number, he or she will know that there must be someone interacted with him or her. Then, the user can choose to use the function or not, of course it is easy to reach. Thus, the bottom bar with four icons can be seen as the interface which connects these 4 main pages. Although the number of visible functions in each page is finite, the interface can tell the user whether there is a state change. As a result, the user can easily to interact with each function at the right time.


  1. Richard N. Langlois, “Modularity in Technology and Organization.” Journal of Economic Behavior & Organization 49, no. 1 (September 2002): 19-37.
  2.  Garud, Raghu, and Sanjay Jain. “The Embeddedness of Technological Systems.” Advanddes in Strategic Management  (1996): 389-408.

Design principles of Wechat

  I will take Wechat, a mobile device app, as the example. Wechat is a social network app, which provides many kinds of services like instant chatting, sharing and browsing moments to friends and from friends, enjoying articles and videos published in the platform, and a series of paying operation. As Norman says “The only way to solve the complexities of services is to treat them as systems, to design the entire experience as a whole.”1 The designer of Wechat made all these services into a system, showing as four main interfaces in the app. In order to explain each specific function of these four interfaces, the designer used succinct symbols at the bottom of the interface to distinguish. First one is Chats; all the chatting banners are listed here. Second is Contacts; people can search the friend they want to chat with. The third interface is Discover; people can share photos, music and ideas in of the sections listed in the interfaces named Moments. Moreover, they can also enjoying videos published in another section. The last one is Me; people can manage their personal information and settings here. In addition, paying operation is also listed here.

These understanding symbols and titles distinguish these four different functional interfaces, which meet the principle of visibility, or affordances (or signifiers). For example, the symbol of text bubble guides people to chatting interface, and the symbol of a human head points to contacts. Moreover, the designer implemented the principle of feedback. When people choose one of the buttons, the interface will change to the related one and the button will become green. The changing of color is a sign that told people what kind of change they did and gave them a positive feedback that the app responded. The third principle that the designer applied in Wechat is mental models of conceptual models. When people receive a message from their friends, there will show a bigger red dot with number next to the text bubble. Red color is quite different from the green theme color of Wechat, and red is also representative for warning, so people will perceive the red pot as a sign of an important event. Moreover, if people receive comments or likes in Moments, the red pot with number will also show up next to the symbol of discover. However, if there is only a smaller red pot without number, it only means that friends update their new moments. Different kinds of red sign also make people perceive different level of urgency of messages. This design conform to that the mental model of a device is formed largely by interpreting its perceived actions and its visible structure.

In the second part of the writing, I will try to deblackbox iPhone 11. In iPhone 11, each different function is compartmentalized by grouping and graphics1. It is a combination of tens of devices, including a mobile phone, a camera, an mp4, a game machine, a clock, a GPS, a facial identification device, a barcode and a QR code scanning device, and so on. Each of these functions has a application with a special icon designed according by their functions. For example, the icon for camera app is a cartoon camera figure. The design shows that the designer implemented the principle of affordance. In addition, since the icon is designed as a same shape like a real square button with others, which is the application of the principle of mapping, because the button like icon will guide people to tap once in order to open the app. Moreover, if a person taps the icon correctly, and the iPhone receive the instruction, the icon will become a little grey and then the application interface will fill over the screen, which works as a feedback to him or her. The designer made all these visible, so users will feel easy to interact with iPhones.


How could they understand user models if designers cannot let users try their products before they publish them? Whether it will be helpful to learn consumer psychology, or do some surveys? For many online games, developers will implement beta tests before publishing. In current society, will it be possible for products developers to do something like this?

1. Donald A. Norman, Living with Complexity. Cambridge, MA: The MIT Press, 2010.

2. Donald A. Norman, The Design of Everyday Things. 2nd ed. New York, NY: Basic Books, 2002.