New Product Launch: Inter-American Development Bank

iadb-home

Not all projects have the potential to make you feel like you’re making a difference in this world, but after 18 months of blood, sweat and tears alongside my design and branding cohorts at studio analogous, I’m proud to announce the launch of the new Inter-American Development Bank (IDB).

With a very limited understanding of the IDB mission at the beginning of the project, we came to understand the profound nature of their day-to-day mission rather quickly. In their own words:

We work to improve lives in Latin America and the Caribbean.

“Improved lives” is the result of operational projects that come in all shapes and forms, funded multilaterally by member countries throughout the world. Essentially, the IDB pinpoints localized projects, and funding is provided to manage green-lit projects through to completion. In order for the website to successfully present the numerous narratives, statistics and data that embody the IDB mission, we began by centering on the core needs of a handful of key design personas.
idb-persona-expectations

In the end, our process narrowed the primary focus of the site to highly related information objects, which formed the basis for the topical navigation:

  • Projects – procurement opportunities, portfolio presentation, mapping
  • Countries – projects, people on the ground, statistics
  • Sectors – OECD standardized, projects, data, strategy
  • Data: – data via indicators & countries, dynamic presentations
  • Publications – bundled research, organizational attributes

After synthesizing the requirements for each section, we designed a shallow and narrow navigation system, as well as a flexible pattern for sectional navigation, which we used in different areas of the site to allow for deep dives without losing key task context. The most complex area was the Project section, as the previous site had numerous single database search interfaces spread throughout the site. Our solution involved a persistent navigation device to allow for instant browse and specific project-object related queries.

idb-project-wires

project-navigation

In building out our design pattern library, we sketched the templates for each section to present similar navigation metaphors, information modules, and eventually, visual patterns wherever possible. Examples include:

  • the use of the hero area to introduce stories, campaigns and provide multiple paths into pertinent information
  • page modules that introduce country and sector narratives through the presentation of data and statistics
  • navigation that remain as flat as possible, never moving beyond two-levels deep, while shifting to present smart navigation in specific areas of the site

statistics

While the corporate site isn’t a strong candidate for a heavily infused social layer focusing on comments and sharing, IDB has a growing community of domain experts posting to a separate blog presence regarding sector-based work in Latin America and using twitter and Facebook to spread the good word of their work and connect with interested folk in the region. We felt it was important to share those voices both on the homepage and throughout the site when post attributes overlapped with sectional attributes.

social

It’s far too early to know if the redesign has impacted usability, traffic and the underlying ROI. If/when that feedback comes in, I’ll follow up with a post along those lines.

================

For more insight into this project and my process, feel free to reach out to me at spcoon{at}gmail{dot}com

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.

Click image for full set of design personas
Click image for full set of design personas

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 following presentation pitch of the homepage wire was a formality at that point.

Persona focus strategy & resulting home page wireframe
Persona focus strategy & resulting home page wireframe; click to see all wireframes

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

Case Study: Ameritrade Apex Trading Platform

stock market

It would be safe to say that the internet was still in its fledgling state at the turn of the century. Aside from best of breed corporate domains, such as Amazon with collaborative filtering (and their standardization of the check-out interaction model) and Google blowing open the very definition of data mining, much of the web was relatively “dumb” in the way that it could deliver user information to databases and back to the presentation layer.

It was a much simpler time for interfaces across the board—(hash)tags weren’t used to expose similar concepts within and across domains, sites were designed with one delivery platform in mind (rather than the responsive nature of today) and dynamic, lightweight web apps as we know them today were hardly imaginable, let alone standardized in development terms.

Asynchronous displays of input/output just weren’t commonplace in the browser, so the vast majority of interactions between users and system data predominantly relied upon straight form submissions and page refreshes. While most users didn’t necessarily feel the impact of such limitations, industry domains that handled timely purchases of goods with limited inventory or changing prices felt an intrinsic need for progress.

When I joined Datek Online (2002), I imagined that these boundaries were ripe to be pushed, and I had good reason to believe so, as Datek had already revolutionized the financial industry through the release of its Streamer app, which made public a set of streaming data tools that only industry day traders had access to previously.

