Overview

Company/Client

Big Fish Games

Project Name

Website Mobile Optimization

Collaborators

Product management, SEO specialist, front-end dev, user research, and QA teams.

Duration

5 months, including initial briefing, project planning, design, engineering time, and QA

Project Tagline

Meet mobile-friendly requirements and improve site SEO and usability on mobile devices.

Project Summary

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.

My Role

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 finalized specs to devs for implementation, and auditing the build before going live.

Project Details

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.

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. Obnoxious, yes. But reality nonetheless.

Objectives & 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 glorified band-aid fix until we could create the mobile-optimized web experience of our dreams.

A screenshot of the temporary solution, a mobile-friendly interstitial.

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 identified 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 definitive business need for it.

Design Iterations

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.

Just the first of many wireframes in this process.
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.

To respect the privacy of my employer, I can’t show the full report. But you can see that we received an overall positive response from users. Go research!

Implementation

The results from the second test verified that we had ironed out all major issues the first round of testing identified. This gave us the confidence 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 greenlighting 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.

Success is meeting the business goals while improving the users' experience.

Final Designs

Lessons Learned

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 traffic, 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 confirmed 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 workflow. 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.

Keep Going!

There are more case studies to read.
Save some time and click below: