Cognitive Urban Art - Taipei Lifestyle map
The “Cognitive Urban Art – Taipei Lifestyle map” project was a branding advertising event that was built in 2016. The topic focuses on urban context and lifestyle which is a user-generated content art installation. The project defines the user journey map, urban elements, image analysis methods, and user interface on RWD web, mobile APP, and touch screen table systems.
What is Cognitive art?
This class of images could be called “analytical images” – images that are structured in such a way as to enhance the systematic investigation of a subject. These include – but are not limited to – graphs, charts, diagrams, and maps, a group described by Philip Morrison as “cognitive art”.
IBM established a branch office in Taiwan over 60 years from 1957. They wanted to promote their technology services to local public users in Taipei and enhance the IBM branding, especially focusing on the Watson AI system.
There are three points to achieve the cognitive art project for main stockholder IBM Taiwan demanded after we did the brainstorming with the stakeholders by card sorting.
- Systematic investigation of Taipei local culture; the project wanted to created the sense of belonging and make a connection with local participants. So the team started to investigate the local identifiable symbols.
- Generate the “analytical images” by IBM Watson AI system; IBM Watson system designed to reduce the costs and hurdles of AI adoption while optimizing outcomes. All of the images received the auto-recognize and data mining feedback by the image analysis function of the Watson system.
- Promote IBM Taiwan for 60 years anniversary event; IBM through the cognitive art installation and online activities to express the information of 60 years contribution in the technology field. And their IT service is so close to Taiwanese life.
Why the user would like be part of creation factors?
The project needs stunning and remarkable images that stand out in social feeds via organic sharing and big traffic. at the same time, the users are self-willing to create visual content (and how). As everyone knows Mobile/web-based platforms have made it easier for consumers to create and share images on the go. This art project is capitalizing on that and encouraging fans to create visual content about IBMs’ brands and share it across social networks. Therefore, real-time sharing and putting the fans in the driver’s seat will be the main goals. Our user journey map shows there are some points to achieve this goal.
There are five phases of the user journey to achieve the goal: 1. Receive the event info, 2. Registration, 3. Upload Photo, 4. Image analysis, 5. Info sharing. The users who live in Taipei city can upload their favored daily life photos and go through five phases of the user journey by smartphone, iPad, or desktop. And fellow up the 4 levels of customers actions, touchpoint, front stage interaction, and backstage interaction to analyze the user journey map. The customer’s action described the user behaviors when they process the five phases of the journey. The touchpoint is when the users come in contact with the event information, and start to operate the pre-setting system to achieve the branding information sharing task. The front-of-stage interactions provide multi-functions on systems to guide users to operate the user interaction system. The back of stage interactions arranges the data transmission between the front end and back end system.
User journey map
The creation process
Image 01: 3D rendering of exhibition area
Promotion channels of IBM Taiwan anniversary event
I was looking for the categories of hot topics on social media in which people are willing to share info via their personal accounts. That will be part of the promotion channels. The main purpose of the project was a branding promotion campaign. Therefore the team deduces the promotion channels to reach potential users from the internet users phenomenon. The second was finding a social media platform to be a promotion channel. There are 97% of Facebook users in Taiwan which is the biggest among social media platforms. So integrating the hot topics and social media platforms what are the top 5 categories of information that people are looking for and sharing on Facebook? It became the main category for the next step of this project. According to the Chikita research, the user’s top five hot topics on Facebook are 1. News, 2.Community, 3.How To/ DIY, 3.Shopping, 4.Celebrity/Entertainment, 5.Technology. To sum up the phenomenon we build up the basic operation framework.
Image 02: the hot topics on the Facebook
* The pie chart resource from Chitika, Inc., is a search-based online advertising network.
Image 03: the user via different hardware to access the IBM Watson system
I started to think about input hardware which would be a part of the promotion channel consideration after selecting the social media platform on Facebook. So the project set up three input channels from smartphones, an event webpage, and touch screens on the exhibition site. (See the information framework in image 03) The personal image data was submitted to the IBM Watson system which could analyze the users’ personal interests and lifestyles. The analysis result will display on the official event page and art installation of a 2×4 screen wall in the museum. At the same time, the analysis result will be posted on the user’s Facebook page.
Systematic investigation of Taipei local culture
I investigated three directions that comprise Taipei’s local culture including activities, landmarks, and transportation vehicles of Taipei citizens’ daily life. Taipei is a capital city that has a lot of famous landmarks in the city like Taipei 101, The National Palace Museum, famous street foods, and so on. People who live here usually do shopping in the department store, exercise in the Gym center, work in the commercial zone and so many activities happen. 25.7% of the working population of Taipei are from outside places. So the daily transportation system has become an important element of part of Taipei’s local culture. The visual designer created over 100 icons for mapping the image analysis result by IBM Watson.
Activities
Image 04: the icons about the human activities
Landmark
Image 05: the icons about the famous landmark
Transportation
Image 06: the icons about the transportation
Back to the scene layout on the 2x 4 screen wall which is a 7681 × 2161 pixels map. Taipei is a commercial and residential mixed-use city that includes schools, government offices, and entertainment facilities in the city. How to delimit scene layout? We featured eleven areas such as a gym, train station, department store, market, and so on which were based on the relative directions on the Taipei map.
Image 07: the delimit scene layout
Analytical images by IBM Watson AI system
The IBM Watson system responds to the image classes and scores info from image analysis. I can classify three major types obvious type, average type, and special type based on the image classes with scores.(see image 09) From the users uploading the images,
The image classes with scores classify logic
Image 08: the diagram describe the image analysis method
the system could understand which property they belong to. There are five major properties and two special properties would show on the web page with cute icons and radar charts. The image classes with scores classify logic shown on the left image 08.
Image 09: IBM Watson Image analysis result about classes with scores
From time to time, the system received the users’ personal property results. The system would map data with the particular icons to display on the Taipei lifestyle map.
Image 10: slow motion to show the Taipei city map transformation
User Interface Mock Up
This project would create three types of user interfaces based on the three operation systems of laptop, mobile, and touch screen. The full size of the Taipei lifestyle map shows on the 2x 4 screen wall which is a 7681 × 2161 pixels map in the exhibition area. The map image would be changed by IBM Watson’s image analysis feedback. The image data resource comes from the RWD event website, mobile app, and touch screen system on site. Therefore I need to create three types of user interfaces based on the three operating systems of laptop, mobile, and touch screen.
User Interface of Responsive web design (RWD)
The information architecture of RWD webpage include the event page and personal account page. (see the image 11) The main function of the event page was to update the Taipei lifestyle map every 5 mins, photo gallery and property. The event page wants to show the Watsons comprehensive infographic result. The personal account page includes the personal information and feedback from the Watson system.
Information Architecture (IA)
Image 11: the event page had 4 sub-functions in the IA diagram
The white cells are event page functions that show the full event result and guide users to open an account to join the art event.
The blue cells show a personal account page whose main function is to guide users to upload their daily life images and collect personal feedback results.
Three main information on the event page:
- The real time lifestyle map: the system keeps record and steam uploads the map which maps content to the graphic data from Watson.
- Photo gallery: users can browse the latest uploaded images.
- Property: the comprehensive infographic results from IBM Watson system updating which include total user quantity, user image score ranking, tag cloud, and relation chart of surprise effects with reviewers.
Event Web Page
Image 12: the details of wireframe mockup on event web page
Three buttons on the event web page are the call to action on “sign up/Login”, “upload photos” and “check activity guide info”. You could check the wireframe mockup on the left image 12 and the final user interface mockup on the right image 13.
Image 13: graphical UI mockup on event page
Four main functions on the personal account page:
- User Profile: the row shows one time upload result feedback. Those include the radar chart, image score from Watson’s analysis feedback.
- Photo gallery: it looks like a slideshow to review the photos that user loaded history.
- Time-lapse video: it is the 10 sec movie clips which capture from Taipei lifestyle map real time status. The streaming feedback history shows Taipei lifestyle map in different timing which is based on image uploading moment.
- Personal score: it shows comparison of user score and ranking of all participants.
Personal Web page
Image 14: the details of wireframe mockup on personal web page
The left image 14 was the first draft wireframe mockup based on the information architecture diagram. There are two buttons on the personal account page. One is to upload more photos and the other is to share them with social media groups. The final result user interface mockup on the left image 15.
Image 15: graphical UI mockup on personal page
User Interface of Mobile Device
Image 16: paper prototype of mobile UI mockup
Image 17: the future Taipei virtual citizen card
Image 18: login page on mobile APP
I did the paper prototype for a mobile device. The users just want to quickly get to know which personal property results from IBM Watson analysis and share the result with friends. So we simplify the mobile app function based on the information architecture diagram. The main functions are “register” and “upload photos” on the mobile APP. In the end, we provide a Future Taipei citizen virtual ID which contains their radar chart and personal profile info. (see the image 16~18 on left) The users can log in to the event website for checking the details of time-lapse videos and photo history.
User Interface of Touch screen table
The touch system provides an interactive experience for visitors to the exhibition site. I use the coloring system to create the image. It defines a special effect that the user could see their coloring creation show up on a 2×4 screen wall. I set up three coloring options on the city transportation system. That includes airplanes, buses, and cable cars which show on the map. All vehicles are on the service route. The colored image data would be collected by the IBM Watson system. The system would release the special firework/balloon effects when the data is archived to every multiple of 1000 times participants.
Image 19: the main Coloring user interface on the touch system
Conclusion
The “Cognitive Urban Art – Taipei Lifestyle map” project spent a lot of effort on defining the urban context and analysis model of the IBM Watson image system. We provided three hardware options for uploading the image depending on different operating systems. There were two points from the user observation during the event.
1. unexpected user behavior: originally the mobile app I set the user flow which is uploading the photos from their cell phone device and then checking the result. Nevertheless the real mobile users in the exhibition site. They would like to upload the photos and take a picture for their photos to show up on the screen wall. Or the user would like to take a photo of them coloring vehicles. And some of the users would share the photo which they took to their personal social media pages. They skip our app. It shows that people enjoy recording the moment of what they see more than the system record.
2. The limitation of the image size: the system has to delete all images when pictures are full on the screen. The user generation art definition should keep all the data and the whole evolution process. In future work, we might need to extend the image size on the x axial. We might provide the auto slow-rolling function of the map. Users can have the whole picture of the art evolution.
Although those two user behaviors are unexpected. But overall users would like to upload their photos to IBM Watson’s system for getting the personal analysis result. The Facebook post and share achieved over 1000 fans and likes on the first first day. The major topic of sharing photos is food culture related.