Internally, all streaming visualizations were handled in Java, which by definition provided asynchronous communication between the client-side & the back-end and was sturdy in doing so. The trade-off with Java, though, was that it limited the possibilities when customizing the UI to a wider set of user needs and interactions, not to mention aesthetics.

Since the the function of the Datek website was highly focused on three priorities—the execution of a trade, management of account information and marketing communication—the division of tasks between account and information on two platforms wasn’t changing anytime soon. Datek was wildly successful and management didn’t seem much of a need to rock the boat to innovate, in terms of platforms, in the day trading realm. A such, my initial day-to-day focus was centered on incremental behavioral updates to all apps within the Streamer Suite.

Shifting Focus & Opportunities

Three months after I joined, Ameritrade purchased Datek and my days became much more interesting. We had just shipped a new Streamer app called Command Center—a dashboard app that present multiple Streamer tasks in one interface and was a center-piece of the product suite while the merger was bing discussed—but now everything was on hold as the two management teams negotiated the redundancies of both backend systems and product features.

Ameritrade, the brand, was a destination for people who didn’t know much about investing, let alone trading. Innovation wasn’t the focus, and the only “edgy” aspect of their brand was Stewart, a marketing constructed hipster created to represent Ameritrade while schooling a technically-challenged, older, potential client base on how to trade:

After six months of maintaining the product suites, we (Dan Saffer, Tom Alison and myself with the blessing of Larry Szczech, Datek’s SVP Product Strategy) made a proactive push to Ameritrade management to design a new trading platform, one that could support the day traders of Datek, the long-term investors of Ameritrade and most importantly, the unsupported sweet spot between the two—active traders.

While day traders brought in large commission-per-client ratio, the number of active traders (10-20 trades per month) dwarfed them and made them a much more valuable market segment. Everyone in management agreed; we needed a new platform, catering first and foremost to actives, yet designed in an extensible manner to support the continued focus on day trading and long-term investment.

Over the next two years, we did just that. We ran numerous usability studies to understand the major pain points for both client-bases and ran qualitative interviews to develop personas and document needs and experiential expectations.
design persona
We even flew in Cooper Design to run a workshop for my team and developers, getting them up to speed on Goal-Directed Design, while inviting both product managers and business analysts to sit in so we could all approach supporting clients using our service using a similar methodology.

All About The Interface

While were relatively hamstrung by available front-end technology, that didn’t stop us from pushing the browser as far as we could. We applied solid IxD axioms across the board, such as “no errors if they can be prevented,” by running javascript checks across fields prior to activating the submit buttons, forcing the user to get it right the first time through—whether the form was as innocuous as a support ticket or as important as a trade ticket. By doing so, we drastically cut down on time-to-task, which means everything when buying or selling in a time sensitive, price fluctuation market such as the financial industry.

deposits & withdrawals

As part of our overall interaction design philosophy, sections such as Deposits and Withdrawals were streamlined from multiple-page form submissions to a singular interface that exposed next options based on input decisions while setting the expectation for time-to-task. These conditional interfaces weren’t revolutionary by any means, but they weren’t industry standards either. Task completion improved as a result and user complaints reduced greatly—one of the overriding success metrics in the financial industry. These aren’t simply customers; these are clients.

Active traders need to move money, but they also need to open, close and change positions with an even greater attention to detail. Ancillary sections such as research were important, but the internet provided too many free opportunities for clients to research positions for us to focus on developing an industry leading research section. Instead, we felt that focusing our efforts on the context surrounding the trade ticket had the greatest ROI.

While we recognized that the holy grail of smartphones were a few years away from being a viable platform, we did recognize through research that traders needed to have as much flexibility as possible in the research ›› trade ›› confirmation process. We began to investigate the ways we could ensure that traders could always be one click away from moving on a position.

snapticket

What we came up with was Snapticket; a nifty little trade ticket with features that supported both primary and edge cases of our active trader clients:

  • The ticket in the footer area of the site, making it available at all times
  • The user could get live quotes in the header, or pull up their watchlist
  • The form applied the previously described dynamic error checks
  • A conditional design was implemented to shift the fields depending on the type of trade chosen—market trades are without a price field; trailing stops have multiple price, closing inputs, etc.
  • After submitting a trade, Snapticket collapsed to expose only the header w/ streaming quotes, allowing more room to engage above the fold
  • Most importantly, Snapticket could *snap* off of the window, and live as a separate, compact trade window in the user’s display. This empowered users to research online wherever they chose, yet still have immediate access to opening/closing positions

