Case Study: Redesigning Media Matters For America

media matters for america

In 2005 I collaborated with Khoi Vihn (a founding partner and Design Principal at Behavior Design) as a contract information architect to redesign the Media Matters for America website.

The organization had launched only a year prior in 2004, but with the explosion of political blogs beginning to make a dent in online conversations (pre-social media), their platform couldn’t handle or take advantage of the overflow of new traffic. If you’re not familiar with the media tracking platform, here’s how they describe themselves:

Media Matters for America is a Web-based, not-for-profit, 501(c)(3) progressive research and information center dedicated to comprehensively monitoring, analyzing, and correcting conservative misinformation in the U.S. media.

The team we worked with was led by a handful of senior research fellows who were mostly in charge of the position pieces on the site. While the incoming goal of the engagement was centered primarily around re-architecting the site to make specific content more findable and visible to users, the team knew that they were posting blindly to the web with only the hope of satisfying audience needs.

Who Actually Needs Monitored Media

In leu of a large research budget, we decided the next best thing was to run a session with our staff of in-house political consultants and subject matter experts. Armed with sticky pads and markers, we set up shop in their war room in downtown Washington, DC and started in at the beginning:

  • What do we know about the people who come to the site today?
  • What do they visit often? What do they do there?
  • As bloggers, how can we better serve their needs?
  • Who isn’t currently aware of MMFA that should be aware?
  • Is there a chance to develop programs or community around misinformation?
  • etc.

When designing an information heavy, public website—as opposed to a task-oriented, internal application—it can be a slippery task to craft design personas that will present even pseudo-exacting context scenarios.
mmfa-personas

In this case, we were able to start the conversation with a solid understanding of a user base that had particular needs (political bloggers), and then extrapolate outwards to see if similar users might exist with even more discrete goals. Our generic “embed and share” user began to show enough tendencies for us to divide the profile into three primary design personas:

  • Jonathan Kenney represented the archetype of a journalist that MMFA knew was using the site for research purposes. Upon fleshing out his experiential and career goals, we recognized the opportunity to design a program that fed content into his topic-specific research needs
  • Jackson Martin represented the scores of political bloggers that were on the rise at the time. This was pre-social media, but the scenarios were similar: Make content findable, digestible and shareable.
  • Efrat Zori represented the mass of anti-war and left leaning activists who simply didn’t appreciate being lied to. MMFA can become a community for her to spend time both commenting and sharing media tips.

Somewhat outside our purview, and deeper into the objectives of MMFA itself, lay a fourth potential persona. Dharia Hsin represented a political staffer who was dealing with the media, putting out fires and suggesting policy strategy her congressman. We believed that she might also be pegged strategically by MMFA as a conduit to share misinformation research and video with her boss to assist movement on the hill.

Moving From Strategy To The Interface

Once we had our personas in play, we crafted a number of scenarios that positioned our users within their daily context and imagined, in the most optimal manner, how they might interact with MMFA. This narrative exercise allowed us to design solutions without the constraints of the interface. We then walked the client through each scenario, and made changes where necessary. Once we were in agreement on the strategic approach concerning user needs, I began to document lower-level scenarios—following key paths throughout this yet-to-be-sketched interface.

The key paths began to resemble functional requirements, but not as an out-of-context collection of direction; rather, much more of an an organic semblance of explicit interface needs steeped in user goals—from particular widgets to search results hero campaigns to column requirements. We used this process to iterate internally and then with the client, eventually leading to design sketches… but with a twist.

As I began low-fidelity template sketches that were heavily laden with modular features, I visually assigned our personas to each content area. From the home page to content pages to search results, it helped to communicate the bridge between the strategy work and the interface to the team.

Form there, as my sketches gained in fidelity and Khoi—probably the most renowned grid designer on the web in this era—worked with the team to establish interface details and a more sophisticated palette, we iterated on module placement, widget behavior and a metadata scheme. Previously, MMFA wasn’t tapping into tagging as an approach to make their content more available, either internally or externally. We made it a priority that all content published—research, video, article, etc.—would have an explicit approach to tagging, which helped the team align more closely with the citizen media launch spots (think: Technorati) of the time.

