Downtown 80 Transmedia Bible

Faculdade de Engenharia da Universidade do Porto Laboratório em Multimédia Seminário Multimédia

1

Ana Filipa Sousa Alves Ana Pereira Ramos Bruno Emanuel Cardoso Miranda Gonçalves Miguel Miranda Guedes da Rocha e Silva Pedro Nuno Vilhena Magalhães 2015/2016

2

3

SUMMARY 7 INTRODUCTION 10 Transmedia Storytelling 13 15 16 18 20

73 75 76 78 81 82 88 89 90 93 95

TREATMENT Tagline Synopsis Characters World Overview

23 FUNCTIONAL SPECIFICATION Platforms and channels 24 Main Website 32 Webisode 34 App 36 Police Websites 38 Box 44 User Journey 49 51 52 60 66 71

97 99 100 102 104

DESIGN SPECIFICATION Design aesthetic Branding and Design guidelines Storyboard and Wireframes Style guide, Color and font specs Full assets list

TECHNOLOGY SPECIFICATION Introduction System Architecture Walkthrough Platforms App Prototype The Facebook API The Google Maps API User Cases Conclusion Coding and builds BUSINESS AND MARKETING Goals Target Audience Business Models Calls to Action

107 REFERENCES

4

5

INTRODUCTION

6

7

The main goal is to engage the users in a story set in Oporto, and make them walk around the city with their friends to understand and be part of that story. Users will have to solve various challenges along the way and interact with the city’s citizens, places and other users. Each user will have a different character/path and will meet the others at certain locations to cooperate in completing missions. By this, we intend to promote interaction between users and give the sense of mutual help even in a competitive environment. Missions can either be questions, taking photographs, treasure hunting and social interaction with people from the city.  Some platforms focus on providing information about the city and the places visited, while others target how users experience and interact with other people and places. Social Networks (Instagram, Facebook, Twitter) will serve as an environment for users to express their opinions regarding the experience by sharing photos, setting challenges, giving information/support. The hashtag #downtown80 will be used to promote the project and interaction between users within the community.

This project was born at FEUP as a result of an assignment for the subjects Multimedia Laboratory and Multimedia Seminar, during the first semester of Master in Multimedia. The assignment consisted of building a transmedia experience inspired by Jules Verne’s book “Around the World in Eighty Days”. “Downtown 80 – Porto” is a transmedia experience where a new story, told across several platforms, was created using some of the original elements. This project captures the sense of urgency to finish a task and invites its users to solve a mystery following different itineraries in Oporto’s downtown, each based in three of Verne’s characters: Phileas Fogg, Jean Passepartout and Detective Fix. Those paths have common aspects with the ones travelled by the characters in the book and there will be different paths according to each character’s traits. Users will face some challenges along the way and will be invited to interact with each other and places with the objective of completing the route under a given time. “Downtown 80 – Porto” lets users interact both physically and virtually, while exploring Oporto’s city center. This product can be seen as new tool to visit the city providing locals and retailers with attractive and distinct opportunities of promoting the city and its local businesses.

8

9

TRANSMEDIA STORYTELLING

“A story should have a beginning, a middle and end but not necessarily in that order.”

Transmedia Storytelling is the technique of telling a story across different platforms. Unlike the usual stories, where the same story is repeated in books, movies and games, transmedia storytelling offers a whole new experience. For example, the first part of the story is a book, the second part is available in a game and the third as a movie. The combination of different platforms turns the narrative into a wider, bolder and more immersive experience, reaching and engaging a larger audience.

French film director and theorist Jean-Luc Godard

10

11

TREATMENT

12

13

TAGLINE

Explore Oporto as if you were part of a contemporary adaptation of “Around the World in 80 days”.

14

15

SYNOPSIS This story starts in 1994, when a woman named Aouda is found dead with a shot on her chest, at her home. She was married to John Doe who was arrested, following his wife’s murder. But it was only in 2012 that the police found some new evidence and he got convicted to 20 years in prison.

80 minutes after, Pedro collects all the evidence and John gives him a link to a police website with stolen credentials. When he logs in, he gets access to an interrogation report made in 1994. After Aouda’s death, the police interrogated a neighbour of the couple who says John is very nice person. He also refers that another man visited Aouda frequently.

In 2015, John escapes from prison and decides to contact Pedro Fogg, the son of the lawyer who was against him at court. John blackmails him, claims his innocence and asks for his help, otherwise his father will die. John gives Pedro 80 minutes to collect all the evidences that were forgotten or hidden by the police. Pedro feels he has no choice but to help the criminal, along with his best friend João Passepartout. In the meantime, there is a detective who is given a new case. The Special Investigations Unit (SIU) decides to hand John Doe’s case to Detective Fix and it is now his duty to find the fugitive.

Meanwhile, Detective Fix also accesses the Special Investigations Unit website to check John Doe’s case. He sees the same report as Pedro but he also finds to a letter written by Aouda to her lover in the day she died. That letter reveals that Aouda had a lover whose name is David, with whom she was planning to escape. The letter also showed a new side of John Doe, a violent one. She also talks about a newborn and ends the letter as Aouda Passepartout. Fix gets thrilled with this new discovery and decides to send this letter to João hoping he convinces the boy about John being a bad person.

Pedro starts receiving messages from John Doe with information about how and where to collect the clues that prove his innocence. João goes with him but he also starts receiving messages from an anonymous number, warning him he should be careful with John. João decides not to tell Pedro about those messages.

