Fanpics

Android, iOS, & Web Application · 2014–2016

Anyone that has ever attended a sporting event knows the rush of adrenaline when their team scores a goal, sinks the winning basket or hits a walk-off homerun. These moments are at the core of sports, and are memories that can last a lifetime. Fanpics captures every fan’s emotional reactions to these priceless moments, leaving them with a richer story to tell the world about their experience.

Learning Android

On of the greatest opportunities I had at Fanpics was learning to design for Android. We originally launched Fanpics as a hybrid app for our prototype season at SDSU, which was great for getting to market so quickly. But as soon as that season wrapped up we knew it was time to take what we’d learned and go native. I’d only ever dabbled in Android design, so it was an exciting and challenging experience.

Luckily the launch of Android coincided with Google’s release of Material Design, so I was able to immerse myself in their extensive docs. Along with learning from our Android Developer’s wealth of knowledge I quickly got up to speed.

The Browse, Your Games, and Signup views.
A badge created for a social contest where fans submitted their favorite Fanpics and other fans voted for the best one.

Prototyping Interactions & Animations

Previously, I had only really played around with prototyping interactions and animations, but finally, I made the time to produce them regularly. And not just produce them, but I was able to collaborate closely with the devs to see them come to life. Fortunately, the client developers at Fanpics all shared my passion for UI polish, so it was an enthusiastic process.

Be the Culture You Want

Company culture is a result of the people who work there. Not just that those people are interesting and genuine, but that they put forth the effort to strengthen the team. To do my part I envisioned and executed many team activities. I taught a Photoshop class to our younger employees. I organized Beer & Brains nights where the team got together and discussed different challenges facing us. I coordinated a friendsgiving potluck and hosted the entire team in my tiny apartment.

Posters I designed to promote the events I organized.

Backend Tooling

The daily operations and manpower required to run each game quickly became overwhelming for our small team. Alongside a lot of optimizations and automations I designed and worked closely with our developers to build a suite of admin tools. These tools ran the gamut from simple CRUD UI to more specialized tools that allowed the team to setup new venues, calibrate cameras, curate unique content, and monitor real-time activity.

The team underwent a lot of trial and error when it came to the best solutions to certain problems. Our indexing tool was a great example. Indexing is the process of ‘dropping a dot’ on every seat in a photo so that we can crop tight and centered on each fan.

Initially, we thought the quickest solve was a section draw tool. The tool would allow a user to draw a quadrilateral around a section and let the app fill in the seats. Unfortunately, it was infuriatingly difficult to get the seat placement just right, after every section we’d go back and manually drag each dot to fine tune.

The better solution: point and click on every seat. We dismissed that originally as too time consuming, but clicks are fast and accurate. 10–20k clicks later and your stadium is ready forever. Still not a final solution, but it cut the time it took in half.

The Indexing tool is used to ‘drop a dot’ on every seat in a photo so we can crop tight and centered on each fan.
Story Builder allowed staff to remotely curate a game’s timeline by placing media from the team and advertisements to give additional context to the Fanpics of the user.