I chose to prototype the design because this project is a Mobile application, and a big part of this project is the user interface. This is because if the user is dissatisfied with the visual look and feel of the application it may reduce their interest. A great quote from Eric Ries is “Design is the new basis of competition”. Furthermore, I intend to ensure that the aesthetics/visuals accurately represent the tone of the project. Having a comprehensive user interface will also give an insight into how the application works and as famously quoted by Steve jobs “The design is not just what it looks like and feels like. The design is how it works”.
The first thing I did was do some research on user interfaces with mobile applications. While researching I learned about some of the UI design principles. The first one was the Structure principle “putting related things together and separating unrelated things”. The structure principle was useful because it gave me a basic understanding of User interface architecture. The simplicity principle was about making the design simple and easy to interface with. One of my concerns about the design was making the user interface feel visually crowded. I didn’t want to overload the user’s perception, overcomplicating the User's interaction. Other principles were tolerance, Reuse, feedback, and the visibility principle.
To learn more about User Interface Principles check out >>>https://careerfoundry.com/en/blog/ui-design/how-to-design-a-mobile-app-using-user-interface-design-principles/#ui-design-principles
After researching the User interface principles, I started looking at multiple examples of already existing AR mobile Game User interfaces. The First Game I analyzed was Pokemon Go this is because I have already used this Game and thoroughly enjoyed my experience. Pokemon Go's User interface is easy to navigate with and has a great beginner tutorial for when you first Launch. The in-Game Map in Pokemon Go isn't visually overwhelming and is quite simple. There are minimal navigational buttons and icons on the screen putting the emphasis on the exploration of the Map. The overall design is simple but hi-def with 3D assets on the map such as the avatar and the various pokemon placed all over the map. I definitely see how the simplicity and high quality of the designs in Pokemon Go are useful. I think these components can be incorporated into the Tourist champion app, Especially the straightforward navigation. I have previously used "Zombies, Run" which Is similar to Pokemon Go but prompts users to Run in intervals, to escape zombies that are chasing them. The obvious benefit to this is that it promotes exercise with the incentive of player progression, in the form of collecting supplies for the survival base. It makes the user feel that they need to collect supplies by venturing out in order to fortify the Base. This Concept is brilliant because it takes something like exercising/walking and makes it fun. I hope to achieve a similar outcome with the Tourist champion app. I would like to infuse exploration and competition with the incentive of world progression (e.g. locations visited and Ar objects collected). The assassins creed Valhalla Map design is highly esteemed for the overall quality and Scale of the Map. The core feature that grabbed my attention is mistifying undiscovered areas in the map to encourage the user to uncover what be found in that location. It shows the user their current progress and that there is still more to be discovered. I would definitely try to incorporate this feature in the tourist championship Map but on a worldwide scale. For the first iteration of the app, it will be a small scale for example Coventry city and expand over time. Another great feature that's in AC Valhalla is the relationship between sound and map design. Different locations have different sounds so for example when you zoom on to the coast you can hear the waves which further immerses the user to the environment.
For this prototype, the feedback I received was very useful. The user interface had a good rating and the responses I received helped me make note of the things I need to change to improve. I was also able to narrow down which design to use, by doing a comparative question where I ask the participant to rate which user interface is more visually appealing. It seems that User interface 2 was significantly immersive and of a higher standard than user interface 1. Therefore, user interface 2 seems to be the design I will work off. Moreover, I found the feedback from my presentation assignment incredibly helpful. There are some great tips I received for example to focus on gamification and onboarding within the design process. The User journey was a great way to demonstrate the onboarding process.
Questionare>>>>>https://forms.office.com/r/Jjnw2Y5wSY
The first prototype is a more arcade-style design, with a carton map and space background. This prototype included a more traditional game style with a menu e.g., Start and how to play. This version is also 2D because the quality of the textures will be easier to develop, and the graphics will demand less from the Hardware. It would be much easier to develop and would most probably run much more efficiently on most android devices.
The Second prototype is more realistic with a 3D street view map and a world map(similar to google earth). This prototype included a more modern style without a menu. The 3D map may be more immersive, but it will demand more from the hardware. this will be something I will have to consider during development, as I may have to lower the resolution and quality. However, I am confident that most android phones will be able to run this version and if not I will consider simplifying the design or merging this design with the user interface 1.
For this prototype, I created it on Adobe XD with a combination of images edited in adobe illustrator and stock images online. I used Adobe XD because I am quite familiar with the user interface and I like using the prototype feature to demo navigation between screens. The prototype feature also gives me an idea of the user journey and how the user will interact with the app. I used photoshop to add textures to the Logo and backgrounds. The Hardware used is MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports),1.4 GHz Intel Core i5,16 GB 2133 MHz LPDDR3, and Intel Iris Plus Graphics 645 1536 MB. I found that the MacBook Pro had sufficient hardware to design the UI and was able to run all the Adobe cloud software. For the Paper sketch just used a pen and paper. The Paper sketch was the first prototype and it was made so that I would have a skeleton or structure for when I make the adobe XD User interface.
my plan for the onboarding with tourist championship is to embed a video that demos what the user must do. This video will play as soon as the user launches the App. I will also put the video in the how to play section. The reason why I have chosen this method for onboarding is so that I can record all the important steps for a new user and the video can be replayed if they forget any of the steps.
This is the official Logo for the Tourist championship. The crown represents Ranking and being number 1#. The red location icon symbolises Gps technology. Finally, the world is the scale of the experience and the Challenge. I am also considering changing the rotation of the planet on the logo during future updates so that all the continents are represented.
The result of this prototype showed me how integral the user interface really is when it comes to developing an app. The User interface feedback really shaped what I must do differently to make the interface more comprehensive. I think next time I will create more Designs in varying styles. With more variations, I can better achieve narrowing down the most suitable user interface.
I chose to prototype the AR object because this project is an AR mobile application, and a big aspect of this project is the AR interaction. The AR object is the incentive for the user to arrive at the various points of interest located on the GPS Map. It blends the digital world with the real world, allowing the user to interface with both at the same time. A great quote from Tim cook “I’m excited about AR because… AR allows individuals to be present in the world but hopefully allows an improvement on what’s happening presently. Most people don’t want to lock themselves out from the world…”. Furthermore, I intend to ensure that the AR Object maintains a consent art style and accurately matches the visual style in the project. In this prototype, I will also experiment with the 3D modelling of the AR objects with Blender. These Blender 3D Models will be imported into unity 3d to demo The AR interaction in unity.
When developing the AR prototype, I had a look at a few tutorials on YouTube. Some tutorials were quite advanced for what I was looking for, so I narrowed it down to 2 tutorials. One of them was a basic tutorial that showed me how to set up AR in unity for mobile phones. The other tutorial showed me how the user can interact with the AR Object and place it on a surface. When I first attempted to set up AR in unity with an android, I had a lot of problems getting the phone to run the project. I also had a bunch of errors That stopped me from progressing in the tutorial. After creating a new project in unity four times, I finally managed to fix the errors and launch the project on the phone successfully. I then uploaded a Blender model into the Unity project as a test to see if it would work and it was also successful. I was excited to see that it worked because I will be using Blender to create the AR Objects in the Game.
In week 5 for the unity workshops in class; we learned how to make an augmented reality object appear on a poster using Vuforia. This was my first-time using AR in unity and I found this workshop very useful because AR technology is a big part of the Tourist champion app. After finishing the workshop, I thought of a possible way of using posters to trigger the AR objects to appear rather than being in the radius of the Point of interest. This method would be easier but would require me physically placing the posters in these locations and getting permission. This would have to be a plan b method If for some reason I am unable to get the AR object to appear within the radius of the point of interest. Even though the Vuforia method isn’t my first option, learning this method has given me more ideas on how the User can interact with AR.
For this prototype, I made a questionnaire so I can improve the AR objects in the app and come up with more ideas for what objects people want to see in the Game. The results were interesting and it reassured me that I am in the right direction for the AR side of this project. One of the questions was a multiple-choice question to see if the participant could identify the point of interest, based on the AR object shown. I was glad to see that the participants identified the point of interest correctly. This directly meets the aim which was to make an AR object that can be identified by the user. I also asked what should be done to make this experience more immersive. A great response was that I should consider animating the AR objects when the user sees them in the game. I thought that this was a great idea but I know that it will take more time and resources. This could be a possible update in the future as the app gets more downloads.
Qestionare>>>>>https://forms.office.com/Pages/ResponsePage.aspx?id=mqsYS2U3vkqsfA4NOYr9T1PqMRsdIpVKvSddUeqvPRlUQlJXNjZHT0dDRFBGUkpLMTdPNE1WUkc5WC4u
For this prototype, I created the 3D model on Blender. I used Blender because it's free software and I have prior experience with sculpting in a blender. there's also plenty of tutorials on youtube for beginners and loads of resources online such as tools and even assets. I also used brackets for coding when I attempt the C# script for the AR interaction tutorial. I could have used visual studio or any other software but brackets were already installed and I was more familiar with it. The Hardware used is MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports),1.4 GHz Intel Core i5,16 GB 2133 MHz LPDDR3, and Intel Iris Plus Graphics 645 1536 MB. I found that the MacBook Pro had sufficient hardware to design the AR object and was able to run all unity fairly well.
By making this prototype I learned how to make a 3D object in Blender and run it in unity to demo AR on a mobile phone. I was very happy about the results and even thought of new ideas while making it. For example, I was thinking of animating the AR object in Blender then importing it. This is so that the experience is more immersive. I also think next time I will try and use more complex 3D models to test the performance on the mobile phone.