Fanbyte Redesign
The Basics
A full site redesign accomplished in 5 months to expand the site to provide additional tools and content for live service games in a more modular and scalable way.
Live Site
Context
Overview
ZAM had the goal to pivot Fanbyte to focus on providing users with item data for live service games along with the thorough coverage they already provided through news articles and guides. The site also required a migration from one CMS platform to another, allowing for a fresh start with the UI and UX of the property.
Ads and Layout Constraints
One key factor that impacted the general UX of the site was a collection of constraints from ad requirements. The site generally needed to support ad skin packages which required the width of the content and height of the navigation to not exceed specific pixel values. To prevent SEO being impacted by content layout shifts (CLS), the team agreed to make these size requirements the standard across the site and treat it as a design constraint to work with.
Supporting New Content
Along with news and guides, the team wanted to support item data for live service games to provide users a place to learn more about items and how to create or acquire them. Having more tabular, data-driven content in the mix was a new kind of content that had not previously been part of the property. As well as this, the team wanted to provide other kinds of content such as calendars that mapped out event schedules for live service games.
UI Accessibility
One noticeable area of growth was around basic accessibility. Color contrast ratios were commonly below AA standards across the site and basic content hierarchy was not established appropriately for content nor content hubs.
Need for Scalability
The team supporting Fanbyte was relatively small compared to the scale and impact their goals were set to, so design decisions needed to avoid to cater to only one or two game titles.
Outcomes
Modular, Scalable UX
Features for the site were modularized and generalized so that they could be used across various layouts and scale down responsively.
More Robust Content and Features
The site redesign introduced new kinds of content, including item databases for Final Fantasy XIV and Destiny 2. The redesign also introduced calendar views for both of the game titles as well as improved hubs for specific titles that could show the breadth of editorial and data-driven content for each individual game.
UI Accessibility
Basic accessibility was greatly improved through a standardized color palette to be used site-wide that supported AA compliance at bare minimum (with AAA compliance met for most color pairings). Layouts were structured to properly employ standard hierarchy of content, including content created from the editorial team.
Ads and Layout Constraints
Various ad packages and display ads that needed to be accommodated for were appropriately supported site-wide. Thanks to the modular nature of the new site UX, the ability to add or change display ads within any layout were greatly improved, allowing for a much better relation between the site and the ad team that supported it.
Conclusion
The new site design for Fanbyte gave a solid foundation for the editorial team to be able to provide more and better context for the games they supported without being hindered by design decisions that could impact the performance of their content.