Welcome to team Lumos!
Mobile Application Design Prototype: https://marvelapp.com/j4jhe1/screen/16215929
- Our MaravelApp design. Shows the expected flow and process of our application
Truck Billboard Webpage: http://54.187.85.6/
- The Webpage is built off AngularJS, and it actively updates the content based on the GET request from the server. Periodically displaying new data (Such as comments and news). At the moment our conceptual implementation shows comments.
Protoype Installation and Running Guide detailed below.
Promotional Video: https://youtu.be/2NF85wgTuYM
React Mobile Application: https://github.com/deco3500/TeamLumos/tree/master/Final%20Prototype/React%20Prototype
- React native is a framework that has been used to implement the application. A URL is provided to the location of the source code. The react native mobile application follows the same design scheme as our design prototype shown in Marvelapp, however is able to communicate to the server to display fresh comments. This is an initial implementation that shows the potential process of implementing the application
- Video of it interacting with our web app: https://github.com/deco3500/TeamLumos/blob/master/Final%20Prototype/Example%20of%20React%20working.mov
Laravel Restful PHP Server: http://54.187.85.6/gitrepodeco3801/public/
- Laravel is a framework that has been used to implement the server. Hosted on Amazon EC2 services, it shows the basic process of uploading a comment and displaying it on our main content. Such endpoint includes the following
- GET: http://54.187.85.6/gitrepodeco3801/public/comments
- POST: http://54.187.85.6/gitrepodeco3801/public/addcomment [Form Data: "comment"]
https://github.com/deco3500/TeamLumos/tree/master/Final%20Prototype/NewTruckServer
Our Project is called News Truck. News truck is born from the problem where we think that the medium or tools used to share local news has been overtaken by more engaging new tools, and no longer meet the needs of the public. People have always had the tools to disconnect themselves from their surroundings (magazines, books, walkmans), but now more than ever, commuters and pedestrians can deafen their senses and become completely unaware of their surroundings. This lacks the solidarity of noticing a stranger is reading the same paper as you, prompting an impromptu discussion. Reading the contents of someone else’s phone is considered extremely intrusive - there are no perceivable common interests between strangers consuming the news, and news no longer needs to be consumed publicly. We would like to bring back this unification by creating a unique and mobile space where people can consume and discuss news publically.
As previously stated, our solution is to create a space where we could easily share, promote and endorse local news in populated local areas. We propose a cost-effective technological solution that presents news in an interesting and engaging way; a digitalized news or discussion board fixed to the side of a large vehicle parked in a public place. Placing the screen on the side of a vehicle would not only allow the space to be set up in any public space with permitted parking, but also allow this space to be mobile, with the vehicle making intermittent stops to set up in numerous high-density areas. When the vehicle stops to set up, it can send out notifications to users either through a dedicated app or another form of mobile-oriented messaging, as well as setup a free public hotspot. The screen on the side of the truck is turned on, accompanying audio plays out of speakers fixed to the vehicle, and an array of different forms of news are displayed on the screen. The content could display anything from trending Twitter and Facebook content, the newest reviews for restaurants and venues, upcoming public events, QR codes for discounts and even public advertisements by nearby venues could display on-screen. Additionally, the truck could provide charging cables plugged into the truck for people looking to charge their mobile devices. Nearby pedestrians are drawn to the truck because of the visual and audio components, and can decide through ratings and polling which content is displayed on-screen, by either deciding what to show or even displaying their own messages.
By making our solution mobile, we aim to make this medium of news conveyance exciting, unpredictable and aim to draw people in through the novelty of the concept. Keeping the venue itinerant allows it to have a wider reach while also continuously attracting new patrons, which helps retain the freshness of the concept. While the truck will be scheduled to stop at different high-density locations, the plan will not be made available to the public, meaning that its appearance will generate pleasant surprise as it provides a temporary service they cannot otherwise seek. In the early stages of release, pedestrians will mostly be unfamiliar with the solution and ideally will want to query equally curious strangers as to the solution’s purpose and be allied through their inquisitive nature Over time, the uniqueness of the idea will diminish as repeat customers familiarize themselves with the solution, meaning that we will need to provide reasons for customers to return. This is what the supply of free Wifi and promotional codes in conjunction with news updates ideally provide. The focus on local news will also increase the chances of people seeing news they would enjoy but do not typically seek. Allowing local venues to place quaint advertisements allows the community to express themselves in an unexpected yet effective and immediate way.
The target audience of our solution is intended to be commuters, pedestrians, shoppers and any other such people who walk around public areas. As it is designed to attract people through sight and sound, it poses the risk of distracting drivers and consequently will always be set up to face away from roads, focusing entirely on pedestrians. The screens themselves should show simple infographics on trending social media topics, Youtube livestreams, live news reports and news recaps, as well as upcoming events in the local area, recent restaurant, venue reviews and favoured messages submitted by locals. Consequently, the target audience is quite wide and although not everyone can afford to have a mobile device, not being able to interact with the content shown is a light barrier. Anyone with sight or sound within the vicinity of the public space could be considered part of the target audience.
- User is an everyday commuter and uses the public busses and trains to travel to and from their full-time job. This morning, the user needs to travel to work. They wake up at 6:00am to leave for their 8am start, leaving at 6:30.
- Intending to catch the 6:50am train from Indooroopilly station into the city, the user walks to the Indooroopilly train station and waits for the intercity train to arrive.
- Once the train arrives, the user gets on the train, hopping off once the train arrives at Roma street station at 7:10am.
- Once off the train, the user departs the station and begins their walk towards the office, with quite a lot of time to spare. They come to a crossing and wait for the pedestrian signal to turn green
- While crossing, the user hears the audio of what sounds like a report, before identifying it as coming from a large truck on the other side of the road, facing away from them, along with a gathering of people standing behind the truck with their mobile phones out, intermittently switching their gazes between their own phone screen and the truck.
- The user turns to look at the truck face, seeing a tall television screen displaying numerous live feeds of social media data, personal messages and live news feeds.
- The user’s confusion is met by an onlooker, and the two exchange quizzical expressions before the user asks “What is this?”
- The onlooker reponds - “I think it’s like a moving news hub - I’ve never seen one before, but they let you post messages that show up on the screen, and you can vote on what you want to see on your phone.”
- The user responds “Huh. Ok, cool.”
- Seeing as the user has 30 minutes until work starts, and is only 10 minutes walk away, they decide to watch the screen for a while, before noticing one of the segments on the TV showing a web link/app promotion.
- As the user is using their mobile data usage plan, they are hesitant to follow this link but check to see if there are any local free Wifi signals, expecting little.
- To their surprise, the news truck seems to be supplying free internet downloads via a hotspot, and connect right away.
- The user then follows the link given and has access to an interface via the app/web address and can see that each segment can be upvoted/downvoted, with suggestions appearing on the side after each segment is selected, with the ability to vote for replacing currently displayed content with a few given suggestions.
- The user sees that there is one panel where they can input their own text message, and attempts to send one saying “Hi.”
- The user’s message is added to a queue for user messages, and sees that another message promotes discounted drinks for users who buy from the coffee shop behind the stand, encouraging the user to seek it out and buy coffee while they still have the chance.
- The user buys the coffee, feeling like they made a worthwhile decision to take advantage of the discount, and heads back towards the news truck to see if their message shows up on the screen.
- Now the user has begun to understand the nature of the news truck, they juggle their attention between the varying segments on the TV, each showing different varieties of local news.
The key difference between our solution and other platforms that deliver news is that other mediums like public news radio or televised displays are that these mediums do not allow the spectators to dictate what they see, and do not allow spectators to post their own content. Additionally, while shopping centre screens may convey events for that centre, they won’t necessarily describe upcoming events in the city that the centre resides in, or show live content. The static nature of public display screens means that while their content is often dynamic, it still requires updates, meaning they will never be completely up to date with world events.
| Name | Roles | Responsibilities |
|---|---|---|
| James Garrett | Team Leader |
|
| Jason Pham | Team Member |
|
| Yen Ting Phang | Team Member |
|
| Yanuar Wicaksana | Team Member |
|
All of the logistic responsibilities will be equally shared to all of the team member. Every person will be responsible for each transport required for transporting them to meeting location. All the equipment needed to develop the product will be the responsibility of each individual while resources needed to conduct experiment and deploying the product will be discussed together along the development cycle.
All of the issues, solution or approach will be talked during the team weekly meeting and any conclusion that were made during these session will be considered as the decision that the team has agreed to. During these decision making process, we have agreed to pick on the easiest and realistic solution to respective issues.
If there some issues or problem that need immediate responses, those issues will be brought into the group social media account so it can be discussed over via other communication tools. Voting mechanism should also considered whenever the team couldn’t reach on one conclusion with the time limit provided. All the decision will be final and it will be the responsibility of every team member for the result of those decision.
Team meeting will be conducted every week in order to discovering issues, brainstorming idea, creating solution and discussing progress regarding News Truck project. Based on agreement and comparison of each team member schedule, we have decided on conduct meeting every Wednesday from 2 - 3 PM. The meeting duration will run for approximately 1 hour, however if it is deemed to be insufficient, time extension will be considered in order to finalise any decision making progress. Additional meeting could also be scheduled via Skype if it was deemed to be necessary.
To create a conducive and efficient environment, there are various meeting standard that we could used as a guidelines. Some of those will include multiple point below:
- Team Leader will create and coordinate meeting agenda before the weekly meeting conducted.
- The location of the meeting will be decided by the team leader and he/she should consider the transportation of each team member used.
- All of the team member have a mandatory of attending the weekly meeting activities
- If by any case any team member could not attend the meeting, they have to give out prior notice to other team member or team leader 24 hours before the meeting conducted.
- If any team member is coming late to the meeting, they also should give a notice to the others following their reason/excuse.
- If by any case weekly meeting cannot be conducted the following week due to valid reason, team leader should announce the cancellation of the team meeting through communication tools or direct communication at least 24 hours beforehand.
- Any decision making process happened through the meeting activities will refer to decision making section in this document and will be recorded for future references.
- If team leader are unable to do his/her obligation to conduct/participating the meeting, another team member will took over for those specific week.
Every team member should respect and listen to other team member opinion or idea that shared during the development process. There will not be any biased perspective towards one of the individual, all of the team member and their idea will be treated equally regardless of their roles to the team. Each of the team member are required to be responsible of their task that they are given to and they have to manage their own schedule in order to fulfill those respective task. In addition, the team leader should check team member condition regularly in order to monitor each member progress through the development process.
If any of the team member fail to fulfill their given task and affecting the team performance in overall, we should consider following points that stated below:
- Approach the following team member to ask about their reason or excuse of their failing performance.
- By the agreement of the respective individual, team leader should bring the issues to others team member in order to search for best solution.
- Based on team discussion, team leader should give out time deadline for the respective team member to finish the task that he/she fail to fulfill.
- If by any chance the respective team member still failed to fulfill the task given, the following task will be given to other team member to finished and he/she will be given another task to work.
Whereas, if any of team member have a conflicts or problem with other team member and affecting the teamwork and team moral, we should:
- Discuss the problem/issues with all other team members, with purposes of finding the best solution together.
- Re-assign works or tasks so they are not intertwined to reduce any issues arise between conflicted team member.
- Re-assess the team situation to determine if the problem still persists or has been remedied
- If the situation does not improve, the issue would be brought to the attention of the teaching staff to ask for advice and solution.
| No. | Tools/Platform | Details |
|---|---|---|
| 1 | Facebook Group | Social Media Communication, The most convenient social media platform that allowed to share announcement, create event reminder, and etc |
| 2 | Messenger/Messages | Direct Chat Communication, Most approachable choices considering all of the team member regularly uses it. |
| 3 | Github | Version Control, Most famous version control and most familiar one with team member. SourceTree tools was used to manage the branch flow. |
| 4 | Google Drive | File Management, Allow powerful features to easily share file with link or email invitation. |
| 5 | Google E-mail | Formal Communication, necessary to communicate with teaching staff or any other parties that need to be involved in this project. |
| 6 | Phone Call | Urgent Communication Tools, To discuss any matters that need immediate response. |
| 7 | Skype | Teleconference Communication Tools, Widely used for teleconference meeting that enhance the meeting environment. |
To create and establish high quality development environment, communication is one of the key factor in order to make this project successful. This can be done by handling weekly meetings regularly so that any discussions can be established. Any communications outside the meetings will be done by the help of communication tools such as Facebook Messenger. Besides texts, most of these applications have file and link sharing features, which will certainly improve team communication.
In order to support the development of this project, our team agreed to store any files regarding to the project inside a git repository provided by the universities, which will be managed by using SourceTree application. For other medias and documents, we will manage it through Google Drive. For the naming conventions of the files, our team agreed that it should be simple and as clear as possible, where there are no numeric iteration when files/systems are improved upon. We decide to use the date,team name, and filename as the naming rules, separated by dash mark(e.g 20160904-TeamLumos-Project_Proposal.docx). As for the base files and programs, these will be updated instead of iterated over without putting any version mark.
Research: There are few aspects need to look in depth in order to facilitate social and promote local news such as:
(i) Interactive Touch Screen Board or Projector
One of the attractiveness of News Truck is presenting local news through a huge screen which allows multiple user to interact with it at once. However, team needs to measure the feasibility and understand user’s preference to maximize the product usage. Survey or questionnaire regarding personal interest, frequent use of technologies and mechanism can be done to receive useful feedbacks from the local residence and retrieve possible insights to improve the overall product.
(ii) Mobile or Web application
News Truck winden and expose local news of a section to another by travelling around. Therefore, a mobile application or web application will be created to assist users to interacts with the product such as leaving a comment for an article, sharing local news or event information and retrieving promotion gifts.
(iii) Incentives
Attractive incentives invite and encourage more participants to interact with the product as News Truck requires users to take initiatives to approach and connect from a limited range. At this stage, team had decided to include and provide local shop coupons and free access of Wi-Fi, more incentives will slowly be added in the future according to users preference.
Requirements:
News Truck requires 2 digital interactive board or screen with size of 55’’ and above, a few screen mount will be needed to support and fix the screen position on the truck and keep it safe in position when travel from one destination to another. Hence, a few audio speakers will be placed around the truck to ensure the audio able to reach the audience from any direction within the range.
Design:
News Truck design will be focus on supporting human-human interaction where users will be familiar with the product interface and able to utilise it with minimal learning curve and technology experience. Team will first determine the functional requirements and proceed to identify the user scenarios and try to understand the expectation of users for each scenarios. Process and information flow of the application will be added before implementing on specific physical platform. The interface of News Truck will mainly consist of a local news feeds board with users comment sections along with upvote and downvote system.
Construction:
Each team members are assigned with different roles and the task will spread accordingly. News Truck will construct after the design is finalised along with the tech decision. However, due to the limited time frame and resources, prototype will be scaled down by replacing truck with RC truck and interactive screen with iPad. Frontend assignee will take care of the user registration on web or mobile application and design of News Truck interface. Meanwhile, backend assignee will handle application database usage and responds to frontend request and visual design assignee will maintain a healthy contrast within the application and provide pleasant aesthetic to the application. Usability testing will be done by testing the application with various of users and scenario while accessibility testing will be done using automated test tools.
For each Interim sprint, we will discuss how the project has progressed and whether we’ve successfully accomplished our goals. In order to convey our progress, a small demonstration of our minimal viable product will be presented. As described by the table below, it details the key deliverables that should be presented at each of the interim sprints.
| Assessment | Due Date | Key Deliverables |
|---|---|---|
| Week 8 Interim Sprint | 16th Sep 2016 |
|
| Week 10 Interim Sprint | 7th Oct 2016 |
|
| Week 12 Interim Sprint | 21st Oct 2016 |
|
| Prototype | 28th Oct 2016 |
|
In order to deploy the prototype there are several components that must be acquired. These items can be broken down into 3 main groups; News truck, mobile development and news acquisition. The required items for each section is detailed below.
News Truck:
- Medium or Light Truck
- Capacitive 55” LCD touch screen or Rear Projection Screen with capacitive surface to allow interactivity.
- Human Driver with truck license
- Cellular data (4G+) with Wi-fi router, enabling free Wifi within a certain range. The connection details are displayed on the truck surface.
- Audio speakers, surround sound 5.1
However, for the prototype we’ll require the following items:
- RC Truck
- iPad
Mobile Development
- Mobile or Web Developers and Designers
- Android Device & iOS to conduct quality assurance
- Development Environment to design and program
- Web services to host Server API & Database to store information
News Acquisition
- News gathering algorithm to obtain articles, either via RSS feeds or directly from sites. Unlikely to be geo specific
- User generated content with GPS location. In addition, as the application is a free platform, locals can freely upload their news with ease. In order to integrate it into their current advertising structure, a guide would be provided.
Social and Mobile: #Conservation, #Coordination, #Collaboration, #Awareness, #COMPUTER SUPPORTED COOPERATIVE WORK (CSCW)
Journalism and News: #LocalNews, #Community
Problem Space: sharing local news, encouraging and expanding local news with interactive way.
Local news has been submerged in the past few years and it has been overtaken by new source of media that offers more interactive way. This way of interaction is also makes people unaware of the local surrounding, environment nor its local community. People seems focused on more personalised device as a medium to consume news, lowering the social value that has been imbued in these activities.
In the end, We would like bring back the idea of consuming news publically and make people discuss with each other to increase the social value in society. However, seeing that technology has already far advanced since decades ago, we would like to offer unique and interactive way to these solution so that it can attract people and society. Our solution is to create new technologies called News Truck where people is offered by source of information interactively, discussing it together and becaming a interest space for people to gather by numerous features/gimmick it provides for them.
- This research can be found here: https://github.com/deco3500/TeamLumos/blob/master/Research.md
- Week 6 Feedback Review can be found here: https://github.com/deco3500/TeamLumos/blob/master/Feedback%20Review.md
- User Stories + Use Cases + Use Case Diagrams can be found here: https://github.com/deco3500/TeamLumos/blob/master/UserStories.md
- A logistics summary of implementing the project, including costs, required power, size, and other info can be found here: https://github.com/deco3500/TeamLumos/blob/master/Documents/Logistics_Summary_Excel.xlsx
- A rough 3D model of the project drawn to a reduced scale: https://github.com/deco3500/TeamLumos/blob/master/3D_Sketch_Designs.md
- Billboard Interface Design: https://github.com/deco3500/TeamLumos/blob/master/BillboardDesign.png
- UX Design of Mobile Application: https://github.com/deco3500/TeamLumos/blob/master/full2.png
- User Testing Research: https://github.com/deco3500/TeamLumos/blob/master/UserTesting.md
- Use Case Document: https://github.com/deco3500/TeamLumos/blob/master/Documents/Use%20Case.docx
- Use Case Diagram [UML], https://github.com/deco3500/TeamLumos/blob/master/Images/UseCaseDiagram.jpg
- Research into Aurasma: In summary we found that this is a paid product. It was determined that for our prototype, we'd use an example and will be shown in video. Provides clear idea of what the product suppose to do
- Prototype of truck:
- https://github.com/deco3500/TeamLumos/blob/master/Images/Basic%20Truck%20Sketch_v1_3.png
- https://github.com/deco3500/TeamLumos/blob/master/Images/Basic_Truck%20Sketch_v1_1.png
- https://github.com/deco3500/TeamLumos/blob/master/Images/Basic_Truck_Sketch_v1_2.png
- https://github.com/deco3500/TeamLumos/blob/master/Images/Basic_Truck_Sketch_v1_4.png
- At this point, we identified that the truck could also cater as a food truck. So at around this point, a small addition was added to the product. Thus, the truck would contain the following features
- Be a food truck, as a secondary source of income. Thus, making it a lot more potentially viable
- Provide free wifi
- Local news, that users can interact with on their mobile
- The noted features above are intended to create a hotspot or community around these trucks
- The product is quite fesiable, as displayed by the prototype below. It provides a general idea of how you'd go around building this product
- Mobile app built on React Native
- Website (Billboard) built from AngularJS
- Server on Laravel framework (PHP)
- Hosted on an Amazon EC2 Server
- Presented Pitch: https://github.com/deco3500/TeamLumos/blob/master/Prototype%20Feedback%20Reflection.md
- Built React Mobile application: https://github.com/deco3500/TeamLumos/tree/master/Final%20Prototype/React%20Prototype
- You will be required to build the application in React Native. Best way is to download DECO, import the source code and build
- Built Backend Laravel Server: https://github.com/deco3500/TeamLumos/tree/master/Final%20Prototype/NewTruckServer
- Hosted on Amazon EC2 Server. Basic service that accept 1 POST/GET request for comment updating
- Built Client Side Web App: Source:
Source: https://github.com/deco3500/TeamLumos/tree/master/Final%20Prototype/Web%20Prototype
Demo: http://54.187.85.6- Built on AngularJS, HTML, CSS
How To Install the prototype:
Mobile Application:
-
Install the required items, such as homebrew and NodeJS. The required items are as followed: http://brew.sh/ https://nodejs.org/en/
-
Once the above is done, on iOS ONLY, run the following commands to setup react native brew install node brew install watchman npm install -g react-native-cli
-
Now install xcode from the apple store
-
Now install DECO IDE to easily run our react project. The installation can be found on the following site: https://www.decosoftware.com/
-
Import our react project. Than Build. Once built run the simulator on selected phone platform.
-
Additionally, to enables the scan features, download Aurasma Application on mobile phone.
Web Application:
- Run on the above demo URL to access them through web browser.
How to Run the prototype:
-
Run the mobile application and open the web application separately.
-
Login through the mobile application to give access to the application.(Dummy Features)
-
On the home page, click on the scan button.
-
Because of technology limitation, integration of Aurasma Application is not available at this moment. Therefore, users should use Aurasma applition separately.
-
User can scan through Aurasma app and scan the the news article to get URL for full articles through their mobile application browser.
-
User then can upvote and downvote the articles.(Unimplemented, in the prototype it showed by the click of the icon and the number of the vote will incremented)
-
User then can comment from the mobile application through provided commnet box. The comment will automatically send to the web application and then will be displayed in respective column.
Prototype Draft:
- This video shows our product in real time
Team Contribution:
| Name | Contribution |
|---|---|
| James Garrett |
|
| Jason Pham |
|
| Yen Ting Phang |
|
| Yanuar Wicaksana |
|
Besides all the work mentioned above, all respective works is divided equally.
Future Development
We received so many feedback and suggestion throughout the project, and there are many great features that we would like to implement for future development. Some of it including:
- Regardless of the context, adding more context outside local news will create more powerful mechanism for people to consume media and news directly
- Using more medium such as video streaming will surely enhance the User Interaction with the tools.
- Creating a mechanism where people can also input content and others stuff will improve the usablitty and functionality.
- Social media Integration will mix people opinion to the existing news/article to create a chance of discussion and interaction.
- Creating more interactive mechanism besides Augmented Reality, such as 3D Hologram.
- Installing more point of interest besides cafe such as real food stall.
All the features and idea above is still unprocessed and further concerns is still needed. Some of these ideas above will surely be a challenge in term of technological application and aspect.
Technological Limitation and Real-World Limitation
During these one semester ideas development and prototype creation, we encountered some drawbacks and limitation if we want to actually build this ideas to life. Some of the limitation are still tangible and can be solved in further development. However, there are still few implication and real life situation that limit the functionality of the News Truck. Some of the limitation that we found in this earlier stages including:
- Aurasma Technologies integration to the native mobile application. To integrate the Aurasma Scanner and mechanism is surely be a challenge since the technologies is owned by someone else.
- Truck Display that can fit properly into the side of a van/truck. The display needs to be durable as well since it will be exposed to the outside environment.
- Automatic news integation. To pull the news from single/different sources in the internet. Does it need to be curated as well?
- Dynamic Upvote/Downvote system where the display changed based on the hot article/news in the top page and downvoted news will dissapear.
There are many more limitation and challenge if we want to build the ideas into reality. However, the prospect of these ideas will surely became one of the reason to overcome the drawbacks.