My Role
I provided UI/UX and front-end direction for the development of a fantasy sports game platform for the restaurant chain Buffalo Wild Wings. As the lead designer in-house and working alongside a designer of the client’s, we communicated various goals of the website while also delivering a rich user experience. The client’s designer provided basic mockups of the generic look and feel of the website, while I focused on adhering to the client style guide and conceptualizing and designing the various fantasy sports games the client requested.
Product Overview
STATS’ Hosted Solution® has delivered content to many clients over the years. My role included bringing the solution up to date using more powerful, modern, and efficient technologies to improve the performance and support for increasing clientele - while providing a fresh and responsive design.
BDubsGameBreak.com No longer active. 😞
Pick 6
For the Pick 6 deliverable, I was able to be involved from the initial discussions to final delivery of the project. The idea behind the game is to allow year-round access to the fantasy game, allowing for the more relevant sports players to be selected and score fantasy points for the user’s team. Initial wireframes were created on whiteboards, and discussed some basic functionality at this time. A high-fidelity prototype was created and delivered for stakeholder review. This prototype was created in Axure, and can be accessed here: http://m6dkib.axshare.com/#p=make_picks
After finalizing the prototypes, I was involved in the creation of mocks, and once the design was finalized, I also created the front-end templates. The front-end templates consisted of the HTML, CSS, and JavaScript that constructed the page and determined some of the basic interactive elements of the user experience.
Some of the mocks that were created for the Pick 6 Challenge can be found below:
-
Desktop Mock:
-
Axure Wireframe and Prototype:
-
Make Picks Mobile Mock:
-
Roster Overview Mobile Mock:
Streaks
Streaks was another fantasy game that allowed the user to be involved in the game year-round. Streaks have basic and complex questions that are dynamically created based on top performers in their respective league and/or sport. These questions most commonly ask for a over/under of a specific statistical milestone for an athlete to achieve on the corresponding day.
This was a very fluid concept when first being created so many iterations were involved in the sketch and whiteboarding phase of the project.
Some of the mocks that were created for the Streaks Challenge can be found below:
-
Desktop Dashboard/Make Picks Mock:
-
Desktop Results Mock:
NCAA Bracket Challenge
The Bracket Challenge for BWW was one of the more enjoyable projects that I worked on with the client because it was a heavily marketed initiative and was one of the more challenging projects I have worked on recently. I have always been familiar with March Madness Bracket games in the past, but one of the big challenges was coming up with a solution that was also responsive. Knowing I would also be doing the front-end development for this project, I was well aware of the challenge that was ahead of me when sketching, prototyping, and mocking this project.
I created some basic structural wireframes and layouts to adhere to, while simultaneously researching some of the technology and practices that were done for similar projects across the web. Unfortunately, there were not any products to compare to that were web-based. I continued with my original vision of how we could pull off the project, and it was once we arrived at the front-end development and template stage that I had my larger challenge.
I was happy to come up with an almost identical-to-the-mocks solution, that allows for the entire bracket markup to be the exact same across breakpoints, and utilizing media queries, was able to stylistically change the layout to adhere to our mobile, tablet, and desktop dimensions. The finalized template (before final implementation and some minor tweaks) is available here: bracket.zachbrugman.com
Some of the mocks that were created for the Bracket Challenge can be found below:
-
Desktop Mock:
-
Conceptual Wireframe:
-
Final Mobile Design:
-
Mobile Demo:
Summary
The client had a lot of big requests for this product and subsequent projects, which was very challenging and enjoyable for me. I enjoyed the conceptualization and ideation phase of many of the projects because it allowed me to think of some fantasy games I had never considered or been exposed to before. Thinking of various user experiences, whether in the restaurant, on mobile, on tablet, or at a desktop computer, there were many scenarios to consider for the user and making the user experience as successful as possible.
Deliverables
Wireframes, mocks, prototypes, and a lot of other UX deliverables were rapidly produced during my time on the BWW project. Below are a few examples of some of these: