The goal of this redesign was to rebuild FOXSports.com to be responsive and provide an optimal viewing experience across a variety of devices. The transition to a mobile-first website would give sports fans a more accessible, simpler and cleaner way to navigate sports content with a consistent user experience and brand language. Unifying the digital experience, optimizing navigation, load times and interfaces was our primary focus. Leading to an overall increased user retention, higher mobile traffic and an immersive online experience.
The Process: Trend Research | Sketches & Wire Frames | Mood Boards | Design Sprints 1–4 | Design Iteration | Development & QA | Launch
Using Data to get Buy-in on Responsive Design
Benefits of Responsive Web Design
FLEXIBILITY: A responsive site works on every screen width, every device, every time, including devices that haven’t been released.
SAVES TIME & SHARES OVERHEAD: One single site that feeds all device formats is easier and more efficient to maintain and update
BRAND INTEGRITY: Responsive web design assures that the look and functionality of our site is optimally displayed and consistent across all devices
HIGHER SEARCH RANKING: One single site versus multiple sites will get a higher ranking and more traffic because you are combining mobile, tablet and desktop inbound links
OPTIMIZED FOR SEARCH ENGINES: Only 1 URL is needed. Also, it preserves the authority a URL has built up, as there is no need for a separate URL for mobile viewers (ex: m.msn.foxsports.com)
EASY TO ADD CONVERSION & REDIRECT CODES: If you use conversion tracking to track performance of your site or your pay per click advertising, it’s easy to add the tracking codes as there are fewer pages (URL’s) to add it to (there are no duplicates for mobile devices)
So, how responsive is Foxsports.com?
Desktop, Tablet, FS App (2012)
Conclusion: There are many benefits to switching to a responsive web platform, most importantly:
USER-FRIENDLINESS: Content and layout adjustability, making the experience of viewing a site more user-friendly, content rich and accessible
HIGHER SEO RANKING: A single URL destination, making it easier for our users to interact with, share and link to us, plus more beneficial for search engine ranking purposes
TIME & MONEY SAVING: Updating and maintaining one web site versus multiple site versions will save considerable time and money
By 2013, more people will access our website via a mobile device than a desktop computer. We must prepare for this inevitability now and switch over to a responsive web platform. Not doing so will put foxsports.com at a major disadvantage in our industry.
Questions we asked
• Does responsive web design align with our site’s objectives?
• Do our users expect the exact same of the website when they visit it on mobile as when they do on their desktops?
• What are our competitors doing?
• What do we have to do systematically?
• Do we have the resources to do it?
• Do our time schedules allow it?
• How will ads convert to a responsive site?
Initial Design Research
We included each department in the redesign process: Broadcast, Photo, Business Development, Sales, Editorial, Engineering, Finance, Regional, Marketing, Product, Soccer/Deportes and Deloitte.
NFL Team page whiteboard planning
NFL Team Home | NFL Team Schedule | NFL Team Stats | NFL Team Roster | NFL Team Injuries | NFL Team Transactions
FOX Sports mobile video hub sketches with native ad opportunities
Rethinking navigation
During the redesign, we were asked to create a simplified navigation where everything would fall under three buckets: Sports, Local and Watch. As expected, this version was short-lived because the sports were too buried. The next version listed out the top sports while keeping the other categories in their respective buckets. As we moved to a more video-focused site, we changed our navigation to feature Shows as well.
Design Solution – Main Navigation: UI Exploration V 1.0
Design Solution – Sub Navigation: UI Exploration V 1.0
Design Solution – Search/Menu Button: UI Exploration iPhone V 1.0
Design Solution – Sub Navigation: UI Exploration iPhone V 1.0
Design Solution – Main Navigation: UI Exploration iPhone V 1.0
Video Hub and Video Playlist Wireframes
Super Bowl Event Page & Long-form Article Wireframes
Blog & Photo Gallery Wireframes
Anatomy of new Foxsports.com – 3 Column Structures (A + B + C)
Mood Boards – Color, Typography, Imagery, Layout and Navigation
Simplified 4 Color System
Final concepts on Desktop
FOX Sports Home | NBA Long-form Article | NFL Team Home | NFL Gallery
Before and After
FOX Sports Homepage
NFL Homepage
College Football Homepage
MLB Homepage
College Basketball Homepage
Nascar Homepage
FOX Soccer Homepage
UFC Homepage
The Ultimate Fighter Show Homepage
Crowd Goes Wild Show Homepage
Results speak for themself across the board
