Image=everything Image=everything

Baseball Uniform Builder

baseball web design

I truly do love all the projects I work on, I’m lucky to be part of an industry where I can say that in all honesty. Some projects however have a little something extra that helps spark the creative process – this was one of those projects.

As a baseball fan, naturally I think the subject matter helped, but there was more than that. This project required a lot of me which I like, I literally thought about it day and night throughout the development process, my wife & kids will attest to that. I gladly took the lead, from conceptual planning, to visual design, to code development and management. But don’t get my wrong, I was not the only person involved, without the client and Thomas, my super-awesome-can-build-anything-I-throw-at-him web developer, the project would not live and breathe as is does today.

baseball web application design

Laying The Ground Work

Before I could even think about visuals we needed to lay the ground work. This process proved to be quite a challenge as the more we planned the more we uncovered. We had to take into consideration a multitude of customization options and how they applied to each specific uniform piece, how each effected the per uniform cost, and other variables that effect price like the number of team players needing uniforms and how to apply discounts for larger volumes. We ended up with a lengthy feature list that I transformed into a detailed spreadsheet highlighting every option for each uniform jersey and pant, this became a vital tool throughout development.

UI / UX

Next I sketched out the flowcharts of how we wanted our users to navigate. Starting with paper and pencil storyboards, then vector wireframes with minimal detail to illustrate each screen. Once we had our storyboard and wireframes in place I could create the visual components. I created vector illustrations for our jerseys and pant options, then photoshop mockups representing navigation, layout, typography, and color – we were finally getting someplace!

baseball jersey illustrations for web design

Pulling It All Together

We now had a detailed plan with approved design mock ups and illustrations, but we’d only reached the halfway point – now we had to build it.

Similar applications for baseball uniform builders are built with Adobe Flash, and that’s what the client thought we might build. While a few years ago I may have considered it, here I felt that a smarter solution was to focus on reaching a wider audience and build the uniform builder for functionality in modern browsers.

To not bore you with technical details (their is a lot I assure you) this is were the team work really came into play, while I focused primarily on the visual aspects pre-code, and then in HTML / CSS, Thomas chiseled away behind the scenes pulling off his magic tricks developing all the code for the interactions, customization, and finally tying it all into the clients shopping cart system, phew!

Setting It Free

Nearing the end we had tested and tested, watched as others used the builder prelaunch and tweaked things here and there. But after several months of work everyone was eager and ready for launch. Finally pushing the go button was extremely rewarding, and maybe just a tad bit nerve raking too. But seeing your work set free to the public is the ultimate accomplishment for a creative, and I’m so proud of the team and honored to be a part of this project. Now we start to think phase two.

Take me to it.

 

 

Archives