FXCM: Infographic Design

After consulting with the FXCM team to grade the usability of their marketing site, and a follow-up project to design a new information architecture and user experience, I was presented with an opportunity to design an infographic that would live in the education center as one-stop sell for both new and on-the-fence Forex traders.

The design challenge made readily apparent was that the existing vertical format from their previous website couldn’t be altered to be more web-friendly—such as a click-through presentation featuring one point at a time. It was simply a time and money issue. That said, the challenge to clearly communicate the difference between trading vehicles was interesting enough in itself for me to work within those parameters.

forex-infographic

The intrinsic challenge were the details, details and more details. If you’ve ever worked within the financial industry, trading processes and transaction results can be a complex element when trying to present a overarching narrative. Similar to the complexities surrounding statistical narratives, trading results can present a different meaning depending on how they’re presented. We wanted to make sure that all data and results presented would stand the highest degree of scrutiny.

Enter compliance.

If you don’t have experience in the financial industry, compliance is the internal division that ensures all claims made by the firm can be legally substantiated. They’re steeped in the process of producing all outward facing media, from the marketing site to trading interfaces to, yes, infographics. That can sound annoying to a creative process, but their work is invaluable. I tend to think of them less as lawyers, and more akin to editors.

The research we performed was intense—all the information presented visually can be found on the web—so while there was pushback at times in the compliance process, and it took multiple iterations to complete, it also went rather smoothly.

Case Study: FXCM.com Redesign

Redesigned homepage & navigation
Redesigned homepage & navigation

FXCM, the top trading platform in the Forex market, reached out to have a conversation about their inordinately high bounce rate throughout their marketing site. The primary goal of the experience is to convert users to either practice or live trading accounts and the site was severely under-performing, as unique numbers were low, conversion paths were avoided and generally speaking, users would often land on key pages, yet immediately bounce back to search results with rates on pages consistently found in the high-70% range.

My recommendation for starting the engagement was to run a heuristic evaluation with a written report, which would allow me to digest the entire experience while scoring the site across a number of explicit information architecture, ui design and content standards.

The average score of the review (on a 1-5 scale, per heuristic) ended up as a 2.3 and the following were suggested as key issues to focus on in a redesign:

  • Prioritize content based on primary design persona needs and context scenarios
  • Make navigation more shallow, narrow and simplistic
  • Be consistent with the language, form and function of site elements
  • Increase the signal to noise ratio with prudent information design decisions
  • Invest in making users lives easier
  • Provide both contextual and destination help

After a few meetings with management, we agreed to take on the project to redesign the site, as well as provide specifications for an onboarding experience.

Home page & navigation of site, pre-redesign
Home page & navigation of site, pre-redesign

Post-review of the site experience, it became clear that it was speaking to everyone, yet no one in particular. This scatter approach was found in the navigation (see above), educational pages, product descriptions—clear across the site. Since archetypical user scenarios weren’t being supported, the text meandered and subsequent additions to content began to sprawl. The same could be said for new call-to-actions and large-scale additions to the site architecture; the target was wide and design standards weren’t being followed.

We didn’t have the budget to interview a wealth of potential and actual clients, so we sat down with the marketing team and walked through their understanding of who was actually coming to the site and who they wanted to visit. After weeks of reviewing market research, and speaking to SME’s across the firm, we agreed on an approach to create “stake-in-the-ground” design personas—a first step to understanding user expectations so we could create an experience that matched their mental model, provide useful information in an organized fashion and lead these users more naturally towards conversion paths.

The expectations and needs uncovered through this process led the editorial team to implement a calendar to craft a wealth of information about forex trading—from an Advantages section for the seasoned forex trader not familiar with FXCM to a Basics section for the traditional stock trader interested in forex, but doesn’t understand how it works. Simplifying the message—speaking directly to potential clients in ways they could understand—made our job easier in simplifying navigation, as well as creating recognizable affordance through a limited palette.

We began on the landing page, as historically, a large percentage of traffic from keyword buys directed potentials to the front door. Our primary concern was to provide clear paths to potential clients; creating an evergreen home for sign-up conversion in the header, provide a first visit on-boarding experience for forex platform newbs, a clean hero messaging area and spots to bubble up events, seminars and educational videos.

Once we had a satisfactory structure in place, we presented a persona-laden sketch of the information design, essentially highlighting which section would speak to which user(s). The presentation pitch of the homepage wire was a formality at that point.

In terms of conversion, we stressed the importance of keeping paths in consistent areas of the site—both in the header and in the rail of content pages. We assigned a specific color to the practice account CTA so it would stand out across the site, and clearly described what it involved above the fold on the homepage. This provided a clear expectation for what a potential client would receive when entering the first phase of the purchase cycle.

On content pages, we reduced the process for submitting information from a destination wizard to embedding five simple fields for signing-up within a practice account module, which greatly cut down on bounces. Along with the editorial shift—posting new content to a calendar, speaking directly to the needs of both potential and active forex users—organic-driven unique visitors increased immensely, which directly impacted conversion rates.

The results:

  • November 2012 (first month after launch) Practice & Account Conversion Rates increased to all-time highs and about 3 times the average.
  • Page Views & Unique Visitor reached an all-time high and Bounce rate dropped ~20% site-wide