Challenge Summary
Welcome to "Virtual Tennis Mobile Game Design Challenge". In this fun challenge we are looking for your concepts on how we can turn your smart phone into a tennis game application. A user will be able to challenge another user and use their phones as virtual raquets to play a game of tennis! At the end of this challenge, we are looking for a clean, fun and interesting UI design that able to represent our goals.
IMPORTANT!! Checkpoint deadline will comes fast, only 39 hours available for 1st Round, so JOIN NOW!!
Round 1
00. Navigation Solution
02. Landing Page Screen
04. Choose Racket Type Screen
05. Player Selection Screen (Server or Receiver)
06. Begin Play Screen
Round 2
00. Navigation Solution
01. Splash Screen
02. Landing Page Screen
03. Brief Tutorial Screen (Serve it Up)
04. Choose Racket Type Screen
05. Player Selection Screen (Server or Receiver)
06. Begin Play Screen
07. Game Play Screen
08. End Game Screen
09. Share Screen
Challenge Goals
Our client is looking to promote and Develop the Growth of Tennis in the US. in this challenge, we want to create a mobile game that introduce Tennis sport to smartphone user via mobile games which will be specifically created for iPhone device. Check our requirements below for more details!
Suggested Screens :
00. Navigation Solution
- Provides us a clear navigation concept for this games app.
- Please design a navigation solution that would be easy/fun/engaging for a the player!
01. Splash Screen
No wireframe references
- Provide us some fun/cool design for the splash screen that able to represent "Tennis" sport.
- Simple logo for this game apps.
- Suggest the appropriate games name for this app. "NuTennis", "101Tennis", "GameOn", etc?
- Loading bar indicates application is launching.
- Explore how this page needs to build/interact.
02. Landing Page Screen
Wireframe reference screen 1 in wireframes.jpg
- This screen will appear after the game apps succesfully launched.
- In this screen, player will be asked to choose to play as "member" or "guest".
- Put the games logo in this screen along with the provided client logo as the game sponsor.
- Put the games name in this screen.
- Explore what kind of UI/UX needs to be presented in this screen.
03. Brief Tutorial Screen (Serve it Up)
Wireframe reference screen 2 in wireframes.jpg
- After player choose to play as member or guest, they will see some tutorials first about how to play the games or information about our client sponsor or any other information in the screen.
- This screen will show up for first time player/user that just installed the game app.
- Provide design elements for player that give them ability to skip this screen.
- Do we need to provide design elements that give player some ability to hide this screen in the next launch/future?
- What is the best way to represent brief tutorial about the games? Video? Infographic? Text? What is your idea?
- Provide "Play" button so player can close this screen and start the games.
- Explore what kind of UI/UX needs to be presented in this screen.
04. Choose Racket Type Screen
Wireframe reference screen 3 in wireframes.jpg
- After seeing the introductions and understanding how to play this game, player will need to choose their Tennis racket first.
- There should be various Racket type that player can choose in this screen, some of them can be selected and the others need to get unlocked first (finish some level first before able to choose the racket).
- Our default ideas for the racket selection was to create it like a carousel like shown in wireframe. However, please feel free to suggest another appropriate interactions to choose the racket.
- Do you have another ideas what should be presented in this screen? Maybe racket characteristic? Power, balance, weight, length, frame stiffness, string pattern of each racket? the characteristic will affect player skills when play the Tennis game.
- Provide a confirmation button or some UX for the player to confirm their racket choices.
- Explore what kind of UI/UX needs to be presented in this screen.
05. Player Selection Screen (Server or Receiver)
Wireframe reference screen 4 and 5 in wireframes.jpg
- After player confirm their racket selection, they will go to this screen.
- Player can choose whether they want to play as Player 1 or Player 2
- Provide some brief information what kind of interactions that player will do if they choose to play as Player 1 or 2. Dummy text information for now is fine.
- Player needs to choose their role, and then choose who is going to play the other player role. Should it be computer? few variation of computer intellegence (easy, normal, hard)? Or support multiplayer and the other roles will be played by other smartphone user via bluetooth? any suggestions?
- They can then invite another player to join the game from their contact list
- Explore what kind of UI/UX needs to be presented in this screen.
06. Begin Play Screen
Wireframe reference screen 6 in wireframes.jpg
- After all player roles has been decided and confirmed, user will go to this screen.
- This screen will be the start screen to play the games
- What kind of information can be presented here? Some information about our client sonsor? or tips and trick about the games? or advertisement?
- Player needs to click/tap the "GO" button before able to play the games.
- Explore what kind of UI/UX needs to be presented in this screen.
07. Game Play Screen
Wireframe reference screen 7 in wireframes.jpg
- This is the most important screen in the application.
- This screen will provides the game play that player will do in the game.
- What kind of games interaction that able to present Tennis simulation? Show us your ideas.
- The game should be a simplified version of a tennis game. Screen one would be "serve". This will initiate a user to use his phone in a "serving" action which will trigger the start of the game. After the serve is completed (w/ sound effect)...Player 2 will swing his phone like a racket (using the accelerometer of his phone) and return the serve. This action can go back and forth with player 1 in a "volley" until a player has won a point. Screen 2 would show the score. (15 - 0, 30 -0, 40 - 0, GAME). After a score is announced....the user would be taken back to the "serve" screen until a game is completed.
- Explore what kind of UI/UX needs to be presented in this screen.
08. End Game Screen
Wireframe reference screen 8 in wireframes.jpg
- This screen will appear once the game is over and one of the Tennis players have won the game.
- Player will be able to see the games detailed information along with their games status (WIN/LOSE). Also they will be able so see their overall record for games played. Think "bragging" rights with other users.
- Also, we need to create some icons that able to presented win/lose condition to the player. maybe a trophy for winning condition and a broken rackets for lose condition? any ideas?
- Explore what kind of UI/UX needs to be presented in this screen.
09. Share Screen
Wireframe reference screen 9 in wireframes.jpg
- Finally, player will be able to do some social sharing interactions with their social media account in the games.
- Sharing their game score or Rank to their social media accounts?
- Needs to add the client sponsor logo in this screen as game sponsor.
- Create a design elements for the player to play the game again.
- Explore what kind of UI/UX needs to be presented in this screen.
IMPORTANT!! Do not follow the wireframes exactly, You need to treat the wireframes as references only. We need your creative ideas about how the UI/UX should be created for this apps! Feel free to suggest any design that you think appropriate for the apps!!
Design Guidelines
- Font and colors : Up to Designer.
- Orientation : Portrait
- Use 640 x 1136 px resolution (iPhone 5)
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
Design Considerations
- The application should be easy, fun and ease to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
Attachment
- wireframes.zip
Target Audience
- Smartphone User (Youth generation)!
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.