Since Pedro, João and Detective Fix have now access to the SIU website, they could all see Vânia’s message. Once they arrive in her store, they get to discover what is inside the box: a love letter addressed to Aouda dated before the one Aouda wrote the day she died. It contained a plan for the lovers to elope. Her lover would pick her up in 10th September 1994 and run south with their baby. This letter was signed by David Fix. There is also a birth certificate of João Passepartout, indicating that John Doe is his real father, which triggered Fix’s anger. The box also contains a piece of newspaper about a car accident that occurred in the same day Aouda died. It was not far from their place, and the victim was a man named David Fix. He hit his head and lost his memory.

At Rua de Camões there is a girl named Vânia who opened her store in 2014. While she was moving in, she found a box with a love letter and other documents. Because she found it to be very romantic, she kept the box. In the news, Vânia hears about a fugitive and his story and quickly connects it to the box in her possession. She decides to call the police since she believes the box may be related to the case.

Detective Fix is warned by the police that there are two young men acting suspicious at Oporto’s downtown. He decides to follow them to check what they are doing. Once he finds out they are trying to help John, he concentrates on persuading João not to help Doe and Fogg, by sending anonymous messages.

16

17

CHARACTERS

Played by; Gustavo Rocha

Played by; Francisco Oliveira

Pedro Fogg

João Passepartout

Pedro Fogg is 22 years old. He was born in 21st September of 1993, in Oporto. He finished his bachelor degree in Law last year, following his father’s and grandfather’s steps. He is a serious boy, very studious. Avoids parties and never had a girlfriend.

João Passepartout is Pedro’s best friend and is 21.

He’s now searching for his first case. Luckily, he won’t have to wait too long as it will cross his path soon.

He was adopted by a portuguese family when was only two months old along with two other children, Miguel and Isabela. Unlike Pedro, João likes to party and to go out for drinks now and then. He has a girlfriend, Rita, who studies Multimedia. They met at his birthday party in 5th July 2015. He’s finishing his degree at FDUP, where he met Pedro. Finding the truth is what bonds them.

18

Played by; Manuel Alves

Detective Fix Detective Fix was born in 22nd July 1974. He works at the police and has been promoted recently. Despite of his career’s success he doesn’t talk much. He’s devotion for the job keeps him a quiet man, he doesn’t like to waste words. Now, with 41 years old, he has a new case that intrigues him and all the police department.

Played by; Ana Pereira

Played by; Christopher Bernardo

Played by; Rui Rocha

Aouda Doe

John Doe

Daniel Fogg

Aouda Doe was 19 years old when she was murdered. She came to live to Oporto when she was just a child. At 15 she met John Doe with who she got married at 18. Aouda was a happy girl, her only wish was to build a family of her own.

John Doe is 43 years old and he’s in jail. Well.. at least he was last month. He escaped from prison and he is now a fugitive.

Daniel Fogg is 47 years old and the father of Pedro.

Unfortunately, everything ended in 10th September 1994. She was found dead at her place, with one shot on her chest. Her husband, John, was found guilty for the murder.

He went to multiple trials since his wife’s death. But it was not until 2012 that the lawyer Daniel Fogg built a solid and strong argument against John, throwing him to jail, so many years later.

19

He was born in London in 1968, during the riots against Vietnam War. His parents came to Oporto in order to provide a safer place for Daniel to grow up. He is married to Ana with whom he has 2 children, Pedro and Bruno (18 years old). He’s now a well known lawyer who would never guess that a 2012’s case was making a return with fresh evidence that can prove him wrong.

WORLD OVERVIEW The story is set in Oporto’s downtown in the present year, where user will have to search for clues to solve a mysterious crime that happened in this city back in 1994. The experience involves users directly as they must go to certain places to uncover details and clues, otherwise it will be impossible to discover the truth. The outdoor experience directs users through specific points of interest, some of which are pictured next.

Picture 2 - Example of a point of interest portrayed in this experience (antiga Cadeia da Relação)

20

Picture 1 - Example of a point of interest portrayed in this experience (Aliados)

Picture 4 - Example of a point of interest portrayed in this experience (vista do Hard Club)

Picture 5 - Example of a point of interest portrayed in this experience (Sé do Porto)

Picture 3 - Example of a point of interest portrayed in this experience (montra da Velo Invicta)

Picture 6 - Example of a point of interest portrayed in this experience (Ribeira)

Picture 7 - Example of a point of interest portrayed in this experience (Ponte do Infante)

21

FUNCTIONAL SPECIFICATION

22

23

PLATFORMS AND CHANNELS MAIN WEBSITE The experience may have its start in the website www.downtown80.com. In this web address the user will access the first (film) and second platform (app), as long as a short explanation of the project, the team behind it, information about the characters, a blog and also a special area for the players.

The “About” page has short description of what is transmedia storytelling Picture 9 - Print Screen of www.downtown80.com “About” page

Even though it’s not considered as important for the story as the other platforms, users can access this website to know more about the characters and their biographies, since this is the only place where they are available.

URL: https://www.downtown80.com

The homepage contains the website’s menu; a simple slideshow which creates some mystery regarding the story; three summaries about “What”, “Who” and “Where”, the video (first platform), a short biography of the characters; a call to action to continue to the second part and also a link to Downtown80 Facebook page.

In this page there is the explanation of the project, the documentation, its goals and also partnerships.

Picture 8 - Print Screen of www.downtown80.com homepage

24

Picture 10 - Print Screen of www.downtown80.com “The Project” page

25

In this page is presented the Episode 1 (this story) and a second episode that could be produced if this project is successful.

Picture 12 - Print Screen of www.downtown80.com “The Story” page

The page about the team has a little biography of each member, with some curiosities and a little humour. The members are divided in two groups, the technical and the creative department.

Picture 11 - Print Screen of www.downtown80.com “The Team” page

26

27

This is a special area, dedicated to the players. Here, the users can track what is happening on the Facebook page, there is a gallery of the pictures uploaded by the users during the game (app) and also a booking system. In this system, players are allowed to play with strangers and/ or friends.

