Monday, July 14, 2014

Gridiron Solitaire #113: The Evolution of Team History

Let's look at the old Team History Screen:

You can click on the image for a larger view.

I just simmed through a season to generate some data, so you'll see that all the "played" stat categories are empty. You can get a general idea of how the design works, though: one card for each season, and a card for Franchise History. So you get up to five seasons plus the Franchise History card on the same screen.

I've always liked that screen. The problem, though, is that I want to track more stats, and I want to tie stats to player names as well as to teams, so if I want to do all of that, I need a much bigger display area for each season.

Plus, somehow this design just feels insubstantial. There's no sense of place, is there? The user might have played all 15 games of their season, and all they get is this card?

Yes, redesigning this screen would be a lot of work, but I'd be rewarding the people who spend the most time with the game. To me, that's exactly what I should be doing.

I started discussing this with Fredrik, and I'm going to show you the evolution of the idea, and where we are now.

First, I mentioned to Fredrik that I wanted a "book" for each season (so the bookshelves fill up with season books over the years), and a place to display championship trophies. Plus I thought it would be funny to have a character in the room who aged over time. Fredrik sent back this:

He added a window so that the passing of seasons could be shown. That's a wonderful idea that blew me away.

I wanted a place to display the team name, and that wasn't in the first sketch. Plus--and I can't remember which one of us suggested this--we decided on having portraits of the players were were the best in franchise history (and they'll be selectable, with a pop-up to show you their career stats). So here's version two:

I wanted a bigger window. I wanted a big, expansive feeling in the room.

We went back and forth through a few more iterations, repositioning elements, then reached here:

Okay, I like the size of that window, and I like how it opens up the room. Unfortunately, I realized that I wouldn't be able to accurately identify the correct weather profile for every team, because the user could use cities that weren't in the weather database. Showing a snow background for a city where it doesn't snow, or even fall foliage for a city in Arizona, would totally break the immersion. In the future, there may be 12-15 weather profiles assignable to a user-customized team, but that doesn't exist yet, so the window had to go. Arghh.

I felt like after this last sketch that we were really going sideways, or even backwards. So we decided to set priorities for what was most important to display, then build the sketch with those priorities in mind.

After at least ten sketches in total, Fredrik sent me this:

Here's how this works (and some colors might change, or elements, but this is the basic final design:
In the background, team color/name will be striped at the top and bottom of the inset portion of the wall. In-between, the best players in Franchise history will have their portraits displayed. So the top/bottom team colors act as a frame for the player portraits, which I really like. I wanted the team name and colors to have a strong branding identity on this screen, and I think this design will accomplish that.

There's also going to be a pedestal on the left side of the room, with the Franchise record book on the pedestal (and a spotlight shining softly on the book).

I'm still not sure about the white table--that color or design might change--but that's where the trophies go.

We're still in the big middle of this, so it's like moving into a room where everything is in disarray. But in Visual Studio, I'm adding elements, and here's where I am now:

I know what you're thinking: holy crap, that's a mess. And you'd be right, but remember, I'm just moving in to the room. Here's what still has to be done
1. Third row of ten books aligned, and the temporary texture added. Replace with final textures when available.
2. Decide on the trophy display area. Right now, I have a layout where no matter how many championships are won, the display of those trophies is symmetrical, but I'm still not satisifed.
3. The little red book on the table is moving to its own pedestal.
4. I like the basic idea of the team name and colors, but man, that looks terrible. I have to come up with some kind of gradient or texture to make the colors less harsh. I think it's the right concept, but not the right execution yet.
5. Those yellow rectangles are placeholders for individual player portraits, which have to be added.
6. Security guard needs to be added.

Of course, when this is all visually correct, it's only half done, because I have to do the code-behind. Surprisingly, though, the code-behind isn't going to be brutal. I've already done some of these things in the existing code.

What I really like about this new screen is the high level of interactivity. You can select a season, or a player, or franchise records. You can dive into some serious data, and there's a much stronger sense of history as your franchise ages. There's going to be a nice sense of the progression of time. It will be a nice reward for the people who spend the most time with the game.

It's still quite a ways (probably three weeks) from being complete and ready for testing, but I wanted you guys to get a sense for how iterative the process is when working with a new idea like this. Fredrik is unbelievably skilled in generating sketches and incorporating feedback, and it always winds up being considerably better than my original idea, thanks to him.

Site Meter