Wednesday, September 11, 2013

GRANDSTAND: A Fantasy Football Dashboard

Here's my progress so far on the web version

Starting with moodboards and inspiration:





We mentioned how it should be modern and sleek, not chunky. I think these are some good examples of some really clean design (nice dark backgrounds as well).

--------
SKETCHING: User experience, etc.





The website has four main pieces, broken down into columns in the sketches above:

1) My Fantasy — your fantasy dashboard where you can view and control any of your separate fantasy leagues.

2) Schedule — displays the NFL schedule and rankings throughout the season

3) Insider — all the information you'll need to know about player rumors, analysis, and feature stories

4) Stats — This is where you'll do statistical research on players you might be interested in adding to your team. Depth charts, rankings, the effects certain matchups can have on a fantasy player, and projections. Maybe a record book of some sort.

I'm thinking each section will have 4-5 screens. I know this is a TON of work, but I'm pretty passionate about this stuff and could have some fun really going in depth with this.

----------

Detailed Sketches: "My Fantasy" section 



The league's homepage displaying rankings on the left with stats going in the columns, a scoreboard showing the current matchups and scores, and a discussion panel at the bottom right showing transactions and comments within your league (maybe social can be implemented here... it's basically like a twitter feed anyway)




This sketch has some comments in blue that point out the structure of the website. This screen is for the "Matchups" tab within "My Fantasy"


The "My Team" tab within "My Fantasy", displaying a more visual interface for your team. You can change the team (the My Team tab drops down -- highlighted in blue) to view someone else's team.

This could possibly scroll down and show more infographics related to that team and their results.

It will be laid out similar to this graphic from my old project: The user can set his lineup by dragging players around or by substituting a bench player from the inside of the circle.


DESIGN PROGRESS:

Here's a quick glance at how these could be treated


Grid overlay


My Fantasy > Matchup


Schedule > 2013 > Regular Season




Insider and Stats: nothing on these yet, but this shows the color scheme (the four pieces of the main NAV at the very top are different colors)



1 comment:

  1. Great development Caleb.

    The moodboard shows examples of complexity and simplicity, the balance will be key in your design development and I like where the design is going. Now I want you to dig up amazing sports interface examples that integrate the sport or game into the information. Look at the Topps Baseball app for iPad and these things:

    http://www.nytimes.com/interactive/2012/06/11/sports/basketball/nba-shot-analysis.html

    http://london2012.nytimes.com/ (right sidebard has some good infographic video, like below link)

    http://www.nytimes.com/interactive/2012/08/01/sports/olympics/racing-against-history.html

    Some of your contrast is not strong enough in the screens, you don't have to go black on white, but make sure the values aren't too close or someone will call you out on that. Like I just did. I love the player swap function, it's visual and fun. Look for other opportunities in user experience to bring the interactivity to life for the user.

    ReplyDelete