Important: One thing to keep in mind is that we already have a functional copy of the app. We are providing screenshots and videos of everything in the app just so you know what the content of each screen is. Feel free (and please do) completely change the color palette, font styles, sizes, even layout of the different UI elements on the screen, etc, so that it better aligns with your vision of the app. Please only use the screenshots as a reference as to what content should be on each screen.
Note: I've included an attachment file with screenshots of all of the screens, as well as a video showing the game play and the navigation from one screen to the next.
- Dashboard Screen -
This is the main screen a registered user sees. It’s used to display the status of all of their games. This means showing games where it’s their turn to play, the opponent’s turn, or it’s finished (both have played).
Depending on which type of ‘status’ the game has, it will take the user to another screen:
“My turn” takes the user directly to the “Game Screen”
“Their Turn” takes the user to the “Match Results Screen” where they will see how well they've played, while they wait for the other user to play.
“Finished” takes the user to the same screen as above, but as an semi-transparent overlay, they will see the “Game Over Screen” showing them who was won the game.
From this dashboard, the user will also need to have clear access to the “Settings Screen” as well as the “New Game screen” (more emphasis on this second option since we want the user to play quite often).
Keep in mind that if the user has no active games, this screen will be empty, so this has to be taken into account. For example, an indicator to pursuade the user to click on the “New game” button.
- New Game Screen -
In this screen, the user can select their opponent (random or choose from one of their friends) as well as the category to play in. If they select the option to chose a friend, they’ll be taken to another screen (this other screen doesn't need to be designed).
Once they've selected an opponent, then as soon as they click on a category button, they’ll be taken to the “Game Screen”.
Right now we've used off the shelf icons for the categories (these category icons are also used in other parts of the app). Please either create your own icons for each category or use icons that correctly match those categories.
- Game Screen -
The actual game screen with top bar displaying the profile picture of each user, the score of each one, and a circular timer at the center that counts down from 10 to 0 every time a new questions comes up.
In the center of the screen, we have a card where we display the current question with the 2 answers. The UX is the one described earlier, very similar to the Tinder app. The user swipes left to select the answer on the left and right to select the one on the right. As you will see in the video, we also need designs for the “Correct” and “Incorrect” outcomes.
We also display an icon at the bottom which represents the category of the questions.
- Match Results Screen -
The user is taken to this screen as soon as they finish a game. It shows the profile picture and usernames of both users, a match summary and a questions and answer view.
In the match summary, we display a review of the user’s score and below a graph showing how well they did on each one of the questions (Q1, Q2, Q3, Q4, Q5).
In the questions and answers view, we show a horizontal scroller where the user can flip through each one of the questions, see the correct answer, as well as how much points they scored on it.
Note: this screen should also have a “Share” button somewhere, which is currently missing from the provided screenshots.
- Game Over Screen -
The user arrives at this screen by clicking on a finished game from the Dashboard Screen. As mentioned before, this screen is shown as a semi-transparent screen on top of the ‘Match details’ screen.
Since we allow rematches, this screen also shows an overall score (E.g. 2 vs 0, 2 vs 1, etc) of all of the matches played by these 2 users.
This screen should have a “Share” and a “Rematch” buttons (currently placed at the bottom, but feel free to change it).
- User Profile Screen -
Please refer to the screenshots to see what information needs to be shown on this screen.
The user must also be able to reach the ‘Edit User Account’ Screen from this screen.
- Edit Account Screen / Settings Screen -
These 2 screens actually share the same UI and layout. The basically contain different input fields so that the user can modify each one of the displayed fields (username, email, password, etc).
If they haven’t signed up using their Facebook, they can choose to have an avatar image to represent them. Right now we have 15 different avatar images taken from a free icons website. Please create or select better avatars (doesn't have to be 15, can be 6 or 9) that better match your designs.
- Signup Screens -
Very basic screen with a logo on top and 2 buttons letting the user sign up either with their Facebook account or using their email address.
- Icon and Logo -
Please also design an app icon that matches the design of the app.
Please also design the logo, which is currently only used in the Signup screen, but feel free to place it anywhere else you find necessary (If you come up with a design for the Signup screen that does not require a logo and the screen doesn't look empty, then there's no need to design a logo).
- Sometimes errors popup during the game (“Unable to fetch games”, “Username already registered”, etc). Please also remember to add a design for a generic dialog box with 1 description and 2 buttons below (“Cancel” and “OK”).
- Please include all the designs in either Photoshop (.psd) or Illustrator (.ai) file formats.