Theme Design
Despite going into a lot of detail in my proposal, I did not establish a solid theme that I would use throughout my prototype. Before moving forward with the creation of the prototype I decided that deciding on a set theme to stick to was crucial. This is why this week, I started by sketching a few ideas of potential start screens each with different themes. Also alongside these sketches, I have started to choose my colour scheme as this is another very important aspect of my design that should be chosen before creation begins. Although it may be hard to tell from my sketches, my initial thoughts for the start screen of my application was to gather inspiration from a real life pool table and use actual images of pool balls and cues. However after taking pictures of my own pool balls and inspecting them I realised in order to achieve the professional standard that I was aiming for I would have to try a different approach. I still like the idea of using aspects from a real pool table as part of the theme. So I have decided to create my own cartoon style pool assets to use.
The next thing that I had to choose in this early stage of development was the colour scheme. It is important in order to create an app of significant professional standard that the colour theme matches the cartoon pool table style I have already chosen to proceed with. This is why I chose the following colour scheme. Each colour represents a different aspect of a pool table which I wish to incorporate in my design. The brown represents a standard cue and also the border of a pool table. The green represents the felt that is commonly referred to as the standard colour for playing cloth. The white represents the cue ball, this will heavily feature on important features of my design as it is a crucial part of the real life game therefore I want it to play a large role in my application. The purple, blue and black have all been included for the same reason. The fact that they are all common pool ball colours and they will provide contrast to each other allowing certain parts of the application to take a back seat and more important visuals to stand out.
Creation of Assets
After creating a theme, colour scheme and potential asset designs. I have now created the first assets to be included in my application. Some of which will be used for functionality and navigation whereas some are purely for visual design and quality.
The first asset I created was a simple cue ball. This was because I knew that this could act as the base for other pool balls I intended to create. I intended to create a ball to represent every ball on a standard pool table. This included a cue ball, a striped ball, a spotted ball and the black ball. This is to ensure that although I am using the same type of asset throughout the application it does not become too repetitive, causing the app to look boring and unprofessional. From this basic cue ball I was able to create the rest. Although I originally planned a very basic 2D cartoon style, I decided to add shadows and glare spots on the ball in order to ensure the ball does in fact look like a sphere and not a flat pool ball themed plate.
I then created my cartoon cue. Although at the time of creating it, I was not sure what I would be using it for. I wanted to apply it somehow to my pool table theme and make it a functional part of the design, not just something in the background. This is because a pool cue is a tool in the game of pool, not just something for decoration therefore I wanted to use it as a button of some sort so that it had a purpose. This is why I turned it into this arrow. Combining a triangle, used to rack up the balls at the start of the game and the cue. In the coming weeks I will be using these early stage assets to create my first working start screen and testing the realistic chances of these being used easily to navigate through my prototype.
UI/UX Design
These are the first prototypes of my first pages of the application. I have created them using the previous assets designed based on my theme and colour scheme.
I created this start page with speed and functionality in mind. The purpose of the application is for the user to be able to pull their phone out of their pocket and get from the homescreen to the AR guidelines screen as quickly as possible. The app should be quicker than searching the internet for the best way to take a certain shot or asking a friend for advice or the purpose of the application becomes obsolete. This is why the main focal point of this screen is the large Go button in the shape of a ball. This allows the users that are already used to the app to be able to quickly and efficiently get the help they want quickly. However for user’s that have never used the app before or an application like it, there is a learning curve. This is why I have included two other buttons that will lead to other pages. A settings page and a help page. Another reason I have created the buttons and the text so large is because I want this application to be easy to use for all players. Pool is a sport that interests young people like myself but also a large quantity of fans are older and may not be familiar with how to navigate a typical application. The older generation may find it easier to navigate the app with large bright icons and large text that is easy to read.
This video created during my proposal stage shows the speed I expect from the home screen to the app scanning screen. This is why the UI is so important, to ensure speed and easy use in a real world situation this app will be intended for. However User experience is also very important. In the early stage video of the prototype showing speed. Although the process is quick, it is boring. The difference between this video and the start screen I intend to use is very different in terms of design.
The settings page is also designed in the same manner with UI and UX in mind. It only contains two different settings, camera access and sound on or off. This is because my application relies heavily on what is going on in the real world therefore there is not much to change in terms of settings. If the camera access is turned off the user will be warned that the app will no longer be able to work properly and it will prompt them to turn it back on. This is another example of keeping the user in mind. If they accidentally turn the camera access off they will be notified.
Filming Day
Today was filming day, the day in which I shot all of the videos I will later edit in After Effects in order to give the impression that AR has been integrated into the video. In order for the day to be a success I had to heavily plan each shot I wanted to film and set up a perfect scenario on the pool table to show off all the different features of my design. The picture below shows my planned shot list of the day. I ticked each shot every time I had filmed one successfully. Overall this filming day actually turned into filming days due to problems with the pool table and due to not being able to get the perfect shot that I wanted. I had to ensure that I was not in any of the shots in order to keep the same level of professionalism I had shown so far throughout the design of my application. I needed just my hands to be in shot and no more but when doing this on your own it can become very difficult. This is why on the second filming day I managed to get a friend to help film and the shots ended up exactly how I wanted them. The camera is not perfectly still but this is how I wanted it to give the authentic feel that someone was actually using this to play pool.
Help and Navigation
No matter how good my UI and app navigation is, it is impossible for someone to download my application and use it perfectly the first time without a little bit of help. This is due to the learning curve that comes with all new applications especially one that has never existed before. Although, as I mentioned in my proposal, there are a few similar applications that incorporate AR and pool, there are none that apply AR to a physical pool table.
This is why I decided to create the help page. This page consists of everything a brand new user could possibly need to know about the application. It tells them what the application is, what it is used for and how to set up your device to use it. It does this through the use of labelled images and videos.
I created these pages using the assets I made at the start of this project and also decided to remove certain aspects. I used the pool table I created as a background for the set up videos because it suited well with the theme and colour scheme. However I had to remove the previously created arrow made from the pool cue as although it did match with the colour theme and scheme. I felt the arrow was out of place with the level of authenticity and professionalism I wanted to show within my work which is why I took them out.
Therefore I had to create a different navigation system to ensure users can easily work their way around the pages with no issues. I did this through the use of ball buttons that I had also previously made and simply arrows. The balance of small simple arrows and large pool ball buttons create a system of hierarchy on the page. It does this by hinting at users which aspects of the page are the most important. For example the set up videos are crucial to the use of the app therefore I have placed them in giant pool ball buttons whereas the navigation to make your way back and forth throughout multiple pages are small and simple as they are less important and do not need to draw attention to themselves. This is because if the user wishes to go back or forward they will actively seek out the buttons that allow them to do so. However as may not know they will need the setup videos they are the focus of the screen. I have also placed the majority of the navigation buttons at the bottom of the scream so that users with larger phones will not have to reach across their screen.
Augmented Reality Table Scanner
Today was the first day off adding AR looking effects onto one of my filmed videos. I decided that today I would start with the scanning feature of my application. The idea is that the user holds their phone above a pool table with balls scattered across it and the application finds and picks out each individual ball marking them as a spot or a stripe. After all of the balls have been scanned the application will then show the user which is the best ball to aim for in order to achieve the quickest victory.
I started by first creating the two different rings that would be used to identify the different types of ball, spots and stripes. I did this in photoshop and made a ring for each individual ball depending what type of ball they were and how far back they are on the table.
I then imported these rings into after effects and placed them over each ball. Once each ball was in place I could begin to edit each ring. I created a line inside the circle with the mask tool and then added the effect stroke and selected reveal the original image. I then added a start keyframe for this effect and ended it with an end keyframe around a second later. I ensured the rings would not appear at the same time in order to give the effect that the application is actively scanning the table. To give the effect that the application was hinting towards a certain ball to pot, I added keyframes to the ring of the next ball I wanted the user to pot and made the scale go up and down. This highlighted which ball the user should choose next.
Augmented Reality Shot Scanner
After previously creating the AR scanning videos, I now have to create the shot videos. This was the main part of the project that I had concerns about because I was not sure I would be able to make a convincing guideline for each ball and keep the cue crosshairs in place on the cue ball.
I started by taking a screenshot of the shot setup and inserting it into photoshop. I then added in the crosshairs, ball guidelines and power indicator. This gave me a reference to go from. I now knew where to position these assets in the video and what size they needed to be. I started by adding in the ball guidelines first and positioning them in line with the cue ball and object balls. I wanted them to appear as if they were beaming their way up to the object ball so I used the effect I had previously learnt with the rings and made a mask layer. I then added the stroke effect to the ball trail and added a start and end keyframe so that the ball guideline rolled out from under the cue ball towards the object ball. I then had to add a lot of positional keyframes to keep the guidelines in position with the shaky camera shot.
After I was satisfied with this I added in the cue crosshair. I made this appear by changing the opacity of the object throughout the video. As the cue gets closer to the white ball I changed the opacity to be more opaque so that when the user is taking their shot the crosshair is not in front of their cue. I also did this with the power indicator however this had a fixed position on the screen so there are no positional keyframes on this object.
If the user pots a ball a burst of confetti comes out of the pocket that they potted the ball in. I achieved this effect with the cc particle world on after effects. By changing the particle to small squares and altering the gravity and velocity I was able to make them look like small pieces of gold confetti firing from the pocket. By only having the birth rate of particles set to 0.2 for 2 seconds it created a burst effect instead of the usual downpour that is associated with the particle world.
Merging XD and After Effects
After creating all of my application pages and editing each individual scan and shot video I am ready to put everything in one place. Due to the fact the adobe XD does not support any video format I have to combine my application and edited videos through after effects. I am doing this by first recording my app on adobe XD leaving necessary gaps for videos. I will then add the videos of my pool table shots into this composition.
To be able to do this I first need to render each of my ten pool videos after this I will have 10 mp4 files that I can easily place into my application video. This turned out to be a lengthy process as it took a while for each video to render. After each video was rendered I placed them into the right slots on my application video. Re-scaling and positioning each video to the appropriate screen size. After each video was in place, I then decided to add the same gold confetti from the previous videos onto the last page on which the user is declared the winner of the game.
Once all of my videos had been put into one place I then needed to be able to narrate the video, pausing it at points that I wanted to talk about. In order to do this I had to render the almost seven minute long video full of a total of eleven compositions. I could have just added my own voice over the after effects video but I felt some points were not on screen long enough for me to be able to fully explain what was happening within my application. After the lengthy process of rendering the final video, I then screen recorded the video playthrough as I talked over it being able to freely pause and play the video to talk about specific points.
In conclusion I had a lot of fun creating this application as pool is a big hobby of mine. Whilst also creating an app that I feel could actually be beneficial, especially because it currently does not exist anywhere else, I also learnt a lot of new skills. I can now confidently use after effects even more so than I could before and I am now knowledgeable to using video editing software to combine prototypes from xd and video files that the software does not support. If I could have done one thing different throughout this project it would have been to shoot my videos on a professional table and also get feedback from people at local pool halls about the idea. However due to COVID-19 restrictions I was not able to do so, although this did finally give me a good enough reason to purchase a pool table of my own which is always a positive.
