Design Process - Fantasy Draft Room

Summary The focus of the draft room redesign was to bring a modern aesthetic and improve technological and functional features. A responsive web design solution, down to tablet dimensions, was a requirement. There are various features all fitting into one solution, including: draft status, player details, available player list, draft results, player queue, team rosters, and a chatroom for users.

Example of template

Competitive Review The competitive review brought together features found in popular fantasy draft tools such as ESPN, Yahoo, and CBS Sports. Other, lesser known tools were also reviewed to tie together the most popular and cutting edge tools available today.

An early iteration of the competitive review is available here.

Old Draft Room The draft room had a predecessor, but was built using Flash. The new version of the draft room needed to be in HTML to allow the use across multiple devices. The use of HTML also improved the performance of the draft room. A screenshot of the old design in Flash is shown here.

Mocks The draft room requirements were similar to the previous draft room with a few added features, so instead of investing time in wireframes, I moved straight onto creating mocks. The mocks helped determine how the draft room would look aesthetically. There were a few different versions of the draft room mocked up, but the clear winner was the one stakeholders chose to go with. Creating the most in-depth mocks as possible helps further along in the process, both for myself in HTML/CSS/JS, and also for developers. The mocks assist in the process as design references.

Build HTML/CSS Template Once mocks are finalized, I begin working on the HTML/CSS template. I also usually include simple jQuery functions to add some interactivity to the pages. Once the template is completed, I hand the code over to developers so they can integrate data and security features. During this process, I am available to developers for any general design cleanup that may come up (with such a wide range of data and character lengths, there are often times an element on the page will not display correctly).

Example of template

Launch Draft Room This is currently a work in progress with a launch date prior to the 2014 NFL Regular Season