Project Redo : Creative Brief

GRANDSTAND WEB & MOBILE APPLICATION CREATIVE BRIEF

Client: Grandstand LLC, a fantasy football insights and managing website. They differentiate from competitors through a careful and organized approach to design and user interface.

Product/Idea: They're promoting the new Grandstand Website and Mobile application through an animated video of the mocked up website and application. It gives the user a beautiful, visually driven and interactive interface, making the fantasy football experience simpler and more interactive.

Strengths: Simple and intuitive design. Focused on the visual aspect of the user experience.

Weaknesses: Fit more for the advanced, college student aged fantasy football player who's in multiple leagues, checks regularly, enjoys in-depth data and statistics on players.

Opportunities: Fantasy football sites are cluttered with messy, outdated graphics, advertisements, and other information. The design is rectangular and clunky and feels like an excel document. Grandstand is modernized and focused on making the fantasy real.

Threats: Modern, streamline design is catching on, fantasy football is starting to get larger… more attention means this should eventually happen for fantasy football. The clock is ticking.

Purpose: The goal is to produce an animated walkthrough less than 1:30 that showcases the sites capabilities and look and feel. A promo video to quickly convey the idea for potential investors/developers

Competitors: NFL.com Fantasy football, CBS fantasy football, yahoo fantasy football, espn fantasy football, rotoworld.com, rotowire.com

…They're pushing the audience to gamble on daily leagues (set the perfect matchup for the day and win a million dollars),  they're pushing them to play even more fantasy games (weekly pick'em, nfl playoff challenge, thursday night football challenge, predict the pick, nflrush fantasy: FF for kids), they're asking the audience to nominate their favorite players of the week, they're filling them in on expert insights and trends. They are already established and giants in the game.

Audience:

Age: 18-50

Sex: often male, americans

Culture: college educated sports fans playing with close friends, spending a lot of time doing research and keeping updates on their favorite players. They like to interact with the game and customize their team, making transactions and anticipating if their predictions come true or not. It's also a very social activity (everyone wants to tell everyone about their fantasy team) with bragging rights on the line.

Insights:

Quote from article on Ad Age:

"Market research firm Ipsos says 25.8 million people will play fantasy football this year and generate 1.1 billion in revenue...

The typical fantasy player is in a demographic that makes marketers salivate: a college-educated professional, often a male, in his 30s or 40s with an average household income over $90,000, according to the Fantasy Sports Trade Association. He also has disposable income; of the 49% of fantasy users who pay to play, most spend an average of $468 on league fees, subscription advice sites and analytics apps...

25% of fantasy players access the game thru mobile."

Single Most Important Thing: Giving dedicated fantasy football players a deep, visual experience bringing fantasy football to life, while providing a positive user experience to keep them coming back to the site.

Must Haves: 

Mockups of critical screens (both web and mobile)

Beautifully animated walkthrough of these applications

Do's and Don'ts:

Avoid chunky design, think of ways to freshen the data through thoughtful infographics, keep it simple, keep it efficient.

Project Re-Do Ideas

1) Continue working on Grandstand - I want to start working on the mobile version.

I'd like to (by the end of semester) have an after effects edited walkthrough of the Grandstand site and mobile applications, to have a really strong digital project in my portfolio.

What I need to design: 

- About 5 new screens showing great infographics (still haven't really incorporated a lot of infographics)

- Mobile version of main screens (probably 10 screens)

- After effects video

2) Playmaker App - Full redo

I'd really like to change the concept of this from a curated gallery of NBA iPhone wallpapers to just a curated gallery of wallpapers. Something a little more broad and not sports themed.

The gallery could have several different genres:

-Minimal

-Abstract

-Planet Earth

-Architecture

-Generative Art

-Collage

-Typography

-Photography

It could be a really simple app that is still linked to social (sharing, submitting, etc.) but emphasizes negative space, fully bled screens previewing the wallpapers, better scrolling, and just generally more beautiful design.

Things to design: (the whole thing)

