Case Study: Eyeweb Platform

eyeglasses

The term “e-commerce” isn’t used in 2015 because online retail is a ubiquitous notion to the market. That wasn’t the case in 1998.

Six long years after Book Stacks Unlimited went live and three years into the early days of both Amazon & eBay, a large segment of the population was still wary of making purchases online with their credit cards.

This was the climate when Pierre Fay walked into the Organic Online office in New York with a big idea.

Pierre’s goal was to change the way people discovered fashion & prescription eyewear—moving from traditional brick and mortar browsing to a complete online experience. Just months prior to signing with Organic, Pierre struck a deal with Lenscrafters to host an Eyeweb co-branded kiosk, which would allow potential customers to precisely measure their facial/pupil structure and then capture an image that would be uploaded to the cloud (yes, we had “clouds” in ’98).

Upon returning home, the user would log-in to Eyeweb.com, browse an inventory of thousands of frames, virtually try them on against their freshly captured head shot, and ultimately, purchase the product from the comfort of their home.

Eyeweb try-on interface
Eyeweb.com try-on interface

I was assigned the project under the mentorship of Organic’s Chief Information Architect, Robert Fabricant, as this was my first foray into IA after shifting over from art direction at another interactive firm. The work was intense in terms of getting up to speed in how to design a search and discovery mechanism around SKU-based inventory—rich with descriptive attributes that could drive our frame advisor engine. Between Robert’s direction, and the amazing collaboration between the Organic team, I settled in for an interesting ride.

We started on the ground floor, as the branding was developed from scratch via a thorough brand exercise with Pierre. As Fanny Krivoy and the visual team led that process, Robert presented our organizational concepts through high-level diagrams, and as we garnered consensus, I defined the organizational principles, recall methods, hierarchy in the interface, navigational affordance, widget schematics, etc.

Eyeweb.com homepage
Eyeweb.com homepage

With a boutique focus on one retail object, Eyeweb allowed us to draw focus on the homepage to specific frame-centric features, and then divide the global navigation between those features and secondary support locations. settling on the right nomenclature was important, as we were transitioning people from their mental model of high-end, real-world shopping to an online experience. Areas such as the Personal Collection needed to impart a white glove feel they were used to experiencing in person.

Web design challenges in 1998 were plenty, but the most ubiquitous—regardless of project type—were limited resolution display sizes (more than 70% of the market had 800×600 px wide displays or less). As such, we had strict constraints when presenting information within the limited real estate available. This not only impacted the structure of the active elements in the interface, but it influenced how much white space we used to compensate for crowded aspects of the interface.

Search interface
Personal collection interface

As the user made their way down to the frame detail, we featured the product image prominently, building the actionable affordances of the interface around the frame itself. Before time-on-page was an understood analytics term, we shot for stickiness, which doesn’t seem pertinent in the retail world, as the ultimate goal is to convert purchases. But stickiness also applies to users easily moving from one interesting product to the next in their browse > purchase lifecycle, which increases the potential for conversion.

While we didn’t have the capability to present other frames dynamically via collaborative filtering—or even a simple (in 2015 terms) in-line attribute co-occurance driven display—we knew that prominently exposing frame attributes was important for sparking secondary discovery.

Frame detail interface
Frame detail interface

When we began working on the most compelling form of discovery on the site, the Frame Advisor, Pierre expressed that he wanted something remarkably different, so different is what we targeted.

My sketches began by crafting an explicit linear narrative, using multiple choice questions centered around the notion of style and functional preferences, leveraging the same set of frame attributes exposed on the detail interface and personal collection—to return a set of frames.

Once we left Planning and landed in Design, we took that architectural foundation and built upon it with our visual designer evolving the explicit nature of the questions & answers to be represented as an esoteric, implicit input process, using the grid pattern that we established across the site, but in a way that completely relied on visual clues that mapped explicitly to SKU attributes, moving the user through the recommendation engine.

The result was compelling and different. If this was designed for 2015, I’m positive that the experience would become immediate, viral Facebook fodder.

Frame advisor interface
Frame advisor interface

With the co-branded kiosk, we were working with a much more task-based interface with interesting environmental considerations, as the user was operating in public and needed to precisely map specific areas of their face for the system to prep their image for the try-on interface. We honed in on an overly simplistic interaction model and interface, with zero extraneous copy or features so any shopper could successfully use it. The last thing we wanted was visible frustration from the least tech savvy users, surrounded by other potential customers.

We carried through the design patterns from the site for both brand and navigation consistency, and designed the java interface to present a simplified mechanism for dragging points into position. The step-by-step process was clearly labeled and overly simplistic, providing easy to find navigation both forward and backward in the process. Yes, we wanted conversion, but not at the expense of usability.

Eyeweb / Lenscrafters kiosk
Eyeweb / Lenscrafters kiosk

17 years ago we created a true platform—one that had interfaces used both in public and in private, and leveraged the then magic of cloud immediacy to provide a compelling experience. There aren’t many platform experiences that survive over a period of 17 years, and while our Eyeweb experience isn’t one of them, some variation of the business is still operational, so we must’ve done something right.

Silicon Alley circa 1998; the halcyon days of agency product design and development.

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.
mmfa deliverables

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.
mmfa wireframes

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

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.

idb-maps-interaction-model

project filter wireframe

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.

project view wireframe

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.

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