In the end, the MMFA team loved the work. Our strategy improved their community building efforts and laid the groundwork for MMFA to become the go to place for both bloggers and journalists looking for misinformation in the media.

Ten years after launch, not only can you experience the vast majority of the architectural foundation we put in play, but the domain has skyrocketed in popularity. The advent of social media most definitely fueled such an explosion, but our thinking at the time didn’t limit the domain when a new vehicle for discovery appeared on the horizon.

There aren’t many examples of domain designs that have stood the test of time for more than a decade. That’s very gratifying.

10 years after the engagement, the interface works and looks pretty much the same
10 years after the engagement, the interface hasn’t changed much

Ramping Down & Moving Forward

change in view

It won’t come as much of a surprise to those close to me that I’m planning on retiring dotmatrix studios as a business this winter. Housekeeping will keep me billing clients as such until the end of this calendar year, but any aspiration of evolving the business passed a few years back. It’s time to move forward, or as my favorite philosopher once said:

The only way to make sense out of change is to plunge into it, move with it, and join the dance.
Alan Watts

I’ll continue to consult independently while I shift my focus to pursuing the right fit of an in-house design management position.

Quite honestly, it’s a few years past time for me to return to the challenge of building, collaborating and developing professionally with an internal team. And regardless of the results of my full-time pursuits, I’m going to pursue work that is more strategic in nature, which is not to say I won’t dive deep on projects, but at this point in my career I’m exponentially more valuable upstream consulting strategy, defining direction, mentoring designers and working cross-functionally.

Before my life becomes too hectic in this next phase of my career, I figured this might be a good time to document the history behind my studio (RIP), hash through its evolution and take into account the positives that I took away from these past 10 years. By no means do I consider this to be a case study of any particular importance, but it could provide interesting fodder for those looking to strike out on their own.

86 Bedford Street

When my stint with Ameritrade ended a decade ago and I moved from Jersey City to Greensboro, my professional goals were simple enough: to open my own shop. After three years of negotiating the waters of a development-centric organization sans executive Design support, I had become disillusioned with the politics of leading an in-house product design team, on deadline, while fighting turf wars to meet the needs of our clients.

In comparison, the notion of running my own shop, making decisions that fit my approach to design, business and the ripening opportunities of the web was more than appealing.

After a few months of consulting I quickly came to realize that I wasn’t interested in constructing a traditional agency; I had zero desire to get caught in the loop of chasing down work in order to maintain a bench of designers. That was when I took inventory and came to understand that my interests revolved around three distinct axes:

  1. to collaborate with as many of the best and brightest I could find
  2. to work on projects that I found to have value beyond a paycheck
  3. to immerse myself in community-building efforts

This “mission” is what drove the choice of the dotmatrix name and mark. Riffing off an analog printer’s output—imagining individual members of a team or community coming together to create something larger than themselves—within the spoken equivalent to a top-level domain, the branding was ironic, cryptic, geeky, aloof, and executed with sophistication (thanks, Tina)
sean coon office

After putting 10+ years in the industry, I was still an artist at heart who trained as a designer and learned the art of business out of necessity. If I was going to run my own shop, it would be by my own rules, so I decided up front that I wasn’t going to chase RFPs and local clients—let alone propose panels and angle for speaking engagements—but rather invest my time and efforts in openly posting my thoughts and ideas about our quickly evolving 2.0 world and attempt to meet potential collaborators.

From ’05 to ’07 I attended a good number of conferences—from SXSW to Emerging Technologies at MIT—and met some brilliant folk along the way (such as Tara, Doc, Nate, and David). The more I posted, the more I became a part of the 2.0 conversation and the more project feelers I’d get in return. Over the last ten years, every project I’ve worked on was the result of either a past colleague reaching out, a referral or someone pinging me based on my writing.

dotmatrix studios never marketed itself with a website or a twitter account; we were the speakeasy that you came to know by word of mouth.

The Work

One of the advantages of setting up shop in a city like Greensboro is the cost of living, which can give you the opportunity, if you’re so inlined, to balance your time between paid gigs and creative pursuits.

