Before I dive into the game’s screens and workflow in detail, please
take the time to go over the rules of the game (attached) if you
haven’t already done so.
Detailed screens are on FluidUI as wireframes
I’ve added notes for each wireframed screen on FluidUI (please be
sure to read through them). You can do this by clicking on the
settings icon next to the barcode on the top right. There, you’ll
find the option to show notes, as well as the option to increase the
size of the screen so that all notes are visible. The screen behaviour
is buggy (buttons, etc. won’t seem to work). You’ll have to make
sure your mouse cursor turns blue on a given wireframed UI element
(indicating that the element is clickable) before clicking it.
I've also attached draft versions of wireframes sketched on my
whiteboard (almost redundant to the wireframes on FluidUI, except to
give an idea of what I thought goes on each popup, as well as some
additional information that might not be shown on the wireframes on
FluidUI), as well as as some really cool designs on existing apps on
the app store.
Out of the wireframed screens, only 4 screens need to be designed.
They are summarized below:
The user will see the menu screen after the launch/loading screen,
which will just show the logo while the app loads. The menu is a
summary (in a scrollable table view list form) of all the games
currently in session. It shows new game invites, a button to start a
new game, a list of games divided based on which player’s turn it is
per game, ended games and finally a section showing suggested players
to start a game with.
Guessing the Song:
On this screen, the user guesses the song of the player he or she is
playing with. It shows media player controls to play, pause or rewind
the player’s song, randomly generated letters, an area for blanks
where the letters will be dragged by the user to attempt to guess the
song. The user can drag and drop each letter on to any blank (similar
to Draw Something). If the user guesses the song correctly, he/she
moves on to the next screen ("Score Logic").
Depending on the guess made in the previous round, this screen shows
how many points you won for that round. It animates the points and a
“kudos” phrase with on the top half of the screen (with sound).
The call to action to sing a song for the other player fades in after
the animation. The call to action goes to the “Select Song to Sing"
screen (where the user selects which song to sing).
The user is transitioned to this screen after he/she selects the song
from the “Select Song to Sing" screen. On this screen, the user
presses and holds an attractive call to action record button to record
his/her song. While the recording is in progress, the record button
animates in real time according to the loudness level of the live
recorded voice (for inspiration, see Shazam's “listen” button
animation while it’s searching for a song match. It shouldn’t be
as busy as the animation on Shazam, but should be attractive to the
user recording his/her voice). Once the recording is complete, the
user sees 2 call to actions. The first is a preview of the song just
recorded via media player controls (identical to those on the
“Guessing the Song” page). The second is a “Send" button to send
the song to the other player.