This is the page about the “Episode 1”. It contains a short introduction of the story and some recommendations. Also, there is a short biography of the all the important characters.

Picture 14 - Print Screen of www.downtown80.com “Players” page

Picture 13 - Print Screen of www.downtown80.com “Episode 1” page

28

29

This page has access to the app download, which is not available yet.

The “Contact” page contains a form in case the user wishes to contact the team.

The “News” page is very similar to a blog. It has a sidebar on the right where the user can search for keywords, see recent news, comments and also a short review of #downtown80 on Instagram. The content of this page is directed to the tourism of Porto, the local businesses and activities for the players.

Picture 16 - Print Screen of www.downtown80.com “Contact” page

Picture 15 - Print Screen of www.downtown80.com “News” page

30

31

WEBISODE This is the introduction of the story. The protagonists are presented for the first time, as real characters, real people. Pedro Fogg and João Passepartout bump to each other at FEUP and start talking about random things until Pedro receives a weird phone call. Meanwhile, the Detective Fix its in his office and receives a call from his boss, informing that John Doe has escaped from prison. It is now his mission to find the fugitive. Returning to Pedro’s phone call, he hears a disguised voice. This voice tells him it is in fact John Doe. He says he was sentenced to 20 years in prison in 2012 for killing his wife in 1995. The prosecutor was Daniel Fogg, Pedro’s father. He also says he is innocent and that he need Pedro’s help to prove it, otherwise, his father will suffer the consequences.

Picture 18 - Print Screen from the YouTube video

Picture 17 - Print Screen from the YouTube video Picture 19 - Print Screen from the YouTube video

This movie was shot at FEUP and also at a private home by a Canon 500D. It was edited in Adobe Premiere CS5, using music with Creative Commons. This webisode is available in the YouTube Channel.

URL: https://www.youtube.com/watch?v=aGp5OfYoViE Picture 20 - Print Screen from the YouTube video

32

33

APP

The app contains a menu, which is accessible through all the game. This menu has the “Play” button, the story with a little synopse and also the instructions. When the user starts the game, he will receive the message with a piece of the story and then he will have a question (for example: In the 10th of September of 1994 I was supposed to meet Aouda in S.Bento. It was our anniversary. I waited and waited. It took long that I counted the trains on the walls. ). To answer these questions, the player will have to go to places (for example: How many trains are up on the walls of the main hall?)

To continue the story, the player has to download the app that is available on the website. This app (game) needs at least 3 people (it can also be played in pairs) to be played.  If someone wishes to play but has no one to play with him, he can also “book” a game in the “Players” page of the main website. The game starts near Almeida Garret statue, in Aliados. Once all the players are at the place, they can choose what character they want to play or let a quizz decide for them.

All the players need to finish their paths in 80 minutes. If they don’t, John Doe is arrested and the story ends. However, the users will never know if he was in fact innocent or guilty.

Each character has their own path and clues. For example, the one who plays Pedro Fogg will receive messages from John Doe, with clues that proves his innocence; who plays Detective Fix will receive messages from the Police Department telling him to watch closely the strange activity at Porto downtown; who plays Passepartout will receive messages from an anonymous number that claims to be Detective Fix, who tells him to not trust John Doe and that he should deviate Fogg from his goal.

The app contains two timers, one for the 80min and a smaller one for each step. If the player takes too long in a stage the 80min timer will dicrease. If he completes in a shorter time, the time left will be added to the 80min timer.

Picture 21 - Print Screen from app design prototype

34

35

Police Website After the game is over, every character will receive a message of congratulations and also a link to a website. Each character receives a different link to very similar websites. This websites are supposed to be a copy of a Special Investigations Unit real website. They all have the same structure, the same pages and same information, except the part that contains the evidences of John Doe’s case.

URL: http://downtown80porto.wix.com/police-siu-fix

Pedro Fogg sees a questioning report that suggests John Doe might be innocent.

http://downtown80porto.wix.com/police-siu-lopes http://downtown80porto.wix.com/police-siu-pereira

João Passepartout accesses a love letter from Aouda to a lover, reporting the abuses that she suffers from John. She also says she has a newborn. In the end of this letter, she signs as Aouda Passepartout. Detective Fix has access to both of these evidences, making him the most ambiguous character in the story. These websites can be consulted at any time, in any interface.

Picture 22 - Print Screen from the website

36

37

POLICE  SPECIAL INVESTIGATIONS UNIT   

Dear David,

INTERROGATION REPORT      Agent Paulo Oliveira                                                                                Witness: ​Mário  Sousa  DATE: 20th September, 1994     Mário Sousa is the front door neighbour of John and Aouda Doe. This interrogation was  conducted at the police office, at 15h00 of 20th September, 1994.      P​: Good afternoon Mr Sousa. Are you comfortable? Want a cigarette?     M​: A Cigarette??! Do you think I smoke?    P​: No, no… I just want you to feel comfortable.    M​: Comfortable? You’re mocking with us and you want me to be comfortable?! I already told  you, John is a pretty good lad.    P​: Calm down Mr Sousa.. we just want to ask some questions. Ok?    M​: Of course I’m ok.. as if I ever would confront the police..  But ok, let’s see then...    P​: Very well… So, do you remember 10th September?    M​: Sure I do! It was the day I went to the chiropodist with my wife. I spent  five “contos” with  her, Jesus!    P​: (laugh) And what about your neighbours? Noticed anything strange?    M​: Strange?! No! Never, they were perfect! Never heard a sound coming from their house! I  really liked them…     P​: I heard John did a lot of favors on your grocery store… did you ever notice  something suspicious?    M​: No! He is a strong boy but he has never been suspect with anything or anyone. But wait!  Now that I’m thinking… there was something odd, yeah…     P​: What is it?     M​: Well, I’ve noticed there’s a Fiat that usually parks at their front door. It’s been months that 

