Star Wars Card Trader
Project Contribution: UI Design | UX Design | Interaction Design | Prototype
This concept started from my belief that mobile apps - when possible - should navigate via gestures instead of relying on taps. Gestures allow a user to navigate with one hand more easily and create a tactile connection to the navigation and interactions.
The home screen needs to strike the right balance between welcoming and fun, but also provide for all the various points of sale necessary for the business needs. In the case of the Topps apps that is primarily through the purchase of digital card packs, so I placed a "Featured Packs" section on the bottom of the screen within easy reachable distance for all users.
Users could travers the various tab menu options be either tapping the button directly, or by swiping left/right on each screen. This allowed me to keep the user profile header atop each screen, which helps provide a grounding element to each screen, as well as continue to provide an access point to purchase currency. Notice also the "Featured Packs" section remains on screen in this view, providing continued access to purchasing options.
When a user begins to scroll through his card list the user profile header will scroll out of view and the tab menu will lock in to place at the top of the screen. At the same time, the "Featured Packs" will scroll down and out of view as well, making room for screen-specific options to come in to view (Search, filter, sort, and view customization options). In the past these options were at the top of the screen, making them difficult to reach.
Interactive prototype created in Flinto to test usability after high-fidelity mocks were created.
Initial wireframe for the screen layout. Ultimately rejected because it felt too much like an e-commerce site and not a game.
Second iteration tried to separate gameplay elements at the bottom of the screen with card and pack options in the center of the screen. Added user's favorite cards to the user module, which ended up just cluttering everything.
Third iteration minimized the user profile section in order to make more space for the gameplay elements. Moved purchase items to the bottom of the screen for easier reachability.
Final iteration was the removal of the tabbed navigation at the bottom of the screen. It was too constricting in options and visually it made the app feel like an "app" and not a "game.