-Load screen / Main screen

-Screen with all the genres

-Screen for each genre (need a way to scroll down full sized wallpapers, need a way to browse multiple at once)

-Setting your wallpaper from the app

-Sharing / submitting socially

--------

HOWEVER...

not sure if I need two mobile app designs (I will have Grandstand and the "Playmaker" redo)

4 Firms

1. Outside of the US

LG2 (Montreal & Quebec)

Significant Designers:

Claude Auchu (VP, Creative Director, Design)

Marc Fortin (VP, Creative Director)

Luc Du Sault (VP, Creative Director)

Marilou Aubin (Interactive Creative Director)

Significant Projects & Clients:

Allegra: Wild Posting (3D poster ads depicting a man blowing his nose using a part of the poster)

Paris Grill

L'echaude

Stylistic & Strategic Approach

"Think Like a Brand, Act Like a Retailer" 

Long term client relationships

I've always wanted to visit Canada. What if it's a cool place to work? I bring multidisciplinary talent with experience working in a large ad agency. Might have to learn a bit of french…

---------------

Outside of KC

Chaotic Moon Studios (Austin, TX)

Significant Designers:

Having trouble finding names outside of Executives

Significant Projects & Clients:

Marvel Comics Library App: Users can browse over 10,000 archived comics

Fox

Disney

Pizza Hut App "resurrection"

Stylistic & Strategic Approach

Lots of clients in entertainment business, bold designs. Digital & Interactive. Seems like a great, fun culture… the site is written in a really confident, laid back and funny tone.

Really like the way they present their work and their site, seems like a "hip" place. I would fit in well because I have a similar style in my work and love incorporating humor into my pieces. Once again, I bring a young, bold perspective and some experience working with big clients within a big agency.

---------

In KC

Diamond Merckens Hogan

Significant Designers:

Paul Diamond & Brian Merckens (Founders & CD's)

Plenty of fellow KU grads

Significant Projects & Clients:

Las Vegas Sands Corp, branding and corporate image. Heavy photography.

ZuPreem E-commerce: Freshened brand… has a different character than a lot of e-commerce websites.

Stylistic & Strategic Approach: 

Really interested in PROBLEM SOLVING… not caught up with decoration, trends… ego. Tight knit

I've only heard great things about them and had a meeting with Paul and Brian about a month ago and was blown away with how down to earth they were. I bring a willingness to learn and plenty of versatility (design, illustration, connecting) as well as experience within KC advertising.

-----------

Anywhere

Grain & Mortar (Omaha, NE)

Significant Designers: 

Eric Downs: CD

Mike DeKay: CD

Miranda Bouck: Designer

Jesse Harding: Designer

Thats it. Really small. Awesome website… great attention to detail, great hand-drawn elements with vector. Lots of traditional methods. Grassroots, blue-collar company

Stylistic & Strategic Approach:

They're really about CHARACTER… honesty, hard work and trust. They are really illustration heavy and colorful

Significant Projects & Clients:

Barcamp Omaha 2012 (Apparel, Identity, Motion, Print, Web)

Creighton University College of Business (Brand Book, Identity, Print, Web)

Omaha Bikes (Website… Awesome huge hero illustration on homepage)

Found about this little team in Omaha today and love it. Illustration is in everything they do and I love to incorporate illustration wherever I can. My parents are from Nebraska so I get the whole midwest thing. Really interested in working in a small studio. I would be a great fit because of my keen attention to detail and illustration talents. I like how they're really focused on their philosophy and focused on themselves and embracing their identity.


Anyway, I want to keep researching firms and ESPN The Magazine in particular. I want to find a sports place. Had more fun than I thought I would looking up firms and work.

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)

EXPAND A PROJECT

For our expand a project, I have a few options.

I could expand on my advocacy posters for NAEYC (naeyc.org), where I could include more poster designs, maybe a social campaign or something? Open to ideas.

OR: I could expand on my fantasy basketball / football books;

