Week 12 | Progress Update
In week 12, we started to develop a high-fidelity version of our digital prototype on our core functionalities such as the dynamic map, chat system and augmented reality option. As we did not set up a local UQ database for our application or website to be uploaded onto, we were advised from our tutors to use Glitch, a website that’d act as an online database that stores our code and presents all the information simultaneously. Glitch allowed us to collaborate very easily as the website and application would be updated instantaneously and also displayed real-time editing of each member’s progress.
Hamish had set up the first project on Glitch (named deco3500-duobud) and started designing and developing a website for our product which would best showcase the application’s capabilities, purpose and design choices. Hamish also had presented ideas and discussed with the group about necessary information and potential designs for the A2 conference poster and soon after, had started designing.
David had set up a separate project on Glitch to start designing the map functionality of the project which involved utilising the Google Maps JavaScript API. The resources presented through the Google Maps Platform demonstrated all the necessary work and information required to complete the map functionality for DuoBud. It was as simple as following the instructions and selecting the necessary features that were to be implemented into the application, in order to effectively showcase the proposed functions from our Concept Proposal. Features that were essential to the map functionality were:
Adding a Map with Multiple Markers: There were many tutorials on how to implement a single marker on a map, but it was important for us to showcase multiple markers to demonstrate the level of interaction between guest and multiple hosts (1:M). This function was important for our demonstration as it shows the user is able to view different markers at different locations around a certain radius to their current location.
Info Windows: Implementing information windows when selecting different markers were important as each marker was inputted as a unique element and showed different hidden tips and details based on their location and the host who inputted it in.
Figure 1: Information Window of Hidden tip with Name of Place, Description, Host Rating and Host Name
Custom Markers: Though this may not have been a core feature required for the map function, our team thought it’d be best to design a map and marker that users are able to uniquely identify with the product/application. From our user tests with our target audience (shown in Appendix), we were able to finalise a colour scheme and design for our overall application and thus implemented the design to our marker and map. David and Hamish collaborated on this part of the map functionality as Hamish utilised his strong graphic design skills and designed a custom marker suitable for our application.
Figure 2: Initial Draft Design of Map Marker by David
Figure 3: Final Design for Map Marker by Hamish
Styling the Map: As previously mentioned, it was discussed that our map was designed to have a unique appeal to our users and not mistake it for any other basic dynamic map from google maps. Therefore, styling the map with a user-selected colour scheme and adjusting the density of particular features to only show information that was necessary for our application.
Figure 4: Styling guide for Google Maps (with re-adjusted density of features)
Figure 5: Styled Map with re-adjusted density of features and added user-selected colour scheme
After the stand up, David was also assigned to work on the Augmented Reality (AR) functionality of the project. There were many complications discussed in the previous week about the compatibilities of IOS and Android devices, but we had finalised on the designing the AR function only on an Android device due to difficulties with cross-platforming and designing on IOS devices (discussed in the practicals from the tutors). The initial stages of developing the AR functionality was difficult since most of the devices David worked with had no webcam or the mobile device wouldn’t simply connect therefore running the Unity projects required building the project and installing the .apk files onto the device for trial tests. To test the functionality of the device with AR compatibilities, we found online resources that would allow us to view augmented reality objects. We found a Low Poly 3D Sonic the Hedgehog object that would be attached to our product logo/target marker set up on Vuphroia’s online database and Unity. Once we knew the AR functionality was working, David and Momoka collaborated to design a 3D marker that would uniquely identify with our application and display a hidden tip on its surface.
Figure 6: Testing the AR capabilities on a Samsung S7 Edge using the Low Poly 3D Sonic the Hedgehog object with a DuoBud Logo as the target marker on a computer monitor screen
Figure 7: Testing the AR capabilities on a Samsung S7 Edge using the Low Poly 3D Sonic the Hedgehog object with a DuoBud Logo as the target marker on paper
Figure 7.1: Target Marker (DuoBud Logo) for AR
On top of Momoka’s efforts and designing of the 3D marker, the MarvelApp pages were being iterated to best represent our application, in terms of design, functionality and navigation. From our updated user test results, our team decided to change the colour palette of our application to cater to the user’s requests and inputs on the application. Momoka then had redesigned and created drafts for team logo and application logo which would also would be printed on promotional materials such as stickers, brochures and conference poster. As previously discussed in Week 11’s progress update and stand up with the tutors, it was mentioned that David was taking on too much of the functionality side of the project, therefore Momoka decided to help and start the chat system functionality of the application.
Figure 8: Updated stickers from user tests for promotional materials during the final showcase
Figure 9: Updated DuoBud application logo with changed color scheme from updated user tests
Figure 10: Designing and creating the final 3D DuoBud Marker on Blender by Momoka
After last week, Rong was assigned to create the kickstarter video to best demonstrate the purpose and functionalities of our application while introducing the team behind the project. Rong and Momoka collaborated to write a script for the video as a voiceover, where a mix of original and online clips were placed in the video to best capture the essence of DuoBud and more importantly the script. The draft video was complete but required a few more shots to film and information to be inputted such as a run through of the digital application and the AR functionalities which required completion by the rest of the team.
Overview | Maps JavaScript API | Google Developers. (2018). Retrieved from https://developers.google.com/maps/documentation/javascript/tutorial
Google Maps with Multiple Markers and Info Windows using JavaScript API V3 - CodexWorld. (2018). Retrieved from https://www.codexworld.com/google-maps-with-multiple-markers-using-javascript-api/
Drink, F., Design, I., Models, F., Models, 3., Models, M., & Models, C. et al. (2018). free sonic 3d model. Retrieved from https://www.turbosquid.com/3d-models/free-sonic-3d-model/767696