After contracting with Behavior Design to rethink and design the Media Matters for America platform, I had the opportunity to assemble a full team to design the CMS for Scripps Networks, which was to be used to publish, manage and monetize content for multiple high-visibility online properties (i.e. The Food Network, HGTV, DIY, etc.). I’d co-lead scrum calls on Skype and interview users on location every few weeks. Working out of offices Knoxville and NYC with a team based in both, including London and Minnesota, the project was a bonafide feat of collaboration.

In my (few) off-hours, I ended up becoming waist deep in the local music scene, and after watching my musician friends struggling landing crowds at shows and getting their music to the masses, I came up with the idea for the dotmatrix project (DMP). Encompassing all three of dotmatrix studios’ mission elements (collaboration, value project, build community), DMP was an experience design challenge both online and off.
dmp banner greensboro

Offline, we crafted the shows to be experienced by the audience as a mixture of a studio recording, a video shoot and a live show, which got the locals talking and showing up in numbers; online we posted high quality documentation of the shows and promoted both the documentarians and musicians as if they were all rock stars.
dmp-site

The goals of the project were large (win grants to pay documentarians and open a venue were just two), and the commitment exhausting (I carried equipment with the engineers, contributed to designing & hanging show posters, produced the shows, managed all creative collaboration, etc.) and in the end it was just too much to juggle with full-time paid design work. We produced our last show in May of 2010 and imbibed a few tall ones to celebrate a good run of close to three years worth of monthly shows—all through the efforts of a volunteer community of more than 200 local, creative souls.

For the last five years, dotmatrix studios began the slow ramp down from taking on team-oriented projects to individual consulting projects, with me eventually teaming up with a few different shops: Bluespark Labs (where I took a UX Director role for a minute until I felt the itch to try one last time to make dotmatrix work) and my current partner, Analogous. The work has been challenging and interesting—from the startup Knewton.com to FXCM.com to Indiana University Libraries to the Inter-American Development Bank—but priorities change.

It’s A Wrap

Sometimes I look back on where I was in 2005 and wonder if I made the right decision to move from NYC to the south; to leave Silicon Valley offers on the table in order to startup my own business. I have zero regrets. While ten years removed from being employed by a large company might make it difficult to transition back into a full-time product team, too many amazing things have happened to me over the past ten years to think twice about my decision.
family

If you ever have the chance to do your own thing, regardless of the obstacles that lay in your path, be sure to go for it. Take that risk, as life is too short, or as the kids say nowadays, “YOLO.”

Dislike Within The Facebook Ecosystem

facebook dislike

The recent announcement of Facebook “working on” a Dislike feature could read like an overstated talking point for a seemingly simple update. I mean, design an icon, add it to all posts and register the count, right? What could be so involved to make this such a “working” situation?

Brand integrity and the bottom-line would be the short answer.

When Like Is >> Love

This “minuscule” feature update has probably been tossed between Facebook upper management for a while now, but not due to a “slow to respond to feedback” perception as many users might believe.

The Like behavior has become ubiquitous with the Facebook brand; it’s one of the core experiences we have when when using the product. I’d imagine management realizes that Like has transcended the brand itself, becoming a pseudo-proprietary eponym for all likable (favorite, best, etc.) interactions online. Even offline the term “like,” used in practically any context, has become the a collective linguistic signifier for the upturned thumb, which equates with the Facebook brand.

That’s a valuable interactive component for an online product; as valuable as asking for a Kleenex instead of a tissue. As my former colleague Dan Saffer describes it:

[…] Microinteractions, when done well, can become Signature Moments that are associated with the brand. Facebook’s “Like” is one great example. […]

Facebook isn’t going to disrupt such brand DNA haphazardly. While Dislike may make perfect sense to the user within the context of registering a quick opinion on a post, it introduces tangible degrees of dissonance to the purity of the brand as a diametrically opposed interaction. Disrupting such a key aspect of the brand—with the potential of turning the simplicity of a Like experience into something heading in the direction of the faceted rankings of posts on Buzzfeed—takes a measured approach.

