TTT User Experience

User Experience & Wireframes

This page details some of the work that has gone into developing the user experience when they run through Time Travel Tennis. This was my first mobile app, so I had to ensure that files sizes were low, and the UX was a smooth experience. The games menus focus mainly on swiping to scroll through opponents, and tapping buttons to activate other menus and to apply settings. The games mechanics are based around guitar heros mechanics, making it a reaction game. I had to take this into consideration when designing the in game user interface.
I am responsible for most of the UI assets in the game, and I had a lot to do with the UX in the game. Mapping out the users journey was a vital part in making a mobile app, to ensure that they dont hit any dead ends. It also has to all fit onto a small screen and be responsive to a number of different inputs made by the user. Pinpointing what UI aspects would be reactive to what motion enabled for me to build up a responsive UI for a smooth user experience through the game.
Developing these wireframes for Time Travel Tennis had a huge beneficial impact when it came to building and developing both the UI and the in game assets. It also went through several phases before looking how it does now. There are some old UI elements that we didn't use in the game, as well as some UI responsive features that weren;t used, but still created further down the page.
Being my first mobile app, I have made sure to cover all bases and take into consideration all of the inputs a user can have, and impliment the elements accordingly to reflect these inputs.
Wireframes developed on Photoshop.
Tools Used: Adobe Photoshop & Adobe Illustrator

Time Travel Tennis Splash Screen
Click the image to navigate to a full picture of the wireframe model.

TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image
TTT Wireframe Image

TTT Asset Breakdowns
TTT Asset Breakdowns
TTT Asset Breakdowns

TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps
TTT Asset MockUps