I'm thinking these could be really useful as interfaces for fantasy websites, where users can submit their team and league ID and the program takes it from there. It makes more sense than if they're just printed books for my own personal use.

I already have these two built for each week of the season (NBA '12 and NFL '12) cause I love fantasy sports.

(304) - ORIENTAL BISTRO PACKAGING

For Jeremy's first project we were told to have a "takeout experience", and to bring in all the packaging we got with our food and to take note of potential problems in the experience.

I chose Oriental Bistro mainly because it's delicious.

Some of the main problems with the takeout experience was that they don't give you any utensils, you need your own plate to eat off of, and there is a lot of plastic.

For the new packaging I wanted to go with a simpler approach that uses no plastic and no adhesives as well as a design that allows you to eat straight from the package.

Here are my mocked up versions of the packaging, from its earliest stages to being almost complete.

^ Original mockups with dividers inside

^ Mockup using tabs and refined stripes, sticker holding sleeve in place.

^Refined mockup with new sleeve, colors.

^No more sticker, tabs holding sleeve together

^More refinements, new tab system, wider sleeve

^New colors, wide tab fits more snug

^No more dividers on inside. Simpler packaging, less materials

(202) - PROJECT 4 READINGS

What are some ways to introduce a new paragraph?
You can introduce a new paragraph in plenty of ways. One can use rules, boxes, different colors, and drop caps to name a few. You can have various sizes of indent, different kerning on different paragraphs, etc.

What are some things to look out for when hyphenating text?
When hyphenating a text legibility is the most important guideline. Line breaks work smoother when there are natural pauses at the end of a line. Avoid widows (one word on the last line of a paragraph), orphans (one word or sentence continuing alone), breaking a line in the middle of a name or proper noun. Avoid beginning consecutive lines with the same word, avoid ending consecutive lines with the same word, and avoid ending lines with the words: the, of, at, a, by, and so forth.

What is font hinting? Why is it necessary?
Font hinting is a technique to avoid rounding errors in low-resolution digital type. It's necessary for digital formats where not every user sees the same thing.

What is letterspacing/tracking? How do you adjust tracking in Illustrator and InDesign?
Letterspacing is the amount of space between characters. You can adjust tracking through the 'character' window in both Illustrator and InDesign.

Define kerning. Name 8 kerning pairs. How do you kern in Illustrator and InDesign?
Text that is kerned is spaced so that the characters appear visually even. Kerning makes it so that gaps do not appear on letters whose forms angle outward or frame an open space. Kerning is controlled by a table of kerning pairs which specify spaces between different letter combinations. Av, Aw, Ay, Ta, Te, To, Tr, Tu, Tw. You can adjust kerning through the 'character' window in both Illustrator and InDesign.

Try the kerning game. How did you do?
I got an 81. I completely messed up on like 2 of em so it brought my score down.

Define wordspacing.
Wordspacing is the space between words instead of space between letters.

Explain DIN.
DIN is a standardized system of paper sizes for printed matter. DIN uses a 1:2 ratio.

What is a baseline grid?
A baseline grid is an imaginary system of rows in which the lines of text rest on to create an evenly spaced system of text-blocks. The amount of leading is a deciding factor in how much space is between rows in the baseline grid.

How many characters per line is optimal? Is there a range?
Depending on the typeface and the size of the typeface, more or less may be optimal. When the paragraph is justified, it helps to have more characters per line to avoid rivers flowing through the text.


Define aesthetic text alignment (optically hanging punctuation).
Aesthetic text alignment allows for punctuation marks such as quotations to hang outside of the margin so as not to disturb the alignment of text inside the margins.


What is a typographic river, a widow, and an orphan?
A typographic river occurs when there are varying amounts of white space between words in a justified paragraph. This happens when there aren't enough characters per line to fit the justification. It can be relieved by reducing the type size, increasing leading, or adjusting the minium, optimal, and maximum word spacing.

A widow is when there is only one word on the last line of a paragraph.

An orphan is when one word or sentence continues alone.