So yes, it’s a simple execution, but not from a brand strategy perspective.. and even more so when considering the bottom-line.

Adding Up The Ads

facebook like ads

From individuals (artists, musicians, politicians, etc.) to businesses (phone companies, restaurants, airlines, etc.), people have recognized the value of a Facebook presence, understanding that a high numbers of likes on a Page can provide:

  • a perception of credibility in the field, such as a musician with a large following looking to book gigs with established venues
  • an avenue for traditionally non-sexy, non-communicative brands, such as an AT&T, to get placed in the news feed of users

This understandable path to credibility and gained attention has become a strong revenue model for Facebook, as in-product advertising—presented to highly targeted users—drives conversion to Liked Pages.

So where would Dislike begin and end in this business model?

I would imagine that if Dislike is rolled out to all posts and comments, users would expect the ability to downgrade everything else as well. AT&T’s 5M plus Likes looks “impressive” when positioned alone; add in the context of, say, 35M dislikes and… “Houston, we have an issue here.”

This is the fine line that Zuckerberg tows.

One persona—the daily user of Facebook that posts to generate conversation with friends and/or the general public—would thoroughly enjoy the ability to provide “truth” to everything; from politicians to corporations to local restaurants to individuals. But revenue providing personas? They’re not going to enjoy catching one-to-one cancellations of hard-earned/paid for Likes.

It’ll be interesting to see how Facebook handles the different interests in play, though I have a pretty strong feeling that they’re going to lean in the direction of catering to the user base who parts with cash. Call me crazy.

A Wrench In The Algorithm

facebook algorithm

Lastly, and potentially most interesting to me (aside from people de-friending people left and right for dropping explicit, negative, system feedback such as DISLIKE!), is how the behavior of Disliking would affect the News Feed. Here’s how Facebook positions its purpose:

The goal of News Feed is to deliver the right content to the right people at the right time so they don’t miss the stories that are important to them.

Facebook designed the approach for how to filter content based on user behavior, and then codified these specific choices it into an algorithm. Of course, no one will be 100% happy with the results, but that’s to be expected and quite honestly, we’re not dealing with brain surgery here. As long as the context of inclusion feels like it’s in the ballpark, user won’t complain… too much. That said, the behavioral decisions are somewhat obtuse at times. Here’s the approach (from 2013) with my comments in bold:

  • How often you interact with the friend, Page, or public figure (like an actor or journalist) who posted – Do I really want to see more content from someone I negatively interact with? Isn’t there a good chance that content hidden might be more appropriate?
  • The number of likes, shares and comments a post receives from the world at large and from your friends in particular – Who’s to say I consider my friends as equitable partners in my world view? If one of my friends posts surfaces more often, and I explicitly interact with them, does that actually mean I want to do the same down the road?
  • How much you have interacted with this type of post in the past – Can the system recognize “type” beyond content types of video and music, and explicitly understand the difference between politics and sports? Or more specifically, left vs. right or Jets vs. Patriots?
  • Whether or not you and other people across Facebook are hiding or reporting a given post – If I hide or report a post, the post is gone. Does the algorithm look at the “type” I reported and draw conclusions about future “similar” content?

Now toss the Dislike feature into the mix. Am I disliking my friend’s contextualization of a post, more so than the post itself? If I’m passionate about the subject matter, I probably wouldn’t want to see less of it based on a dislike; I may want to dislike more of the same to remain vigilant with my position and potentially impact other people’s perspectives. It’s a tricky balance.

While I’m constantly berating myself for the amount of time I spend on Facebook—tending to draw some pretty ill conclusions about what drives our society’s collective addiction to connecting, pontificating and arguing—I have to admit that this evolution intrigues me. Don’t agree? Like this post and I’ll argue my position on your wall.

New Product Launch: IDB Project Mapping

idb project mapping

As we wrapped up the redesign of the IDB website, the team reached out to see if Analogous could assist with a redesign of their mapping tool, MapAmericas.

MapAmericas was used as a secondary mechanism for IDB employees in the field to input project data, with the additional benefit of geo-targeting projects and their corresponding results. The public-facing map featured every project across Latin America, introducing users to contextual information within a click. The concept was useful, but the interface segmented projects by country, had limited filtered views and the iconography overlapped and confused navigation. With a low adoption rate by all users, we had our work cut out for us.

