Hot Roster design assessment
Based upon the CBS All Sports app and the CBS Fantasy Sports app I helped design. Hot Roster CTO JC Morrison reached out to have me take a look at their cross platform fantasy sports app. He and his dev team were coming up on the release date. They had outsourced the design and he wanted to know if I thought it was 100% ready.
Attention to details
Enlisting the help of Brian Brown a huge fantasy football fan and, my roommate. I reviewed the Hot Roster app on iPhone and Android from heuristic evaluation point of view, Does it work or doesn't it. The look was a bit outdated and had lots of room for improvement. But that wasn't really the feedback he was looking for. I put together an annotated document with my opinion on what could be improved in the next iteration and what I thought needed to be fixed before the release.
A few days after I sent over my suggestions, JC called to tell me that I was the only one who looked at the app and didn’t say it looked great, and asked if I would come work for them. He was putting together a dedicated design team and we would all be working remote. Because it was a startup with so much potential at the time I said yes. This was my biggest challenge to date because it was my first multi platform product supporting Web, iOS, and Android with multiple screen sizes on desktops, phones, and tablets.
I was confident that I knew how to teach myself quickly. Information was out there I would simply need to put in some off hours time to get there.
During the first few weeks at night after work. I studied grid systems, break points, media queries, and how to make images responsive for desktop. During the day I was wire-framing and testing a new game type and helped JC look for a couple more designers.
Banners & social media
JC hired two more excellent designers Michael Dasch in Florida and Dale Jones up in Washington. We could not have found two better guys to work with. It was a balanced team, and we all worked really well together.
Our top priorities are adding sports, redesigning Hot Roster with an updated design style and making it scalable with vector graphics. And at the same time pumping out banner adds and social media content for marketing initiatives.
Redesigned vectorized and scalable
The biggest challenge
Thinks got really exciting when biz dev announce they wanted to white label the app and they already had the first client lined up Maxim Magazine. At first we all assumed this would be an issue for dev. But the big problem was the difficulty and cost of having multiple code bases and all the extra work and potential problems yet to be seen.
symbols & Variants
Dale and I believed we could solve this using duplicate image folders and file names with only the top most folder named after the brand.
But, before we bring this to dev we need to figure out how to make it dead simple.
We would need to deal with brand guidelines back and forth with the creative team at Maxim. We also needed to consider long term expansion and how we could automate the process as much as possible.
Design System to the rescue
If we used transparencies for most of the design elements so a single background image could support the brand and create a design system containing elements with a primary color. We could in essence simplify the design requirements to require a few background images, a logo, an icon, and one primary color. Which could then be built into a client facing CMS.
The solution no code
We were ready to run the idea by Ben Stahlhood our VP of Engineering to see if he thought it could work. That was probably one of the most excited responses I’ve ever gotten from dev when pitching a design driven plan.
Two Products. One code base!
Thinking outside the box
Once we had the solution. The rest is history we were able to push live a white label product for Maxim from start to finish including the design and branding approvals in just under 4 weeks.