Create-A-Player Concept
Project Contribution: Art Direction | UI Design | UX Design | Interaction Design | Motion Design
Existing Madden Create-A-Player screen
Initial user flow and notes for create-a-player concept
Early concept mock of new create-a-player interaction layout
Madden's Create-A-Player system was overdue for a redesign. The old screen, as seen above, is technically functional - all the information you need is there and interactions are easy enough - but it's very boring and list-driven. I thought we could do so much better and so I conceptualized this new create-a-player flow. The player images would ultimately be real-time renderings of player models (images seen below are for conceptual purposes only).
Rather than presenting the user with an endless list of toggles, slides, and input boxes, let's make their choice relatable by connecting each choice to a player they are likely already familiar with. In the mock above left and right select the player position and up/down select a play style. Each play style will load a "play like" image to help the user know what they're getting in to, as well as what it means to play as that player.
Other elements of importance:
- Notice the title section of the screen includes breadcrumbs not just of where you are, but how far you have to go
- Notice the subtle vertical line separating offensive positions from defensive positions. This serves as a visual queue to the user that he is entering a different data set
After making a position and tendency selection, the user can now select a body type for this new player. This allows us to pre-populate player stats and attributes, instead of defaulting all values to 0 and forcing the user to customize all of them one by one. Note: this screen would also require a highlight (red) state, but it's not pictured here.
This screen looks much like the traditional create-a-player module, but with much less data. Key to this design was the idea of leveraging the players Xbox Live or PSNetwork credentials to auto-populate the user's first and last name.
Once the player has finished with initial creation he can now go in and edit all the visual characteristics of his player from this single hub. The following mocks cover the user flow when "Equipment" has been selected.
I believe selection mechanics should be visual and contextual to their functionality wherever possible. In this example, rather than placing button with the word "Left Arm" on it off to the side of the screen, let's instead place the button on top of the player's left arm. This is a much more interesting, intuitive, and visually appealing way to make selections.
Some selections (such as helmet) require further sub-selections to be made. In those instances, we would zoom in to that section of the player model specifically before animating on the new options.
When selecting a specific gear piece to customize we should zoom in on that section of the player model. If the gear has further customization options (such as colors) let's show those here as well, using the same interaction method as was used when selecting a position.
If the equipment selection has no further customization options we needn't show anything in that section.
From this screen the user can change his player name(s), handedness, and other basic information points. Tapping the Back button will automatically save the user's selections. Note: we may want to include a "Reset" button hint that can be tapped to reset any changes made back to their default (not pictured).