As I wrote up a heuristic evaluation of the user experience, the design team researched mapping solutions out in the wild to review the variety of visual and experiential options in play. After a review of all our findings, we settled in on an overarching approach:

  1. The project map couldn’t exist as a destination point in the global navigation. While it had the potential of being be a smart, useful visualization of regional projects, it just didn’t fit the context of how users browse or might use it. We decided early on that the map needed to be accessed contextually from project, sector and country pages while providing avenues to return to the same templates when appropriate
  2. There’s a large amount of structured data found on project pages, but only structured in terms of the information design of the page, which allowed for great readability. We needed to free up data as explicit attributes for filtering purposes to navigate within the map interface.
  3. The overlap issue needed to be address, so we decided upon a clustering approach for projects living in nearby proximity at high-level views, and situations when exact geo-coordinates overlapped. We also created two tiers to the map—a pre-project view and a project/results view—which allowed for different behaviors specific to the context of the current task.

The resulting experience now allows users to view projects across all of Latin America, but subsets particular to persona interests. So an Education Minister in Bolivia can view all education projects in her country, and then broaden the results to show education project across the entire continent, allowing for better context. Similarly, data points such as total cost and phase were made available as filters, so that same user can now view projects in the approval phase that cost $50M-$100M. These were simple, yet powerful changes to the browse paradigm.

Once the user drills down to a particular project view, results are now explicitly tied to the project, whereas previously, results lived within their own view with no discernible relationship to a project and/or a mechanism to get more project information. The cognitive result is an immediate processing of scale—how many outcomes were produced by a single initiative.

A decent amount of code tweaking remains in order to get the experience exactly right, but that should occur over the next few months. Once we have usage numbers, I’ll update this post.

RETHINKING: Planet Fitness Mobile App

planet-fitness-review

As a member of Planet Fitness for over seven years now, I have to admit that I had not once thought about the utility of a mobile app. My personal context scenario is focused on making it to the gym first and foremost, then jogging for 20 minutes, lifting free weights, cooling down with cardio and dragging myself home.

But that’s my routine when I’m casually hitting the gym; for those brief stretches when I’m serious, my routine becomes highly structured and dependent on there being low traffic on both machines and weights. That made me wonder—could a mobile app actually assist me attain my goals?

The Current State

When I imagine the potential for a gym app, I think of an experience that’s going to assist me with my fitness goals and the close context surrounding that primary set of scenarios. Planet Fitness doesn’t view their app in the same light, as the focus is centered around marketing their business to the general public, rather than assisting a member in their workout. 90% of the navigation leads to sections that could be the responsive output of a marketing site for a mobile devise.

planet-fitness-mobile-app

From a list of local gyms to member benefits to a PF store, the marketing navigation clouds potentially useful member interactions. Even the “Planet of Triumphs” section—one with an authentication requirement of members—is set up for members to help market the PF brand by sharing our workout stories. In a world of blogs and social media, why exactly would I or any other member waste time with this feature?

The responsive version of a well designed site should be able to cover these requirements, as potential members will most likely end up there via organic search. Why would a non-member download a branded mobile app? It should be built with highly specific goals of members in mind by presenting highly specific member features.

Highly Specific Member Features

Once you get past the marketing noise, there is one section geared towards supporting member workouts: the My Fitness area. The primary features include:

  • Scheduled Workouts: Set up a cardio or weight-lifting workout, choosing from a list of activities with times, effort levels, weight, number of reps & sets etc.
  • Log an Exercise: If not working from a predefined calendar workout, members can document their workouts
  • Start Your Exercise: Countdown based on in-the-moment choice of exercise and all its details
  • Sync a Wearable: Link a Fitbit or Jawbone fitness tracker to the details of an exercise
  • View Reports: Goal Progress, Day/Week/Month reporting (hours, exercises, calories burned)