After one enters a position, an optimal task flow should take the user to a confirmation and a view of all/open orders. Well, that’s what we knew as traders ourselves, but neither legacy experiences behaved as such. We needed to make sure that every potential detail of the trade ›› confirmation ›› review positions scenario was supported.

Following a trade submission, we designed the flow so that the user was brought to the open order section of the account, where a confirmation—including day trading requirements such as a ticket number—was presented in a highly visible manner. We used this interface real estate throughout the site to communicate both synchronous and an asynchronous system messages. Again, not earth shattering today, but not many web services worked the interface as such to keep the user as informed in 2004)
open order

Overlooked by our competition, Open Orders are immensely important to traders across a number of important scenarios. A few that we tackled head on by making the interface the end-screen of the trading process were:

  • The most basic, and probably most important for all traders, is providing a clean display of whether or not new positions have actually been submitted.
  • When users trade after hours and on weekends they create a stack of open orders, that can’t officially enter the market until the next opening bell. Confirming their existence and providing a mechanism to make changes is important.
  • During more concise time periods—say, after submitting a limit order at a specific price near market price—a user will have a small window to make changes (price up or dow, cancel, replace, etc.). The interface needed to present all interaction affordances clearly and reduce time-to-task as much as possible.

In terms of usability, we remained consistent with our treatment of forms by only making submit buttons accessible once all necessary field were altered, thereby greatly reducing errors and improving time-to-task.

The Results

Leading up to the release, we knew we weren’t just launching a new experience; Barron’s Online Broker Review was waiting for us at the end of the road, and with public knowledge of merger flirtations in the air with a prior rating of 2.5 stars (a bottom of the online brokers rank) the pressure was mounting.

In the spring of ’05, I flew out to Palo Alto with David Whitmore, Director Strategy, to present the new platform experience to Theresa Carrey, who literally had the power to make or brake a business. A quote from her eventual report:

“[…] Ameritrade, which swallowed up Bidwell & Co., Brokerage America, JB Oxford & Co. and Investex over the last year, earns four stars this year for its Apex offering. Ameritrade seriously overhauled the Website this past year, finally integrating the technology brought in with the 2002 Datek acquisition. The new site provides improved navigation, more tools and services, easier-to-find information, customization and better trading technology. […]”

Ameritrade moved into the top three of online brokers and a few months down the line, TD and Ameritrade merged.

Ajax… About Time

So it’s Friday night and I find myself cruising around the web after a night out. In my travels, I landed on JJG’s blog and subsequently stumbled into his Ajax essay on the Adaptive site. The only real conversation I’ve had on the topic was a recent conversation with a client-side developer pal and after reading Jesse’s well defined description of the approach and the benefits, my initial reaction was pretty much, “ok.”

I don’t say that to offend, nor downplay the great client-side work anyone is doing right now, it’s just that I’ve been immersed in online application design for years now and have always attempted to communicate these types of design solutions to developers. I say “these types of solutions” lightly, as I’m a designer, not a developer, so from my perspective these communication calls have been screaming to be stiched together for a while now.

Jesse spoke to the difficulties of designing online applications due to the technical workarounds which have been historically necessary to successfully support innovative interface behavior. While I agree on the impact on next-generation type apps, I disagree with the approach to design, for while practicing interaction design, scenarios shouldn’t be modeled based on technological constraints.

As David Fore of Cooper exhorts, the period of scenario modeling should be a period of making magic—that’s how innovation occurs to support user needs; the limitations of the front-end evolve over time. I agree that one has to understand the constraints of the medium when designing for it, but only to a degree, otherwise one can handcuff a more useful experience by setting the box too tight.

So how can one design for the user, while considering possibilities of Ajax?

While at Ameritrade I was able to convince management to include our relatively small client-side development team in my UX team. That brief organizational commitment created a huge opportunity for me to espouse innovation and collaboration across both designers and developers. I didn’t know how long the group structure would last, so I instantly switched up working from the level of context scenarios and began to iterate on features