I read your letter and I was very touched . I am so sorry, but I wont be able to do what we have planned anymore. I’m so happy with my baby , I need to settle down so I have decided to stay with John, despite of everything he has done. I know he is a violent person but I forgive him. I hope that the baby will help him change. I promise if he beats me again, I’ will tell you. I’’m really sorry. . . but I need to say goodbye to you and make an effort to start a new life with John, again.

Always yours, Aouda Passepartout

Picture 23 - “Important Proof”, Letter from the victim, written at 10 september of 1994.

38

Picture 24 - “Questioning Report”, Questioning made to the neighbour of the victim, ten days after the murder.

This is an official document. You are forbidden to share with third parties. 

39

Physical Installation While the user explores the police website, he can also see a new message that gives the player a hint to the next place to go. The message says that Vânia, a girl who has opened a store in November 2014, found a box that might be useful to this case. The user should go there and solve this mistery. The box will be hidden in her store and the player has to find it. This box contains three papers, one with the birth certificate from João Passepartout, a love letter from Aouda’s lover and a piece of newspaper. This is the final platform, this is where the player finds out who was really guilty for Aouda’s murder.

Picture 25 - Print Screen of part of the message presented on the previous platform.

Picture 26 - Birth Certificate of João Passepartout

40

41

Picture 28 - Piece of newspaper

Picture 27 - David Fix’s love letter

42

43

USER JOURNEY

To complete the whole story, the user needs to see the video on YouTube, play the app on an android, visit the Police website and to go Rua de Camões, 353, Porto and search for the box.

To know the end of the story, and to satisfy the more curious players, the user will need to go to Rua de Camões, nº 353 and search for a wooden box. This is the last platform and contains the last pieces of information.

This transmedia case was designed for a certain audience. This audience is composed by young people that use social media frequently.

During and after the story, the users can share their experience in the social networks. This will attract the next players, forming a cycle. This can be a self sustainable form of publicity.

Is through this social networks that Downtown 80 starts getting noticed. Facebook, Twitter and Instagram are extremely engaging platforms and they are all used as a bait for our audience. All of them report the users to our main website (except Instagram). After the user gets there, he has access to the first platform and also the second one. The platform consists of a small video that introduces the story. If the user wishes to continue, he will need to download the second platform, a live Role-Playing game on an app for smartphones. After the player finishes this part, he will be redirected to a website. In here, the user will take his own conclusions, and if curious, will talk to the people who has played the game with him, previously. Gossip is an optional feature of this part, but can also improve the experience, depending on the user personality.

Picture 29 - User Journey Map

44

45

“Conversation is king. Content is just something to talk about.”

Cory Doctorow, Canadian-british blogger, journalist and author

Picture 30 - User Experience Map

46

47

DESIGN SPECIFICATION

48

49

DESIGN AESTHETIC

The aesthetic chosen for this project requires some lightness since it’s used in the freetime by our target audience. To set a mood in an overall picture, the colors used are white, grey and shades of blue. In all the platforms, all those colors are presented in some form.

50

51

BRANDING AND DESIGN GUIDELINES LOGO The logo of Downtown 80’ was born during a research for another project about the games series Assassin’s Creed. The characters behaviour and movements, had some similarity to the ideal movement expected in our users. With both pictures in mind, our logo pictures a man running fast, a little arched as if it was in stealth mode like a game character. To give him a little more personality, a top hat was added to the picture, just like Mr Fogg (the protagonist of the main inspiration) would have. The human figure is divided in multiple geometrical forms as a representation of the multiple platforms. This logo is present in all the platforms, except in the last platform and also in the police websites, since these are supposed to be secret and not related to the game, although it has the signature in the bottom.

Tools: Adobe Photoshop CS5 Adobe Illustrator CS5

Picture 32 - Final Logo

Picture 31 - Logo evolution

52

53

Picture 33 - Logo presented in the Twitter profile

Picture 35 - Logo presented in the main website and its responsiveness

Picture 34 - Logo presented in the Facebook page

54

55

Picture 36 - Logo presented in the first platform

Picture 37 - Logo presented in the second platform

56

57

Picture 38 - Despite the missing logo, there is a small reference to the main website at the bottom of the page

58

59

STORYBOARD AND WIREFRAMES

WEBISODE STORYBOARD Before the shooting, the recording of this video had to be planned. So, multiple storyboards were made until we reached a final version. There were only two spaces in mind, exterior and interior. The exterior one would represent the world of Pedro Fogg and his best friend, João Passepartout. Since they are still young, one is still in university, the place chosen was FEUP. This would also avoid eventual embarrassements with the voluntary actors. To shoot the Detective Fix “world”, an indoor scenery would be a better choice. The goal was to transmit some mystery and seriousness. Tools: Canon 500D Canon EF-S 18-55mm Canon EF 50mm f/1.8 II Adobe Premiere CS5

Picture 39 - Images used as visual reference for the video

60

61

Logo

Logo

Logo

Menu

Menu

Menu

WEBSITE WIREFRAMES Here is the plan to build a consistent and well designed main website.

Slideshow with Call to action

Some content needed special attention and for that, the layout of the website had to be carefully planned. For example, the first platform should appear in the homepage, as well as a call to action. Content

Blog / News

Other information Tools: Wordpress Blaszok Theme for Wordpress

Social Networks Picture 40 - Homepage scheme

62

Social Networks

Social Networks

Picture 41 - Random page scheme

Picture 42 - Blog page scheme

63

Sidebar