Currently, I bring a workout calendar on two sheets of paper to the gym, covering each day of the week for two weeks, with weight, rep and set info. I have to admit, it’s somewhat annoying to walk around with it and even keep track of it at home. PF has made the process of creating a calendar with both cardio and weight specifics super easy:

planet-fitness-mobile-app2

PF could’ve stopped there, but they dug in deeper to support member needs, adding the ability to sync with a fitness tracker and review progress reports automatically generated by previous workouts. These features create closure around the context of workout goals—the reason we all drag ourselves to the gym in the first place.

planet-fitness-mobile-app3

This set of features should be the absolute primary purpose of the app. Aside from the rare need for finding a PF when on the road, members shouldn’t even see the corporate marketing content. That said, PF is missing out on supporting one huge scenario, core to the gym workout experience.

A Packed Gym

How many times have you shown up to the gym and had to wait for a treadmill or exercise bike or a series of free weight stations, throwing off your schedule? What about when you’re just getting back to the gym and simply want less people around as you try to reach a 15 minute mile? Could the mobile app present data to help with these scenarios? I think so.

What about a visualization on the main screen that presents the current capacity of the gym? 40%, 80% full, etc.? Since PF members use bar codes on a keychain to check-in as they enter the facility, the entry data is already captured. When signing up for the “Planet of Triumphs” feature on the current app, a member enters the same bar code ID# to be verified as an actual member, so the two systems already speak to one another.

In a perfect world, members would check in AND out with their cards, creating conclusive data re: time spent in facility. This would allow for explicit visualizations of traffic in the moment, and reporting of historical trends for, say, a Friday night or a specific holiday. Another option would be to tap into the phone’s GPS to approximate when the member leaves the gym, though that might have unintended consequences regarding privacy issues. It may even be worth it to PF to incentivize checkout behavior by members, but even without exit data, PF could present occupancy patterns based on check-ins at certain times of the day. With more than enough employees roving the floor, they could also manually input % of cardio and weight stations used on a half-hour basis.

These are the scenarios that matter. Get me in the door, no waiting, into my routine and help me accomplish my goals. Develop that app, strip away the noise and members of a $10 per month gym would gladly participate in the best type of marketing corporate could ask for: word of mouth.

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.

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.

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.

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 presented multiple Streamer tasks in one interface and was a centerpiece of the product suite while the merger was being 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.

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 break 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.

NBC: Kinda, Sorta, Somewhat Getting Web 2.0

nbc

Back in February, NBC made a completely bonehead business move by making YouTube take down the hugely popular video short Lazy Sunday. My instant response was to fire off a salvo at NBC for being old media ogres (NBC: We Get Web 2.0… Sike!) and not working within the limitless parameters of the web to strike a business deal that suits their needs to protect their copyright, while allowing us to continue to enjoy their content when we want and how we want.

Well, today NBC announced that it’s embracing a few of the ideas I previously lobbed into play:

[…] “Under the deal, YouTube will create a separate channel for NBC video, so that visitors can easily pull up the half-dozen or more items that NBC plans to offer at any given time. It will be similar to channels that other companies, filmmakers and everyday users create. […] NBC and YouTube officials acknowledged the possibility that fans will reject the clips if they appear simply as promotions, but YouTube co-founder Chad Hurley said fans would likely embrace the video if it is compelling and not available anywhere else.” […]

Promotional video is somewhat of a start — I suppose you can’t expect major change from a major television network without them testing the water first. Give the experiment a few months; if uptake begins across numerous types of unbundled content, I’m sure they’ll be banging on YouTube’s door, attempting more creative ways to “let” people upload their content.

Affecting The Interface

In terms of the user experience, I only ask one thing of YouTube: please refrain from creating a pulldown of “channels” on your interface.

Asking people to assign ripped video to a “media channel” in the upload process makes sense:

  • It alerts you (YouTube) to content that needs to be assigned a “shared monetization flag” and
  • It automatically assigns network metadata to the video object to help people finding content they desire

Balancing the two-way participation of a user base with the business opportunities of old media is a difficult conversation to manage and execute, for if you transform your main interface too far towards the navigation of paid-for, primary channels, the entire participatory, community vibe will begin to deteriorate.

Remember, your brand is YouTube.