Big Fish Games
Website Mobile Optimization
The Big Fish Games website is one of the key touchpoints for its customers to browse the company’s extensive game catalog. It keeps customers abreast of sales, new releases, and new services. In order to maintain our search rankings, the website needed to be updated to include a mobile-friendly version. The addition of a simplified navigation system, optimized scale of content, and a single column grid provided our customers with a better experience when viewing the website on the mobile device.
Gina Connolly (Product Manager), Conor Murphy (SEO specialist), and Tori Leonard (user research)
Researching mobile web best practices, conducting an audit of our competitors’ mobile websites, reviewing Google Analytics data, determining core user paths, designing the layout and UI, iterating on designs, creating interactive prototypes for usability testing, coordinating with our research team, testing designs with users, delivering ﬁnalized specs to devs for implementation, and auditing the build before going live.
In the spring of 2015, Google announced it was adding a new ranking signal for its search results. Starting on April 21st, it would evaluate sites for mobile friendliness. Those that passed the test would appear above those that failed. Needless to say, any commercial enterprise would see this as an immediate concern. That was especially the case if they had already invested time and resources towards SEO efforts.
Yet it was also a chance for Big Fish to make improvements to the mobile experience for our customers. At that time, no consideration for a mobile version of our website had been made whatsoever. Big Fish Games forced mobile users to endure the full-sized website on mobile screens.
The Vision & Temporary Solution
Goals of this project included:
Identify which pages of the website were being used most by users on mobile devices
Implement mobile-friendly versions of those pages
Subtly redirect users along the newly optimized paths
Provide users with the ability to switch between the original and new version
Big Fish Games is a company that carefully curates a quarterly roadmap. As a result, the news of this new initiative caught us off-guard, and the lead time was pretty minimal. We therefore had to act quickly to buy ourselves some time before our website’s ranking plummeted. The proposed work-around was to display a mobile-friendly interstitial before redirecting visitors to the original home page. In this way, site rankings would be preserved while we worked on a more permanent solution.
So, in addition to meeting the long-term goals of the project, we were tasked with implementing a provisional solution immediately. Did this help buy our team time? Sure! But we designed it knowing this was just a gloriﬁed band-aid fix until we could create the mobile-optimized web experience of our dreams.
Research & Analysis
The project began by meeting with Google’s mobile optimization specialists. They were kind enough to review our current site to give us an understanding on how they determined mobile-friendliness. This included demoing “best in class” and competitors’ sites and giving some general advice on how to optimize the current website.
After scrutinizing the designs Google presented, I conducted my own research. While they did their best to anticipate who our competitors were, the business had its own list of companies we keep an eye on. I aggregated mobile optimization best practices and screenshots of those competitors’ sites. Those findings were then presented as a brief to the key stakeholders of the project. I emphasized how those principles specifically applied to our content.
As a follow-up, our SEO specialist reviewed the Google Analytics information of our website with the team. We identiﬁed the core user paths our mobile visitors were taking with that data. The mobile optimization efforts prioritized the user’s ability to discover new games and to purchase those games. The decision to prioritize these user paths came from the need to create a viable solution as quickly as possible. While it would have been ideal for the whole website to be updated in this project, there wasn’t a deﬁnitive business need for it.
After the completion of the research stage, I did the following:
Reviewed the current website content and its primary pages
Cataloged the core features of the main site to maintain parity
Created a series of wireframes with notes about functionality
Underwent a series of review meetings and design iteration cycles
Finalized the core features, functionality, and layout
Some changes that came about included optimizing features with adjustments to the visual hierarchy. These were intended to streamline the mobile user’s needs. Other additions were accounting for the variable states of the user (eg. signed into their account) and how the site responded to user input.
The next step was iterating on the visual design and treatment of UI elements. This process was both enjoyable and tedious. While it’s easy to test for usability, visual design is nearly impossible to nail down with data. We wanted a fresh take on the existing look and feel of the site, and I think we were successful. Here are some examples of various visual treatments for the footer. These included the addition of the option to view the desktop site.
Validating the Work
Once the designs were finalized, we would be putting them in front of users as an interactive prototype. The purpose was to determine the most critical areas that needed to be addressed prior to launch. The steps to doing this included:
Putting together a rough simulation using print-outs
Testing it with the PM to help me visualize the flows
Creating a fully interactive prototype using Proto.io
Reviewing it with the PM and our internal research team
Making some minor revisions prior to testing
Discussing with the research team what the goals of the project were, what tasks to ask the users to perform, and what our primary concerns were at that time.
Observing the users unnoticed while being tested
After testing, the research team crafted a report for us. The report enumerated the top usability issues and their perceived severity. After discussing the results with research and the PM, I made some new iterations on the designs. The PM signed off on the new designs before I incorporated them into a second prototype. Research conducted a second round of testing in which users were much more successful at completing their assigned tasks.
Up & Through Development
The results from the second test veriﬁed that we had ironed out all major issues the ﬁrst round of testing identiﬁed. This gave us the conﬁdence to present the design to the front-end dev team.
I showcased the design in the meeting and answered questions about intended functionality. Likewise, during the meeting I cataloged all the assets and requested changes discussed. My notes later guided the content that went into the spec document. I delivered both the spec doc and image assets to the front-end team with the assistance of our Digital Content team.
As part of the QA process, I conducted a design audit of the build on our test environment before green-lighting the project. Thankfully, I am lucky enough to have some pretty exceptional coworkers, and there weren’t many issues. Still, it’s important to double-check everything before going live. Most of the hairy bits showed up when we localized copy, which is an inevitable part of the process when you support multiple languages.
The final design is still up and running, should you be on a mobile device: https://www.bigfishgames.com/
After launch, the team was kept up to date with the KPIs we were tracking to monitor success. While there wasn’t a noticeable uptick in mobile trafﬁc, neither was there a downturn. Also, the Big Fish Games website maintained its rankings on Google. The absence of a major upset was the primary goal of the project, and we had conﬁrmed success.
I would have liked to have involved user tester earlier and more often. Since this project, my team has started incorporating Optimal Workshop tests into our workﬂow. It enables us to get data for certain aspects of the project without the heft of a major research study.
One of the biggest frustrations I had in this project was the limitations of my tools. For this project, I was still using Photoshop to create all comps and assets. Shortly after this project went live, I persuaded my manager to approve my team for Sketch licenses.
Overall, I can genuinely say that I am happy with the work we did. We followed the design process fairly closely and without much issue. Above all else, the user was at the center of our decision-making while still meeting the business needs. And at the end of the day, that’s what counts.