Qinhuai (秦淮) scenic district, one of Nanjing's iconic sites, is located in the southern part of Nanjing city. The Ming - Qing Dynasty style scenic belt which is built around the Confucius Temple (夫子庙 Fuzimiao) has the function of culture, tourism, business and service by merging the temple, the market, the street and the beautiful scenery together. However, the tourism navigation terminal with well-organized information structure is still lacking in this area. Thus, the goal of this project is to design a navigation terminal device which aims to improve user experience of the tourists by solving problems resulted from the incompletion of the existing navigation system and absorbing the cultural elements to enhance the cultural characteristics of Qinhuai and Nanjing.
Advisor: Nian Wang
Tools: Photoshop, Illustrator, After Effects, Pro/Engineering, KeyShot
This project aims to design and build the appearence and interaction prototype of a tourism navigation device for Qinhuai sceneic district in Nanjing, China. The name "Qinhuai" stems from the Qinhuai River, which runs through central Nanjing and is the origin of traditional Nanjing culture. Thus, the main exploration of this project is to present this cultural vein. Also, since the main functionality of this device is to navigate, geographical information is involved. Thus, another challenge is to organize the complex informtion into a more reasonable structure, and to enable the user to get the information they want with ease on every page.
After actual visiting Qinhuai scenic distrinct and observing tourists for several times, I found that existing navigation system is lacking of not only visual consistence, but also suffice functionalities for users.
Images above are the tourist navigation system used in Qinhuai scenic district. Although digital and web based navigation system has been implemented, as shown in the last two images, it seems that the system is not built based on the users real need and thus generated pain points. It is more of a digital map marking loctions of restrooms, visitor's centers, etc. It gives user a hard time to mapping the real location into the digital map, and the information it displayed is ill-organized and sometimes redundant. Summerizing the pain points, I realized that tourists need could be writen into two scenarios:
To carry out the tasks in the first scenario, I devided the main functionality into two sections. The first section is the icons marked on the map representing locations which will also served as buttons, whereas the second section is a control bar which will enable the user to show and hide a certain group of icons to minimize the information shown on the map simultaneously.
For the icons, their are two main groups. The first is the icons of side informations, like stores, restaurant, entertainments, subway stations around the scenic district. The second group is the icons for the tourist attractions, the main body of the navigation system.
I devided the tourists attraction in Qinhuai scenic district into three levels. The first level are large scenic areas in this scenic district because it can be regarded as a combination of these unadjacent areas, where Qinhuai River serving as a bond. Areas in this level all have several secondary attractions. These second level attractions are specific scenic sites like the Confucius Temple, the Jiangnan Examination Hall (江南贡院), which are independent sites have different information to be shown, like the price of the ticket and opening hours. Besides, some of the larger ones in this group is able to contain several third level sites. For instance, after press the button of the Confucius Temple, the map of the Confucius Temple will be shown, and third level sites which belongs to the Confucius Temple, like Dacheng Hall (大成殿), the main hall of Nanjing Confucius Temple will be shown on this map. The third level sites contain the information of the vocal introduction of themselves. For the tourist attractions in the second level which are too small to contain third level sites, press the button of these places will only show the vocal tour guide and other information, since the map is not involved.
The control bar is designed to provide user the freedom to display icons of sites, user's location, restaurants, stores, entertainments, visitor's center and restrooms respectively. User can mark a place when browsing the page of it. When a place is marked, it won't be hide even the user choose to hide the icons of this kind.
To meet the requirements in the second senario, I used a menu bar on the left, child entries are map, tourist attracitons, Xiaochi (featuring substantial snacks), activity, traffic and set. The use can tab into each entry to find an item they want. Because Qinhuai scenic district is too large for a tourist to visit most sites within a short time, the visitor can find the food, places, activities they are interested in the most by browsing the items in every entry. I those items are linked to the map, like a food item will linked to a restraunt in the district which provide that kind of dish which enable the user to mark on a map. Also, since searching is a important functionality, though using the same database, searching button was separated from the menu bar and located on the header to be more observably and accessible.
For the reason that Qinhuai scenic district is too large to display on a phone-sized screen entirely. Thus, the function of the icons of the first level scenic areas are anchoring. The map will be moved automaticly and the whole scenic area will be shown at the center of the screen after user pressing these buttons. The show and hide of this kind can be countroled by the control bar. But when user shrink the map to a cirtain level, the icon will stay on the map, whereas the secondary toursist attractions will be hided. For these reasons, this type of icons are larger than others. In terms of visual design, I chose Chinese characters, a feature in the scenic area and Chinese latticed window which is commonly used in traditional constructions as elements in forming the final design.
The icons of larger tourists attractions in the second level used the simplified figure of the most featuring constructions in each attractions and used the color on their walls or rooves as the background color respectively. Like the Dacheng Hall is used in the icon of the Confucius Temple on a red background which comes from the wall.
As for thef smaller tourists attractions in the second level, because normally they are famous of their cultural influence rather than iconic constructions, featuring objects which trying to symbolize their cultural characteristics were implemented. For example, Li Xiangjun is a famous courtesan and musician in Ming dynasty, whose legend was adapted into the famous musical play and historical drama “The Peach Blossom Fan” completed in 1699. Therefore, a folding fan with flowers on a pink background is used as the icon of its button.
The third level sites will be presented within the map of the larger secondary tourists attractions. The map was also simplified to keep the same style from the icon design and to decrease the distraction. Shown below is the inside map of the Confucius Temple. The locations of third level sites were marked by groups of Chinese characters.
Each sites on the map will be shown as nodes represented by the button below. User will press the button to open the vocal tour guide page of each sites. The graphic icon is a simplified form of the traditional folding notebook which was commonly used for documents in Ming and Qing dynasty.
The color and the font used in the interface form the foundation of the interface's style. Thus, a Chinese style muted color palette was used. To echo the fact that Qinhuai river is the cultural origin and bond of the whole sceneic district, control bar, menu bar and the Qinhuai River on the map are sharing a same color. In terms of the font, because Nanjing culture had a huge impact on the culture of Ming, Qing dynasty, I used a font called Qing Dynasty Woodblock Printing font (Woodblock printing is the main printing method in publishing industry then) to convey a feeling of the cultural environment of around 15 century China.
The main page is the page illustrating the guide map and the icons on it. This page is the default page since the map is the main body of showing geographical information. The icons are marking the locations. In the header area, the title, which is "Qinhuai, Nanjing" is in the middle, the menu button is on the left whereas the searching box button is on the right. The control bar is in the footer area, and in this case the icons of the user's location and tourist attractions were turnt on.
The map attached to the secondary tourists attraction is still using the same map as background, however, unrelated icons, like other sites, restaurant that is too far away, were removed from the page. For each third level sites, there are buttons marking their locations and containing the vocal tour guide.
After press the button of the third level site for the vocal tour guide, the background which is the map of this tourists attraction is gonna become obscure and dark to set off the main information. The information panel of the site will be shown amd open as a folding notebook, which is the graphic on the buttons for each sites as well. Like ancient Chinese wrtting tradition, the content is shown vertically from right to left. And the start point of the progress bar are also on the right to match up.
I mainly prototyped two workflows to illustrate the information archetecture. One is to find a vocal tour guide of the statue of Confucius in the Confucius Temple which belongs to a third level site, Dacheng Hall, and the other is to find a restaurant which provide the dish, Huangqiao Shaobing, found on the menu's food section.
The wireframe for the workflow of All-set app can be divided in 2 main parts—— office and home, each part contains the edit function which enables the users to manage the items for needs.
Chinese lantern is another symbol of Qinhuai River. Lots of lanterns can be found along the river every night, and a Qinhuai Lantern Festival will be host every year. Thus, Chinese lantern was used as a visual source for the appearence of the device. The device is 15 centimeters in length, 7.4 cenimeters wide, and 0.6 centimeters in thickness according to the data from ergonomics database. The semi-ring on the top is for tying the lanyard, so the user can wear the device rather than holding it in hand all the time. There are only two buttons, one is for open, close, and locking the screen, and the other one is for controlling the volume of the sound. On the back of the device, there is a antiskid pattern which was inspired by the pattern of the bamboo lattice lantern. Also, there is a headphone provided with the device. Echoing the antiskid pattern, the dicoration of the headphone is repeating this pattern. And the color is the same as the color of the road on the map of Qinhuai sceneic district.
Finding a vocal tour guide of the statue of the Confucius, which logiclaly belongs to Dacheng Hall.
Finding a restaurant which provide the dish, Huangqiao Shaobing, found on the menu's food section.