The Story + Goal
The idea of Pick’em Blitz Challenge was a project that came to me by a friend of mine. Due to the fact that we both had the same love for football and Fantasy Football, he brought to my attention this idea of ‘building the longest streak’ kind of game for a mobile platform. The object of the game is to score the most points and the person with the most points each week and at the end of the season would win. Having a taste of mobile design in my Front-End Web Development course, I was more than excited to give this a shot.
My Role
My role within the small team of 5 (project manager, graphic designer, Android developer, Apple developer and me) consisted of creating concept designs using low-fidelity wireframes and high-fidelity wireframes using Adobe XD, and ultimately a prototype of the entire application. Throughout the entire process, there was weekly-monthly checkins with the project manager who then worked directly with each of the team members and collected feedback from all parties.
Outlining the details
My first step with this project was to come up with an information architecture, outlining the MVP version for this application. Fast-forward through many phone calls and sketches, my project manager and I came up with this.
Wireframes: Lo-fi + Hi-fi
The next step was collecting all additional information necessary to start a lo-fi wireframe. Below are from the first sketches that were produced to the final sketch after many conversations and feedback from the team.
Finally after all of the concept designs were finalized, I created a hi-fi wireframe and prototype for all of the work. Colors for each team were gathered as well as the main set of colors that was chosen by the graphic designer. The graphic designer also provided the logo as well as the fonts that were to be used in the application. The wireframe and prototype was created all in Adobe XD.
The prototype
Below is a walk through of the application via Adobe XD prototyping record mode. We begin with a splash screen and a quick walkthrough highlighting the larger features of the application including the home screen, invites, groups, rules, and settings.
The Final Product
And that brings us to my final product. The final product includes a visually appealing interface with a clear and understandable user flows for a mobile application.
Final Thoughts
Unfortunately the app never launched in the app store and had to be put on hiatus for now, but overall I had a great time working on this side project within a small team, leading the way with the UX-UI portion of the application. It was great learning experience, starting from just a small idea to evolving to something larger and eventually being designed and developed. Having not been as familiar with different resolutions for small devices, as well as how much space one can really utilize for information was also another piece, I had to adjust to these learning curves (ie. placing the bottom navigation slightly higher than the absolute bottom edge of the phone to provide space for the thumb to interact with). Also upon retrospect, had the project continued, the color choices for accessibility sake would have been revisited and revised so that the color schemes met the accessibility standard. In the end, I throughly enjoyed this entire process and am now hooked on learning more about mobile design.