The Challenge

OBJECTIVE

In 2012 the year Far Cry 3 was set to release, every major brand in the interactive entertainment industry was eager to establish an online presence on Facebook. During this period, Facebook was experiencing a surge in fan page creation as it underwent a massive global adoption.

They sought to create a distinctive presence to promote the pre-sale of Far Cry 3, differentiating themselves from their competitors in an increasingly saturated market.

Framing The Vision

SOLUTION

Given our success criteria, my task within the creative team was to design the UX/UI for the integrated landing page funnel. My objective was to create a user experience so intuitive that the conversion point was barely noticed. Drawing from my experience, I considered natural eye-tracking patterns, particularly those prevalent in Western cultures due to our innate reading habits.

A common eye tracking pattern when scanning the web is the F-shaped pattern. Users typically start by focusing on the top left corner of the page and scan horizontally to the right. If they don’t find what they’re looking for or if the content doesn’t engage them, they shift their attention downward, primarily scanning the left side of the page. They often read the first few words of each line to quickly assess the relevance of the content.

Don’t Reinvent the Wheel

DEFINE

While the F-pattern is a well-known eye-tracking pattern, it’s not the only one. However, leveraging this pattern can be highly effective in directing users to the desired content. By aligning with their natural reading habits, you can guide users to engage with the information you want them to see, exactly when you need them to see it.

The primary goal was to promote and inform users about the Far Cry 3 pre-sale, but ultimately, it's about converting them into early buyers. For inspiration, I channeled a quote from my favorite sales scene in the classic 1992 film Glengarry Glen Ross.

Having refined my core objective and drawn inspiration for the perceived framework, I was fully motivated to advance to the next phase. My focus now was on establishing the hierarchy of elements necessary to fulfill the success criteria and ensure the project's success.

Asset Lineup

RESOLVE

In addition to the tasks at hand, Ubisoft’s team provided me with an array of exclusive assets to help align with their branding IP. These assets included the Far Cry 3 logo, Ubisoft logo, ESRB rating SVGs, access to their YouTube standard trailer, a custom typeface, seven international flag PNGs, the required legal disclaimer copy, and several high-definition images of both the game's environmental landscapes and the main antagonist, Vaas Montenegro.

Among the various impressive assets, the video game trailer was the most astonishing. It was clear that this would be the focal point of the composition. Before showcasing the trailer, it was crucial to highlight the product's name. Furthermore, Ubisoft wanted to pay tribute to Michael Mando's remarkable portrayal of Vaas Montenegro by featuring Vaas on the landing page. The biggest challenge was emphasizing the call-to-action without competing with the other significant assets.

Michael Mando, the original voice actor for Vaas, in character with McLovin’ posing as Jason Brody.

Establishing Hierarchy

STRUCTURE

With these extraordinary assets at my fingertips, anything became possible. In the past, I often had to navigate numerous hurdles and loopholes to acquire the resources I needed for projects. Ubisoft exceeded expectations by providing me with an abundant pool of assets to work with. Selecting the right components was going to be crucial for establishing the hierarchy needed to effectively guide users toward taking action.

I began wireframing the structure, aiming to use the F-shape pattern to guide users through the funnel effectively. I focused on optimizing the user journey, mapping out the steps from point A - What the user needs to know, to point B - The desired action I want the user to take. Recognizing that the trailer would be a pivotal part of the layout, I had to ensure that Vaas would still be a prominent feature in the design without distracting from the main focus.

Among the various important assets and requirements provided, I identified a clear hierarchy that established a direct path to action with four core assets. While all other elements were significant, they served as either supporting components, essential requirements, or additional enhancements. The four core assets necessary to guide a user from point A to point B were:

Stack Ranking The Core Four:

1. Far Cry 3 Logo: Immediately grabs attention and identifies the product.
2. Vaas Montenegro: Teases a key character, building curiosity and anticipation.
3. The Trailer: The focal point of the funnel, offering an engaging preview of the game.
4. Call-to-Action Button: A clear prompt to pre-order the game.

Wireframe Sketch

LAYOUT

Skin In The Game

AESTHETICS

Now that the landing page’s structure and functionality were in place, it was time to delve into the design phase. I was eager to skin the UI, and while I had a wealth of assets at my disposal, I wanted to ensure the tone was just right. To achieve this, I always like to start with a mood board. This initial step is crucial for defining the aesthetic and achieving the best results.

To stay true to the game’s striking imagery, I focused on maintaining a consistent color palette to ensure a cohesive look. The bold use of black, white, khaki, and red emphasizes Vaas’s powerful presence, while the camouflaged earth tones – olive green, sea foam green, brown, and muted platinum gray – subtly blend with the jungle island’s natural surroundings.

Cool Breeze

DELIVERY

I was very pleased with how smoothly the mood board came together. When a client provides all the necessary resources, it allows the professionals to do what they do best. From that point on, the project was smooth sailing and it felt invigorating, like a breath of fresh air. Having done my due diligence, I was excited to see my efforts materialize. Handing off my UX/UI design from concept to completion was an extremely satisfying moment, and my development team appreciated that all the fine details had been meticulously accounted for.

“ You are so close to the end... Come on! End it!! ”

Far Cry 3 Prototype

The Reaction

RESULT

Upon the project's completion, the custom landing page was quickly launched and received a tremendous response from the Facebook gaming community. The fan page experienced a surge in activity, and the funnel produced outstanding results. The landing page went viral, signaling to Ubisoft that Far Cry 3 was a hit.

Encouraged by the initial trailer’s success, Ubisoft followed up with a story trailer that further captivated audiences. The story arc, and especially Vaas, quickly became a fan favorite, with many saying he stole the show.

Within the first three months of its release, Far Cry 3 sold over 4.5 million copies worldwide. Since then, Ubisoft has sold over 10 million copies across all platforms, including PC, PlayStation, and Xbox. The company's success in engaging the Facebook market created a snowball effect that showed no signs of slowing down.

Far Cry 3 holds a Metascore of 88/100 on Metacritic, reflecting generally favorable reviews. IGN, a leading online media company specializing in video games and entertainment, awarded it a rating of 9/10. Overall, the game has been very well received, boasting a 97% favorable review rating from Google users.

In 2013, Far Cry 3 clinched the BAFTA Games Award for Best Action Game, a remarkable accomplishment for Ubisoft. The game triumphed over strong contenders such as Halo 4, Hitman: Absolution, and Borderlands 2. What began as a bold entry into a saturated social media market has since proven to be a remarkable success, with Far Cry 3 remaining a timeless classic.