Baseball can be a curious sport, particularly to those outside US and Canadian shores, but in its native habitat and certainly in diverse countries such as Venezuela, Japan and South Korea, the sport is steeped in fervent history. Hall of fame stars of North America’s Major League Baseball (MLB) such as ‘Babe’ Ruth and Joe Dimaggio are world-famous names whether you follow the game or not.
This makes it big business for merchandising, especially in a sporting goods market where amateur and professional teams, kids and veterans alike demand the latest apparel. In turn, these customers most likely pass through leading US sports retailer Dick’s Sporting Goods, operating out of 558 stores across 48 states. With a strong eCommerce presence also, DSG wanted to launch a “shop-able and shareable look-book” online to showcase new baseball products for the 2014 season. Take to the field Viget, a 65-person digital team based in Falls Church, Virginia specialising in software development, website design and building unique digital experiences.
“Many of us at Viget are sports fans, so to work with a client like Dick’s Sporting Goods is a real honour and enables us to do some fun work,” beams strategy director Paul Calderbank. Initially brought on board to provide creative strategy with additional agencies on video production and build, Viget’s strategy pitch impressed enough to yield them greater control. However San Francisco’s Alchemy Creative did partner to shoot the video and handle post-production, striking a working relationship that has continued since: “Knowing that the audience was predominantly male high-school-aged athletes, our approach was to create a video-based experience that would focus on the intensity of the moments leading up to each crucial play and capture the drama surrounding each position on the field.”
So we start at the top of the first innings, looking back at how this classic baseball matchup made it out of the bullpen and into all of our browsers. From the beginning, back in July last year, the project would be about reaching baseball fans. A major concern for Dick’s Sporting Goods as a brand is always providing authentic, focused content to the widest audience. This would make responsiveness paramount, appealing effectively to users across a broad range of devices, from a 3.5-inch phone screen to a 42-inch in-store touchscreen display. As interactive video became a desired route for conveying sporting drama, the challenge for delivering a robust and consistent experience on a variety of platforms required clear thinking.
“A project like this has a lot of moving parts,” explains art director Owen Shifflett. “The mix of video, UI and sound design can look great on paper but can be hard to visualise until you see all the pieces working together. The key for us was keeping things simple at first, breaking down the experience into components that work well for a position-based game like baseball, and adding design complexity iteratively from there.”
The idea for the site was then evolved from a general desire to build more ‘story’ and attitude into what the eCommerce experience. It would become about telling a ‘product story’ where a balance could be struck between elevating Dick’s Sporting Goods as a digital brand and celebrating the visceral aspects of baseball. The content would then succeed in placing the featured products within a natural, compelling environment.
“Conception of a site like this requires a blend of digital UX and traditional film storyboarding to get the experience right,” Shifflett continues. “We actually started with detailed storyboards first, mapping out the scenes and how they would interplay with each other and assumed that any site UI that we added would be subordinate to the film experience. This approach forced us to concept simple interactions that support and augment the video, instead of driving it.”
Of course this implied an organic transition from attention-grabbing video to directing customers to the correct product. In initial brainstorming phases the concept of showing ‘gear in motion’ was most prominent, adding an inspirational dimension to selling. “Sure, you can look at a product catalogue and see pictures, or even go into a store to try a product on,” begins editor (producer) Zach Robbins. “But to actually see a product in context of its use crystallises the product story in both a functional and emotional way. That’s why we landed on using fullscreen video as the driving content for the site. From there it was a matter of balancing the visual story between brand and product – motivation and conversion. We borrowed from the larger baseball campaign’s focus on the silent but intense moments before a pitch, then the explosion on the field when the bat goes ‘ping’!”
Thanks to the creative pitch there was little chance of the client-agency relations going ‘ping!’ at any point. Viget invests a considerable amount of time in client consultation, discussing strategy, analysing technical constraints and reviewing creative execution in detail. Each project starts from a briefing session to establish business objectives, brand considerations and, crucially, what the budget range may be. Research around audience and how rival brands are navigating the market space then follow before syncing up with media teams to see exactly how the experience will be supported.
“From there the conversations turn to creative strategy and how we’re going to reach and engage the audience, how we will tell the story and deliver the message, and how we plan to execute the development,” Paul Calderbank explains. “Once those decisions are finalised, we map out the development timeline, assign a team and get to work creating the experience. Nobody knows the brand or their customer like the client, so having them involved in the development process keeps the project on track from an authenticity standpoint and ensures that we’re building a solution that’s going to achieve their goals. For us collaboration is key and quality execution is critical to the success of any project.”
Talking aside however, the time quite literally for calling “Action!” is inevitable. In frontend UX terms the biggest challenges would emerge from building a fullscreen video experience that remained flexible enough for multiple screens. Quite aside from various technical hardware issues, the production teams had to be highly pragmatic about where the action in each video would show. Practical aspects of how scenes were shot, angles and blocking became incredibly important points for keeping the focus down the centre of every display: “We knew going into this that a user would see more or less of the periphery of the video, depending on their screen size and orientation, and we kept that consideration in the forefront as we designed,” Shifflett explains. “We also wanted to make sure we weren’t over-designing when it came to interaction states. Since the responsive nature of the site called for the experience to span from mobile, to desktop, to in-store display, we focused a lot of effort on creating one set of interactions that would work across all views, instead of tackling them individually. This simplified our process quite a bit and helped us create a set of interactions that feel native to the experience, no matter how you are viewing it.”
Similarly, the designers charged with creating the visuals used particular tricks and techniques that would help with keeping file weights down and streamlining bandwidth demands. “In terms of graphical work, our front-end development team collaborated with our design team to use vector assets whenever possible,” outlines front-end developer Chris Manning. “This allowed us to create SVG images that scale well and save on file size. It also gave us the freedom to move commonly used icons into a web font file, which helps improve page load times by reducing network requests.”
Moving back to video, the front-end team devised a scaling solution to deal with the variety of displays being targeted. CSS Transforms were used to scale fullscreen on most platforms, with the transform-origin property proving helpful for repositioning shots so that interactive hotspots didn’t fall out of view.: “To prevent an all-video site from overwhelming computer capacity, we worked to reduce it down to a CSS file size of 12K,” Manning continues. “This was a win for the site’s use on personal devices and for in-store displays that can have variable online connectivity. Functionality on mobile was another challenge; mobile phones can only play video in the device’s native player application, which meant that our video would play outside of the browser, preventing the display of interactive hotspots.
This foresight would become critical once the website went live, with the experience being launched via a new marketing domain. Being added to ‘dsg.com/now’ would also help in directing traffic to campaigns new, topical or timely – accessible on any device from a single URL. As part of broader campaigns for the new baseball season, the website also enjoyed paid media support encompassing email, print and social media.
“Paid media was a highly important part of driving traffic to the site, especially during the weeks immediately following the launch,” reveals Viget’s digital analyst, Mitch Daniels. “While a separate agency managed individual media buys, we were around to evaluate user engagement on the site and provide recommendations for continued improvements.”
Reassuringly, traffic figures would point to 50 per cent of all visits coming via mobile with 85 per cent of social network referrals emanating from portable platforms. Couple this with an incredible 129k minutes of active screen time over the first few months and it’s no wonder all involved feel like as web projects go, they’ve smashed it out of the park. “The client is thrilled with the finished product and we’re proud of the attention it has received within the web design community.”