We used the phrase “push the browser until it pushes back” more times in our weekly staff meetings than could be counted. Our client behaviors needed to be supported in our online applications, so in turn, I refused to limit us to any narrow definitions of client-side technology.

snapticket

Thankfully, my CSD team latched onto my mantra with vigor and did the heavy lifting to evolve our conversations into working code, while myself and the IxD team returned to iterating user needs into interface behavior.

Did the team use the Ajax approach per se? Probably not, but they pretty much pushed the browser until their SOP is now reflected in some of the latest Ajax app behaviors, such as Gmail.

Business as usual for design and development at Ameritrade began to evolve.

Were the solutions as soundly executed across the board as Google’s current attempts in leveraging an Ajax approach? I’d have to say no again, as we were performing Ajax-type workarounds on the fly. But the mere fact that the team addressed dynamic interface scenarios on a case-by-case basis, with dynamic executions on the presentation layer, led our marketing group to center their next campaign around the slogan:

Welcome to the 21st Century. Now trade like it.

The ripple effect of progressive experience design was contained, as it only applied to the authenticated Apex trading platform, but Barrons seemed to notice it by giving us a 4 star rating (up from 2.5 stars the previous year).
deposits_withdrawals_ui
A switch to a complete Ajax approach at Ameritrade today would entail a short period of refactoring, but would make the current authenticated interface move from “singing” to “harmonizing.”

Ajax should mark the sweet spot of the golden age for presenting complex scenario relationships as simplified behavioral experience in the browser.

Elegance in motion.

The CLIENT Is The Bottom Line

collaboration

In an industry such as online brokerage, one would assume that the client would always be at the center of focus. And while most of the time that is the case—firms do create products and services that respond to client needs in order to grow their business—the underlying focus on the bottom line of a publicly traded company often demands executive attention, which can obscure best practice methodology, client initiatives and how to make innovation a reality due to the pressures and expectations of The Street.

Therein lies the problem: Only a sustained and coordinated focus on understanding client goals, needs, desires, etc. can innovate in a manner that is useful to clints.

Collaboration

If clients can recognize the value proposition of an offering, firms will find clientele. That’s an understandable equation. But the daily costs of doing business can drive internal decisions that affect the quality and focus of a product, let alone how teams work together. Why change how an organization works when the sausages have been made the same for as long as we can remember?

Without a charge from executives, management tends to gravitate towards less external collaboration and less spending, rather than re-investing within their tribes of the organization. Whether such decisions lead to multi-tasking employees or avoiding methodological advances, working within conservatively defined parameters lessens risk in the short-term.

So how can a business operate in a manner that supports clients goals at a desirable investment level without risking management positions by putting the business in a tenuous position in the process?

The glue is the simple concept of collaboration.

Harder Than It Sounds

For the sake of simplicity, imagine a company divided into four primary units:

  • Business
  • Design
  • Technology
  • Marketing

In this simple example, nothing could be accomplished with quality, speed or at reduced costs without close collaboration.

  • Marketing and Design need to share quantitative and qualitative research (respectively) to assist the Business in developing an explicit understanding of client needs. These qualified findings can then be prioritized by Business and Technology in terms of viability and feasibility (respectively)
  • Business, Design and Technology must collaborate during all phases of product design in order for goal-directed and innovative experiences to become a reality. This collaboration is always crucial, but even more so when first (or speed) to market is the goal
  • Marketing must be looped into all Design points to ensure that brand standards are either met or evolved, and a product marketing plan can be produced to introduce the client experience to the market in proper fashion

Yes, this is oversimplified, but the point is that successful product teams aren’t led by management that hunkers down, walling off their teams and agendas from other groups. There will always be office politics, no matter the domain, but when conceiving, designing, developing and launching interactive products, collaboration is essential to the success of not only the product, but the overarching brand.

The current buzz within the walls of Ameritrade has shifted from constantly touting our top operating margin in the industry to making transparent a commitment to designing an organization around the needs of our clients, while keeping that industry leading operating margin.

After a major merger (Datek Online), we’ve slowly grown in the direction of living and breathing the above degree of collaboration over the past few years, as Design has become an understandable entity, rather than the black box that development once considered us to be.

Keeping a competitive edge in this industry and on The Street is a tricky business. Producing killer products for clients can be made a lot simpler.