Role: Design Lead
Client: Personal Project
Opportunity
Football season was fast approaching, and my developer buddy Brandon wanted to scale and refine a pick'em web app.
Outcome
A friendly pick’em game that makes football worth watching
Metrics
230+ users, 60+ app store downloads, and over 10,000 picks made each season
Blitz Pickz Teaser
Designing a football app when I don’t like football
I don't watch football. I barely understand the game, but that didn't stop me from getting involved when my buddy, and talented developer, Brandon presented an opportunity to lead the design on his football pick'em app. Brandon had a very basic, lo-fi version of this game as a website that he and a few buddies would use every football season, but he was ready for a development challenge, and it was time to refresh and scale his game.
Understanding the subject through research
The Pick’em concept was super simple, guess who you think will win the game. The simplicity left a lot of room to design creative ways to keep players engaged. I led us through a typical design process starting with researching similar apps and looking for opportunities to innovate and simplify. Looking at the wide spectrum of pick'em-type apps, I realized that they typically ask a lot of the user, making them dig in deep with historical stats, players on the teams, etc. While that information is great for those hard-core sports followers, I wanted our experience to be much simpler and more approachable so someone who’s completely clueless about football could engage and have a bit of fun without investing a lot of time.
Structural research
Visual research
Whiteboarding with a developer to capture every idea
Jumping into white-boarding came next. This involved listing all of the potential features and actions our users could use and take and looking at what existed in the old web version of the game to create a pathway forward for a simple, fun UX flow. Football season was around the corner, so I needed to prioritize what was in scope for the first version before our initial launch.
Leading Brandon (dev) in a white boarding session
Early UX Flow
UX flows showed a clear path forward
Having a clear scope and agreed-upon flow, Brandon and I went heads down designing and coding. Since there were just two of us, we were able to work very efficiently. Brandon was creating all the logic and functionality with basic placeholder UI while I dove into designing lo-fi screens into a prototype. Having the prototype together allowed us to experience the game on an actual device to better understand the interactions and usability.
UX flow
Wireframes
Challenges that bring growth
One constructive challenge in this project was Brandon and I pushing each other to be better in our crafts. I would design and animate things that we weren't sure were technically possible, and we would work together to find production examples to learn from, sometimes making our concept work and other times realizing my design was too far-reaching, causing us to scale back for the sake of getting it done.
Early prototype
Page load animation
Launching it with analytics
We launched Blitz Pickz first as a PWA (web app) and after working out some bugs, we launched it as an iOS and Android app. I built a simple landing page along with the app to explain the value and blasted it to all of our friends and family. I made sure to link analytics tracking to the web app to capture heat maps and user behaviors to gain insights for future versions.
Overall, this was a thrilling project and something that we’re still working on. We plan to create and release a few new features in 2022. Stay tuned.
Hotjar Heatmaps
Blitz Pickz in Production
