Designed the user experience and motion design for a Trojan iOS and Android game. The final game emulates the popular party game Cards Against Humanity. For people who are not familiar with the game, it is essentially Mad-Libs with adult-centric content and a competitive dimension in which three or more people compete to create the funniest answer to a question. The initial business goal for the project was to find a compelling viral way to engage with Millennials, elevate the Trojan brand, and simultaneously educate people on new products.
Initial Sketches - Following the research phase, sketched out ideas on paper and a dry-erase wall and ideated and refined the direction before moving onto the wireframes.
Refined Ideas - Refined the initial sketches to test out different ways of structuring the main gaming interface.
Wireframes - Produced the wireframes and annotations using the software Axure. The wireframes played a crucial role in communicating our ideas to the clients and then helped guide the Ui designer on the next leg of the process. The following wireframes show the main player screen, a dealer screen, a sign-in screen, and a profile screen. The approach to some of these screens changed in later phases of the design process following user-testing results and after client feedback.
Prototype - Produced a fully interactive high-definition prototype using the software Proto.io. I closely collaborated with a Ui designer on the look and feel. He and I went back and forth with the designs, applying our ideas, quickly testing them on users and then iteratively refining our approach. I took extra care in the motion design of the app. The challenge we faced with a multi-player game was to convey to the user, at particular slow phases in the game, that the game was moving along. My concern was that the user would loose interest while waiting for their results and leave the game. The animation below includes video taken from the original prototype. For the sake of providing context, I placed the captured video into a device using the animation software After Effects.
Annotations in Context - Instead of sending wires to the development team to help them build the final product, we changed our usual approach and used some of the built-in functionality with Proto.io. This allowed us to centralize the motion design created using the software for the prototype, keep the tap interactions, and also add additional annotations overtop. This made the development process easier and centralized all of the assets into a single place. It also allowed other people, such as members of the strategy team and the developers, to comment and add additional annotations.