APP WIREFRAMES This platform requires a lot of attention due to its nature. Nothing should fail and the design must be intuitive. Both technical and design should complement each other perfectly, otherwise the app won’t be successful. We needed to have into account some things in consideration, just like the two timers, the messages, menus and some buttons.

Tools: Adobe Photoshop CS5

Picture 43 - Design Prototypes

64

65

STYLE GUIDE, COLOR AND FONT SPECS

The main color chosen for the logo and the platforms is blue. The meaning of blue depends on its shade. In this project we used the blue color as a soothing and calm one. It means authority, strenght and also peace. It is most used color in corporate identity.

To have a solid image for this experience, we need to build a strong visual communication. Picture 45 - Sverige Script Font (source: http://www.prettyweddingpaper.com/blog/wpcontent/uploads/2014/03/sverige-script.png)

Picture 46 - Slideshow Picture, Facebook and Twitter banner

The whole experience is nothing more than a modern version of an old story. To embrace both ages in one style, we need to choose wisely the colors and fonts.

The main website contains the same colors as the logo and other shades of blue, to consolidate the overall image. The three police websites (SIU) also present the blue and also the green.

The first movie of “Around the World in Eighty Days” (directed by Michael Anderson and John Farrow) was released in 1956. Despite of the old fashioned type used in the movie poster, during the XX Century the most common font used in movies was actually “Futura”, a sans serif font, modern, futuristic as the name implies. In order to maintain this evolution we chose the CODE Pro Font as the font used in the logo. This font was inspired in the previous one, but with a XXI Century twist. It was conceived to be elegant and clean so it can be used in any type of graphic design. But since the background story of this experience is based in a XIX Century book and the platforms used are all contemporary, we felt the need to create a bridge between this to ages. While the logo presented a modern font, the promotional images (photos of our reality) featured an old fashioned, mysterious font. Sverige Script Font is a curly handwritten font and is used to provide more closeness to the user.

Picture 44 - Code Pro Font (source: http://a1.files.theultralinx.com/image/ upload/MTI5MDI2MDY4OTc0ODQ4MDEw.gif)

66

67

LOGO PALETTE

MAIN WEBSITE PALETTE

APP PALETTE

POLICE WEBSITE PALETTE

R: 101 G: 155 B: 158

R: 240 G: 240 B: 240

R: 161 G: 184 B: 220

R: 63 G: 138 B: 133

R: 168 G: 211 B: 215

R: 160 G: 201 B: 191

R: 123 G: 158 B: 168

R: 37 G: 102 B: 97

R: 83 G: 103 B: 102

R: 46 G: 127 B: 141

R: 45 G: 127 B: 141

R: 199 G: 190 B: 32

R: 46 G: 127 B: 141

R: 0 G: 0 B: 0

R: 77 G: 116 B: 127

R: 114 G: 11 B: 20

R: 25 G: 79 B: 101

R: 240 G: 240 B: 240

R: 0 G: 0 B: 0

R: 39 G: 110 B: 140

68

69

FULL ASSETS LIST Mock-Ups http://thislooksgreat.net/ Code Pro Font https://www.behance.net/gallery/code-free-font/530336 Sverige Script Font http://www.dafont.com/sverige-script.font Wordpress Theme http://themeforest.net/item/blaszok-multipurpose-responsive-theme/7163563 Music for videos http://freemusicarchive.org/search/?adv=1&mood=all+moods&quicksearch=&search-genre=&duration_ from=&duration_to=&tempo=0&music-filter-CC-attribution-only=on&music-filter-CC-attributionsharealike=1&music-filter-public-domain=1&music-filter-commercial-allowed=1&music-filter-remix-allowed=1

70

71

TECHNICAL SPECIFICATION

72

73

INTRODUCTION

This chapter relates to the technical aspects involved in the development of the Multimedia Lab project Downtown80. This project consists on an Android application which invited users to roam downtown Porto to uncover clues to solve a mystery crime story. In this report, the different platforms and their respective interactions and functional aspects will be presented along with the issues and difficulties the team had to overcome.

74

75

SYSTEM ARCHITECTURE

As ilustrated on the figure below the android app will run mainly offline needing an internet connection only if the user needs to get its location on google maps or if he wants to share his results of the game on facebook. In those situations we have a client server model. Besides the android app,we develop a promotional website that contains informations about the story .The website is a client server model where the client is the browser and server is the website host.

Picture 47 - System Architecture

76

77

WALKTHROUGH PLATFORMS

Video of the First Part of the Story

Website

The first platform of the experience is a short video that can be found on the projects website or on its YouTube channel depicting a dramatization of the opening scenes of the story. This provides the users with the context of the intractable second platform (the application) and also with some background information regarding the characters they will be portraying during the game. This video was shot with a Canon 500D and later edited with Adobe Premiere CS5.

The projects website contains all the information regarding the story, characters and the other aspects of the experience. Its goal is to provide information and help spread the project to a larger audience.

Fictional Websites The third platform of the Downtown80 experience is a set of three fictional police station websites created on Wix where the user is sent after completing all the challenges in the application. These websites look identical safe for the information they hold. While two of their three pages are the same (the main page and the error page), they differ on the third page, which contains information regarding the following place to go.

the profiles. These tools facilitate promotion of the project as people who are already interested can share the page with their friends. Videos of only a few seconds long were made to promote the project. These videos don’t give away any of what the project is really about but show just enough the startled people’s curiosity. They were published in Instagram and YouTube, and then shared in Facebook.

It was developed using wordpress that is an open source software for creation and management of websites and blogs. It is written in PHP and uses MySQL as database. We chose this tool because it is one of the easiest to use and most powerful free software available. It has a step by step installation guide and there are plenty tutorials available online. Wordpress is very flexible and can be extended by using plugins and has a vast number of free themes.To run wordpress all you need is a domain and web hosting. We used one.com that has both hosting and domain services and a one click wordpress installation.

Social Networks (Facebook, Twitter, Instagram) The Downtown80 profiles on these different social networks will serve promotional purposes of a wider range than the website, which will be advertised on

78

79

APP

provided by Downtown 80 whenever they find an internet connection.

The main platform of this project is an Android application where users are driven by a race around Porto on 80 minutes and provide the paths for each user.

The Android application, was developed using Android Studio, Android’s official open-source application creation software. The language used is Java as it is standardized and thus easier to implement and incorporate API’s from different sources, such as Google or Facebook.

The device will interact with the users by providing them challenges that, once solved, will trigger the next location they have to go to and some activities they have to do there. This “game” can be played by groups of 3 people which is the number of the main characters of this project: João Passepartout, Pedro Fogg and Detective Fix. Also, the game was designed to be able to support different groups playing at the same time. One of the goals when developing this project was to make it as accessible as possible, therefore we decided to create an Android application. This will allow a large number of people to take part in this experience since all it is needed is an Android device (smartphone or tablet) with API 16 or higher (that corresponds to 94,1% of the today Android devices) with the application installed. Most part of the tools in the application can be used offline, since our target audience are young adults and tourists, who usually don’t have a mobile data internet on a different country. The only tools that cannot be used offline are the “facebook login” and the “share” option, although the users will be encourage to share content like photos taken during the application, images and short messages 80

81

The Story_Intr_Play Activity is the application’s main menu where the user can choose to view the story by pressing the “Story” button read the game’s instructions by pressing the “Instr” button or start a new game by pressing the “Play” button.

The Prototype The technical part of this project where was invested the majority part of the time and effort was on the prototype of the Android application. Here is where all the functionalities that the project needs are already implemented. An Android application consists on a set of connected activities. An activity contains a graphic interface with the user and can extends a fragment and include different classes. Next we will present the main activities of the prototype on the order that they appear on the application main workflow.

By clicking the “Play” button, the users can select if they would like to choose their own characters of the story or answer a short quiz and let the system determine their characters for them

The application starts with the Start_App activity in which the user can choose whether to log in through Facebook or to continue to the application without logging in. In case the user Log in with Facebook he will be able to share on facebook stuff like photos during Downtown 80’ journey, the story of the project and some images and texts provided by Downtown 80 during his journey.

Picture 48 - UI of the Start App Activity

82

Picture 49 - UI of the Story_Instr_Play Activity

83

If they select the quizz option, the application orders them to choose one player’s phone to answer the quizz. All the players must answer on the same phone, one by one.

After the characters are chosen, the game begins and the main activity where it happens it’s called: the Stage Activity. Here are presented all the different challenges that are given to the user throughout the experience.

Each user will choose the best suited answer according to their own opinion. After the three players answer all the questions, a popup window will appear, showing the result: “ Player Y – Character Y”.

Every stage starts with a popup that simulates an SMS (it includes the vibration function to turn the simulation even more realistic) to contextualize the user and involve him on each stage.

Picture 50 - UI of the Start App Activity

The quizz happens on the Quizz_Activity where all the questions are loaded, the answers are verified and the algorithm to assign the different characters to the players occurs.

The sender depends on each character: detective Fix receives SMS from police, Fogg from John Doe and Passepartout from an anonymous number that later reveals to be Detective Fix.

The Pick_Character activity is also available, in case of the users don’t want to take the quizz and they can choose the characters by themselves. They can also choose these option in the end of the quizz. In this second case all the players already know the characters assigned by the system but they may want to change for mutiple reasons. Besides, since the application is offline and the quizz is answered at one player’s phone, the other players need to let the app know which character they are.

Picture 51 - UI of the Pick_Character activity

84

Picture 52 - UI of the Stage Activity when a “SMS” is received

85

After the user’s receives the “SMS” he can see this layout. On the center is the action/question that he has to solve that is related to the “SMS” that he received, on the bottom is the textbox where he enter the answer to a question. In case of right answer, he passes to the next stage, in case of wrong answer, a popup with a tip appears. On the top of the layout there are three buttons. The first is the Map button that redirects the user to the MAPS Activity. It displays a Google Maps map in which the user can check where to go next and, if the GPS function of the device is activated, it also updates the current location every ten seconds. Besides, the user can change the map type between graphical and satellite and search for other random locations. The second button is the Message button which shows the user the last “SMS” received. Lastly the Help button displays a pop-up message with a hint which the player can use (but is not required) to find an answer.

Picture 54 - Layout of one stage of the “Stage Activity”

86

Picture 56 - Layout of one stage of the “Hint Activity”

Picture 55 - Layout of one stage of the “Map Activity”

87

Between the top buttons and the “action/question” text there are two timers. The one on the left is the timer of the global project and it starts in 1h and 20 min ( 80 minutes) and the one on the right corresponds the time that the user has to complete that stage. If the 1st timer (global timer) ends its time, the race ends for that user. If the 2nd timer (stage timer) ends, a pop-up appears saying that the global time will decrease 1.5*stage time, that global time is decreased and the user skip that stage automatically. On the other hand, if the user finish the stage at time, the global time is increased with the time left of the stage time. This stage timer was implemented because the players will meet along the experience and this way we can make sure they will not wait too long for each other. Furthermore, this way users don’t stop the whole experience because of don’t knowing how to solve the challenge of one stage.

88

The Facebook API

The Google Maps API

To allow the users log in the application using their Facebook account, the Facebook API had to be incorporated into the application. In order to do so, several steps have to be taken, of which only the most important ones will be discussed. First the application Downtown80 was created in the Facebook Developers website and it was attributed an ID number. With that number, a set of permissions added to the Android Manifest of the application and an additional block of code, the hash key necessary to make the Facebook API run on the application was generated. This API includes classes, methods and objects that were then used to add the Log in with Facebook button and the option to share content on one’s Facebook wall. Users can do this to allow themselves extra time to finish the challenges, for instance if there are only five minutes left for end of the timer, the system will suggest the user to post selected content on Facebook to receive extra time.

The Google Maps API provides facilities to use that graphical maps and tools to interact with them. We used it to display a map and access the host device’s GPS in order to show the user their current location. To have access to this API, similar but simpler steps to the Facebook API are required. In this case the application must also be registered online however, unlike the Facebook API, the key is provided by Google after all the settings are decided. The importance of this functionality on the Downtown80 application is for people who are unfamiliar with the city of Porto to be able to know where to go next and complete the challenges. Besides the main functions of access the user’s location and the different locations of the different stages of the user’s journey, we added the option of change between graphical map and satellite images and the option of search for other random locations.

89

A use case diagram describes the relationships between the actors and case of use of a given system. The figure below shows the use case diagram. The user can start using the app in two ways: without a login or with a facebook login that allows him to share his game results. After starting the app he can get instrutions on how to play , check the story synopse or start playing. To play, the user will need a character. He can choose one or answer a quizz and the system will attribute one. Once in the game, the user will receive messages with pieces of the story and questions that he will have to answer. He can get help for those questions and get directions for the locations where he has to go so he can get the answers.

Picture 57 - Use Case Diagram

90

91

CONCLUSION

This report has given insight on the technical aspects of the system without going into unnecessary detail and instead focused on delivering information that was specific of this project in a simple and direct way.

With all the characters’ paths, and all the custom design done, the new version of the app done in 30 minutes since it’s only necessary to put the paths on a specific format and give specific names to the files that contain the design images.

Moreover, it shows the development stages the team went through when creating and implementing the project as well as the difficulties that were overcome. The main focus of the technical part was the Android application. We developed a very complete prototype that was 100% functional and had all the tools needed to complete the Downtown 80 experience. The member that developed the prototype didn’t have any priori experience with this platform so the main difficulties was to deal with all Android develop workflow and special characteristics of it for the first time. All the others platforms were way easier to implement and everything worked perfect so the only technical aspect that we would change in the future (with more time) would be implementing a better design to the Android prototype. Since the project pretends to be scalable to other cities besides of Porto, the Android App was implemented in a such a way that is really easy to build a new one for a new city. Picture 58 - Concept design

92

93

CODING AND BUILDS

The source code of this is really huge since it involves a lot of activities, classes, xml files, layout elements, etc. that result on thousands of lines. Because of that we will not include this code on this document but it can be found on the following link: https://feupload.fe.up.pt/get/Ea9ef35DuVcda1i

94

95

BUSINESS AND MARKETING

96

97

GOALS

Before laying out what Downtown 80 (DT80) business plan looks like, it is important to explain its goals. With this experience we want users to embrace an immersive experience and remain curious and interested in the story, regardless of the changing platforms. In addition, users will be challenged to follow the story outdoors, in the streets of Oporto, as well as invited to share their experience using social media, in order to build a community of users. As creative team, our goals are to design an experience that lasts or can be upgraded for some years (adding more episodes), to create a brand and implement the project in other destinations and finally, to communicate with the community of DT80 users and receive feedback on their experience and how to improve it. Some of the indicators to monitor if those goals were being met could be number of app downloads and completed games, number of website views, feedback received through social media and from partners, users’ opinions and analyse the degree of community interactions in social media.

98

99

TARGET AUDIENCE

PERSONAS The target audience for this project includes mainly young adults and possibly other adults who like traveling and research what to do in destinations prior to the trip. In this chapter, there are two persona profiles that fit in the description above.

Website

The strategies take into account the different outcomes of this project, while partners will be looking at if their revenues improved after joining this project, the team who design it will be assessing how users engaged in the experience (Buysch and Kaa, 2014). For this reason, the marketing strategy for Downtown 80 will be a mix of traditional and digital solutions, as outlined in the following table:

traditional channels

Objectives

promote partners who sponsor this service, download the app

attract more potential users

first contact/ awareness

daily posts

Actions

promote website with posters, leaflets, on social media, frequent updates

posters and leaflets at partners’ locations, outdoors, video teasers

Where

locations used in each episode, tourist information points, internet

internet, facebook, twitter, youtube

ocations used in episode 1, across the city

number of: page views, app downloads, contacts through online form

people sharing/likes/talking about it on instagram, facebook, twitter; tripadvisor and foursquare rating

change in website access and social media engagement, after putting up posters outdoor banners, pins, leaflets and after users share their experience

Measuring engagement

100

Social media and other platforms

Sophie Phillips, 28, from Cambridge, UK.

Bernardo Martins, 22, from Porto.

Sophie is educated, holds an MSc in Environmental Sciences and works as a Climate Change Officer at a local Friends of the Earth office. Her friends say she is determined, optimistic, loyal and adventurous. One of her main hobbies is traveling and she likes to spend many extended weekends in European cities. For those weekend getaways, she usually picks low budget destinations, where both accommodation and food are affordable and where there may be several free cultural and outdoor activities. She does not buy travel guides for small trips but downloads free travel apps instead, like Tripadvisor. What she looks for in a travel app are free walking tours she can do along with her travel buddies or local friends, for free and start whenever they decide, without any set schedules. In terms of technology, she is very competent with most devices and platforms, but uses mainly Windows and Android.

He is an engineering graduate student. He is friendly, outgoing and impulsive and enjoys spending time with his mates. He always comes up with a last minute plan for a night out in town. He keeps informed about new events in the city and challenges his friends to try and discover different activities. He is very comfortable with computers and can not live without his smartphone.

101

BUSINESS MODELS

Downtown 80 budget could be generated from establishing partnerships with local businesses in exchange of being featured as one of the game’s stops. This would possibly bring more visitors to those restaurants/shops while provide some of the funds needed to develop and maintain the project.

102

103

CALLS TO ACTION

To promote this project there are several social networks we took in consideration. Facebook is used for promotion and interactivity with the players and Twitter for client support. Both of them were released a couple of months before the game was revealed. Although there is not an account in Instagram, the #downtown80 was used several times to promote the project in this platform. In this case, small videos of running feet were uploaded, also before the release of the game.

Picture 61 - Slideshow Picture, Facebook and Twitter banner Picture 59 - Instagram feed print

There was also a compilation of the videos uploaded to Instagram. This one is available on the YouTube Channel of Downtown80. All of these social networks were used as calls to action. The main website, the facebook and twitter page, display a catch phrase that is also a call to action. “Who will you be?” is the question that sums up most of the experience. Users will have to take sides or be assigned one in a quest to find out if one of the characters is innocent or guilty.

Picture 60 - PrintScreen from YouTube

104

105

REFERENCES

106

107

HIMPE, Tom. Advertising Next. Chronicle Books, 2008 TASGAL, Anthony. The Storytelling Book. London: LID Publishing, 2015 VERNE, Jules. Around the World in Eighty Days. London: Harper Press, 2010 PRATTEN, Robert. Getting started with transmedia storytelling. United States: Createspace, 2011 UNGER, Russ and CHANDLER, Carolyn. A project guide to UX design. Berkeley, Ca.: New Riders. 112- 125, 2012

4 Examples of Excellent Twitter Customer Service. Consulted in 2 of November of 2015. Available at: https:// www.google.pt/search?q=twitter+as+client+support&ie=utf-8&oe=utf-8&gws_rd=cr&ei=dUSZVpPDL4PWas_atqAF 5 Examples of Transmedia Storytelling and Activism. Consulted in 27 of October of 2015. Available at: http:// www.thewritingplatform.com/2014/04/5-examples-of-transmedia-storytelling-and-activism/ A Volta ao Mundo em Oitenta Dias. Consulted in 5 of October of 2015. Available at: http://www.imdb.com/title/ tt0048960/ Android Developers. Consulted in 16 of October of 2015. Available at: http://developer.android.com/index.html Blaszok - Multi-Purpose Responsive Theme... . Consulted in 17 of October of 2015. Available at: http://themeforest.net/item/blaszok-multipurpose-responsive-theme/7163563 Blue. Consulted in 11 of November of 2015. Available at: http://www.colormatters.com/the-meanings-of-colors/ blue CODE free font on Behance… . Consulted in 11 of October of 2015. Available at: https://www.behance.net/gallery/code-free-font/530336 CODE Pro - Fontfabric . Consulted in 11 of October of 2015. Available at: http://www.fontfabric.com/code-pro/ Facebook Developers . Consulted in 8 of December of 2015. Available at: https://developers.facebook. com/?attachment_canonical_url=https%3A%2F%2Fdevelopers.facebook.com%2F Free Font IM FELL English PRO. Consulted in 10 of October of 2015. Available at: http://www.fontsquirrel.com/ fonts/im-fell-english-pro

108

109

Free Music Archive. Consulted in 25 of November of 2015. Available at: http://freemusicarchive.org/search/?adv =1&mood=all+moods&quicksearch=&search-genre=&duration_from=&duration_to=&tempo=0&music-filter-CCattribution-only=on&music-filter-CC-attribution-sharealike=1&music-filter-public-domain=1&music-filter-commercial-allowed=1&music-filter-remix-allowed=1videos/

ThisLooksGreat.net - PSD… . Consulted in 11 of October of 2015. Available at: http://thislooksgreat.net/

Futura (tipografia) - Wikipedia. Consulted in 11 of October of 2015. Available at: https://pt.wikipedia.org/wiki/ Futura_%28tipografia%29

Wix. Consulted in 30 of October of 2015. Available at: http://pt.wix.com/

Transmedia Metrics Model. Consulted in 14 of January of 2016. Available at: http://pt.slideshare.net/eefjeopdenbuysch/transmedia-metrics-model

Wordpress. Consulted in 23 of October of 2015. Available at: https://wordpress.com/

Google Maps Android API. Consulted in 6 of December of 2015. Available at: https://developers.google.com/ maps/documentation/android-api/ GTE Agency | Experiential Staffing… . Consulted in 10 of November of 2015. Available at: http://gteagency.com How To Pick The Right Font For Your Design. Consulted in 10 of October of 2015. Available at: http://www. designyourway.net/blog/resources/how-to-pick-the-right-font-for-your-design/ Legal Music for Video... . Consulted in 25 of November of 2015. https://creativecommons.org/legalmusicfor Multimedia, Crossmedia, Transmedia... What’s in a name? . Consulted in 16 of October of 2015. Available at: http://transmediajournalism.org/2014/04/21/multimedia-crossmedia-transmedia-whats-in-a-name/ Police survey ms 07.pdf . Consulted in 22 of December of 2015. Available at: http://web.williams.edu/Psychology/ Faculty/Kassin/files/Police%20survey%20ms%2007.pdf Screen Australia: How to write a Transmedia Production Bible… . Consulted in 21 of December of 2015. Available at: http://www.screenaustralia.gov.au/getmedia/2b6459ab-3d05-4607-8fc6-10e1a8fff13d/transmedia-prodbible-template.pdf stack overflow . Consulted in 10 of November of 2015. Available at: http://stackoverflow.com/

110

111