「Unfold Beijing」 探索北京AR项目
Design & Develope by Yundi.Ge
Introduction
The “Unfold Beijing” project creates a conceptual AR solution for Beijing tourism industry. With the combination of an interactive brochure and AR scan application, tourists can enjoy a robust multi-media Beijing tour and get to know more about this city. The “Unfold Beijing” project is expected to provide the tourists with an enhancing AR experience when exploring the city. This project consists of two parts. One is this interactive printed brochure. Another is the AR scan mobile application.
Why I choose this project? Personally, I’ve lived in Beijing for almost 6 years and I love Beijing. I love to take photos from different perspectives in this city. It is a complex city that merge modern skyscrapers into ancient palaces. More importantly it is a popular tourism city with tourists all year round. In this case, It inspired me to create a tourists solution for Beijing tourism industry in order to enhance the tourists experience here.
Design
Identity Design
• Red means lotus in Chinese culture, and you can see the colour red in almost every corner in Beijing. So I chose red to be the main colour of this project.
• The inspiration for the logo came from the name of this project. Therefore, I drafted different kinds of shapes and tried several icon combinations that may best reveal the word “unfold”. At last, the logo on the right outweighed others by its simple shape and clear explanation. It included all the required elements of this project: Augmented reality scan function, revealing brochure pages and the city Beijing.
• Overall, the project design was divided into three sections: the brochure, the application and the Augmented Reality overlay content. Every section will strictly follow the visual consistency principle to improve the consistent user experience and build a strong brand identity.
Brochure Design
• You will learn about this whole project and get your application download by scanning this QR code or just search “Unfold Beijing”in the app store. For those who may not familiar with AR scan, I also provided a detailed using instructions, including how to scan or how to use this brochure. The experience content is on the front side of each page.
• On the reverse side, you will surprisingly find that this brochure can be also used as a post card. The large blank area is the postcard writing area with the post code square and stamp area. The tearing line will enable you to tear the postcard off from the brochure.
“ The priority aim of the brochure is to be interactive. Except for the interaction in the virtual environment, the brochure should also be interactable and shareable in the real environment. ”
Some user-oriented design details can be found throughout the whole brochure design.
The binding style of the brochure is saddle stitch, which enables our users to lay flat without pressing it during the AR scanning process.
Before entering 10 AR content pages, there is an instruction page. By reading this page, users will learn about this project and take action step by step. Also, the instruction page and the back cover also provides the QR code for users to download the AR scan application (I use app icon instead of the QR code since it has not been uploaded to the App Store in current stage).
Every image caption is written in both Chinese and English. For those travellers who may intend to visit these spots, it can be useful for them to ask ways from locals.
In order to best implement the user-centred design principle throughout the brochure, every AR image has a scan hint caption beside. These hints can help our users learn about the virtual contents in advance.
Application DEsign (UI/UX)
User Flow
Lo-fi Prototype
Hi-fi Prototype
AR content design
Principle Interactive Prototype
Another design highlight is a fusion of Augmented reality function and print media. I choose ten representative images for ten essential Beijing experiences. These images are also utilized as physical triggers to activate the augmented virtual contents. I use various types of content to improve the visual experiences for our users, such as 3D models, 360-degree footage, videos, animated images, audios and links.
There are several development platforms that currently enable augmented reality features. Android, IOS and Unity are the most common development tools in the current stage. Compared with Unity, Android and IOS development are too hard for beginners, while Unity is the only platform that enables cross-platform development, and the development process is relatively user-friendly. In this case, Unity is my final choice.
DEVELOP
There are several development platforms that currently enable augmented reality features. Android, IOS and Unity are the most common development tools in the current stage. Compared with Unity, Android and IOS development are too hard for beginners, while Unity is the only platform that enables cross-platform development, and the development process is relatively user-friendly. In this case, Unity is my final choice.
Tasks
This application should complete the following tasks during the development process:
Required for function access permission (Camera, microphone, photo album and notification)
Add an initial instruction overlay before the main scan page revealed
Trigger the camera(flip camera) on the mobile device
Augmented reality image recognition (Card recognition)
Be able to take pictures/record video while identifying the card
Photos and videos can be saved to local album
Photos and Videos can be shared to social networks
AR
As for the augmented reality part, the development process of the AR project is divided into stages to complete the tasks above, according to Linowes and Babilinski(2017):
Stage 1: Creating a new Unity AR 3D project
Stage 2: Inserting the user interface in new scenes with interactive buttons
Stage 3: Adding a Vuforia AR camera to the scene with all the image targets prepared
Stage 4: Creating the target database and importing it into Unity
Stage 5: Adding virtual objects into the Hierarchy and adjusting the object scale
Stage 6: Building and Running
Problems & Solutions
Project development is a complex process that requires passion and patience. And indeed, I’ve met all kinds of problems.
01 In initial assumption, there supposed to be a preview page(including saving button and sharing button) after I take a photo or video. After researching, it is almost impossible for the IOS system to conduct such missions. For the photo function, photos can be silently saved with a pop-up banner after the “capture” action. When realising the video recording function, it is difficult to invoke the underlying operating system function into our application. The main reason is that these are high-level- permission functions, and the IOS system is not open-source for developers to access their API. Developers can only perform by applying official developer documentation or using specific coding language. Therefore, I try to figure out another way to achieve this goal. Considering that video recording can be similar to screen recording, applying the screen recording function can be an alternative way to solve this problem in the prototype version.
02 The second problem I’ve met is to create a 360 degree video. The ideal solution is to use the gyroscope, but I finally choose to use the swipe control. One reason is that I can’t find a real 360-degree video for the greatwall. So if I use the gyroscope, it may lower the user watching experience.
03 The last problem is occurred in the self-testing period. The video played normal in unity. But it cannot be played in mobile device. I searched and tried every possible solutions and it did’nt work and I was so desperate. At last, I re-encoded all the videos in Quicktime and magic happens.I think the reason is that the bit rates and encoding of the video may not be compatible with the iphone.
Testing and evaluation
User Testing
In order to detect the design flaw and learn about real user experiences, user testing is an essential step to be taken by designers and developers. As for this project, the choice of user testing method has its particularity. Since the application is an IOS-based only mobile application, real obstacles exist in downloading and setting this application prototype. That is, this application can only be tested on a particular iPhone that has been pre-installed the testing version. Unlike other mobile applications, augmented reality scan application is highly connected with physical printed products. It has no meaning if the test cuts the internal interactions between these two parts. Thus, testing has to involve the physical brochure to uncover the interactive issues between the brochure and the application. Considering the above factors, I choose to adopt the moderated usability test method for this project.
Our 5 Testers: 01 Steven 02 Field 03 Lenna 04 Kenny 05 Rui
5 testers participated in the usability test in Beijing due to the specific project background. The recruiting modes consist of on-site volunteering and friend volunteering. On-site volunteering testing is performed in the Temple of Heaven park area. it is one of the most-visited tourist attractions by foreigners. These participants all meet the requirement. Like able to operate the application on iPhone, understand English and willing to give feedback. After briefing the project with participants, the usability test entered the formal testing stage. In this period of time, moderators took notes and in charge of proceeding the tasks. Afterwards, testers also required to take an interview survey with six questions after finishing the usability test. The purpose is to probe their frustrations and dig up more information through experience.
user feedback
future work
Constraints in Actual Use Senario:
1. The product user experience is not good enough.
2. AR travel use scenarios are limited to achieve its potential user value
3. Lack of valuable applications and quality content
4. AR is a new three-dimensional human-computer interaction technology, which can be different from the former interaction method. It will take a long time for the entire industry to cultivate user habits.
5. the marketing strategy should be considered in the next implementation stage. Since it is a highly industrial-related project, it is possible to launch a marketing campaign.
Reflection in Practical Development:
1.overall interactive experience is not as high as expected. For example, the design of the cover does not show the 3D effect very well, resulting in insufficient user appeal.
2. the content setting of 10 essential experiences is too similar, which is easy for users to experience aesthetic fatigue.
3. Due to technical limitations, the final presentation tends to be a content display instead of a content interaction. The limited visual effects may not satisfy the user experience in the long term.
4. Apart from traditional audio, video, animations and annotations, interactive games should be applied into the overlay of the printed brochure.
Conclusion
The AR technology realises the innovation of experience content, interaction mode and communication effect. As a user, AR augmented reality technology makes tourists no longer passively reading and passively telling the steps and processes of tourism. Instead, it encourages visitors to experience and participate in tourism activities. It redefines the way of tourism and enhances it. The combination of AR and the travel brochure has also changed the way traditional paper media information is obtained. Undoubtedly, in the future, the value of AR technology in practical applications and the role of travel will not be limited to the above concepts.