Mobile App Development

I am a avid football fan, and even bigger fantasy football fan…especially when it comes to playing with my friends and coworkers. We all get extremely competitive and the trash-talking (albeit playful) doesn’t stop. Now how do you take that fun to the next level?
Enter FanSnap. The ultimate iOS app for challenging your buddies from anywhere with full player breakdowns at your fingertips. The future of telling your buddy to “Put up…or shut up!”

The Story

Your friends are talking mess about your favorite player or team and you want to shut them up and stop those endless text conversations with your diehard Patriots fan friend of “How terrible Eli Manning has been?” Maybe you are at a bar and decide with some confidence to put your buddy in his place with a simple challenge: “I bet you Eli Manning will have more Touchdowns than Tom brady this Sunday?”…drop the mic. He’s probably short on cash or won’t pay up anyways;
What if you had a way to quickly challenge him in a harmless, petty prop bet and keep record of it for future bragging rights? Or even better, why not put your sports expertise to the test with other friends or challengers around the world all while staying up to date with the latest sports news?

My Role

As a member of the core team, I was responsible for the experience strategy, interaction design of the iOS app. My role consisted of a complete brand development, defining requirements, producing all major deliverables, and finishing a fully working prototype with all user experience solidified that could be passed on to developers.

Branding

Creating a Memorable Identity

We needed a name that caught our users main objectives. The core spirit of the app is taking action with strong insight, on the go, that leads to a big payoff.

After series upon series of wordmapping, one really spoke to us:

After many iterations of the name and logo design, FanSnap was born!
Our color palette correlating with the color psychology of users in mind:

Green – Wealth, Prestige, Freshness, Positive
Orange – Fun, Playful, Call to Action, Optimistic

Research

Who & What Motivates Our User?

Defining our User:

The research phase was an intense effort that allowed me to define our users with accurate personas and the creation of a preliminary journey map.
Our research revealed that user motivations and participation would greatly differ, depending on a multitude of circumstances.

This aspect evolved into becoming an invaluable asset to the project, providing a great guide to design decisions and priorities.

Persona-1
Persona-2

Visualizing the End-to-End

We used a journey map techniques to visualise and communicate the users end‐to‐end experience across various touch‐points with the scheme.
Mapping out the user’s emotions was key to understanding the varying emotional states we were aiming to design for.

Journey-Map

Features

Now I could define requirements and cement our features down for development.

This helped set project milestones to further bring our vision to life.

Design & Development

UX Deliverables/activities done to help solve problem

fansnap-sketches

Sketching

With a solid grasp on our goals, a strong content strategy, and core features down; it was time to use this as an ingredient list to solve our problems visually by putting pen-to-paper: creating top-level UI elements, documenting complex interactions,  and arranging them to best match our user flow

Click Here to View Full-Sized Sketched Wireframes

Hi-Fi Prototyping

SKETCH proved to be the best tool of choice for prototyping and creating our deliverables. It was perfect with its easy-to-use interface and allowed easy exporting of vector UI elements for marketing materials as well as initial prototype animations in After Effects.

Results

Working Prototype

We could then utilize the After Effects animations to de-prioritize (vice-versa) or extinguish any animations that were purely “cosmetic”