• unstoppablerobotninja.com/entry/fluid-images
• alistapart.com/articles/fluid-images

Share on Facebook

(Reposting from onemozilla.org, so planet.mozilla.org readers can follow along!)

With 200+ sites, 150 blogs and many other various web properties, the Mozilla universe is massive and can be difficult to navigate.

Roughly a year ago, a few Mozillians (David Boswell, Potch, Sean Martell and John Slater) got together to come up with a solution to unify all Mozilla properties: a universal tab that, when clicked, would expand to expose navigational links across all key sites.

A lot of you have probably become pretty familiar with the grey tab in the upper right corner of Mozilla sites, and from a branding perspective it’s been helpful identifying Mozilla properties. We’re excited to roll out the next phase of the universal tab as part of the One Mozilla project.

Share on Facebook

A few months ago we worked with a fantastic company, Gazehawk, on creating and implementing a self-contained user test with eye-tracking technology. Typically, a lot of hardware and expensive software and user recruitment are needed to run these studies. Gazehawk’s technology made it possible for us to do things quickly and cheaply and we got outstanding results.

What is Eye-Tracking?

Eye tracking is the process of measuring either the point of gaze (“where we are looking”) or the motion of an eye relative to the head. Gazehawk uses software to track eye positions and movement around areas of interest (AOIs) on webpages. Our users all opted into this brief study (not at all in conflict with dnt.mozilla.org).

When you combine eye-tracking with other design research tools, you literally come to see things differently. Here are the results of 3 of our studies.

Heatmap

Study 1. “Meet Firefox” and “Know Your Browser” videos – First Run Page

9 successful tracks (we had more testers, but at a certain point their studies become contaminated, so we only report on successful tracks)
31 survey responses (all users were given a pre-survey and a post-survey)

This page is shown to users when they download the full version of Firefox and launch the browser for the first time.

What we observed:

1. Video Content - 5 of 9 tracks spent less than 30 seconds on the page, indicating that they didn’t finish the video. The written survey responses indicate a similar rate: of the 31 people who answered the question, 18 reported not watching the video.

2. Traditional Content -  The “Know Your Browser” section did resonate with our user participants, receiving more clicks and average time-in-area. User participants praised the accessibility and ease-of-use of this section. The most common complaint expressed is that users already felt educated about the features highlighted.

3. Marketing Flare - Most users did not look at the newsletter sign-up option, a few looked at the icon, but only one user clicked on it. The other two promotions, Make Your Mark and Get Firefox for Mobile buttons were similarly unnoticed.

The Takeaways:

One-or-the-other Pattern - The biggest thing we learned is that users tended to choose one or the other, but not both content experiences provided. This might be occurring because Meet Firefox and Know Your Browser seem to be similar, which makes pairing them less useful.

Doesn’t Hurt, Doesn’t Help - As for the marketing flare, it doesn’t hurt the experience, but we might experiment with a single promotion, instead of three promotions to see if we could increase conversion. That said, users could walk away with an ambient understanding based on the iconography.

Heatmap

Study #2 – What’s New (w/Fabulous Tabs! promo) Page

20 successful tracks
46 survey responses

This page appears when we want to appear, usually alongside of an update, but with the rapid release program we’re experimenting with not showing it to users.

What we observed:

1.) Error Messaging - The Flash Player error message was a great success. All user participants looked at it, and though the amount of time spent on the area of interest (AOI) was relatively small (about 4 seconds), it was long enough to indicate that most people read the message.

Moreover, survey responses indicated that this was one of the main things users took from the experience. The “x” button to close the Flash Player update message received more clicks than anything else on the page.

(Note: We debated including this error message, because it’s not really part of the design we focus on. We ultimately did include it because the average user will need to update her Flash player.)

2.) Main Content - Participants focused heavily on the “Fabulous Tabs” area, particularly the “switch to tab” and “panorama” text. The focus of the user participant clicks were the “Learn More” buttons, making it appear that the unique graphical treatment was successful at engaging user behavior. The App Tabs section was less noticeable, likely because it isn’t as close to the pictures as the other two  “Lean More” buttons.

3.) Marketing Flare - Much like the First Run page, participants paid less attention to this section–45% looked at the email, and both buttons had an average view time of 2.4 seconds.

The Takeaways:

One improvement might be to change the location of the “App Tabs” description, but overall the layout works well with the user base.

As for the marketing flare, it doesn’t hurt the experience, but we might experiment with a single promotion, instead of three promotions to see if we could increase conversion. That said, users could walk away with an ambient understanding based on the iconography.

Study #3 – /firefox/fx  page (Panda Version)

21 successful tracks
57 survey responses

This page is shown to users who have the most recent version of Firefox. If a user is on an older version, she is routed to a different experience focused on downloading the latest desktop and mobile Firefox.

What we observed:

1.) Panda - The Panda was fabulously successful at drawing attention to itself and to the spinning wheel, although a few participants reported being confused as to the relationship between Firefox and the Panda.

2.) Spinning Wheel - The spinning wheel was well received as a visual, although about 35% of participants didn’t realize they could interact with it. Participants also occasionally complained that they didn’t have a way of getting information about  features without using the wheel.

3.) Yeti- One item of note is that the little white man in the bottom right got no attention whatsoever — less than a third of users looked at him at all,  and the average glance length was 0.3 seconds. I think that people  probably could not differentiate him well from the background –  ordinarily we expect people to glance at images of human faces (or  things like human faces) intensely.

The Takeaways:

Explore ways for people to both enjoy the spinning wheel and access the  information it contains in a predictable fashion. Also, change the  coloring of the little white guy or strengthen his outline.

~~~~~~

So that’s a wrap, but I’ll follow up with another post that covers at what we’ve done to use this research and improve the experience for our users across all three pages.

Big thanks to Gazehawk’s Brian Krausz & Lionel Barrow. I cannot thank them enough for how they sheparded us through the process and helped me craft the tests, pre-survey, and post-survey that maximized our results.

Share on Facebook

from left to right -> mostly above the fold & the entire page (aka full monty!)

A quick IA inventory showed us that the page:

• presents 73 different units of information
• provides users with an at-a-glance hover experience called, “Top Features”
• provides users with a drill-down navigation experience led by icons at the top of the page
• provides users with a “back to top” navigation experience per section (exception the final section)

The information is organized by:

Top Features

• Super Speed
• Stay in Sync
• Easy Customization
• Awesome Bar
• Intuitive Interface

and by 7 Sections

• Improved Interface
• Browsing Made Easy
• High Performance
• Advanced Security
• Powerful Personalization
• The Cutting Edge
• Universal Access

Here’s What’s Inside the Sum of the Sections

(note: do not fear, it’s a lot of information!)

Improved Interface

• Tabs on Top
• Firefox Button (Windows and Linux)
• Bookmark Button
• Simplified Reload/Stop Button
• Home Button

Browsing Made Easy

• Awesome Bar
• Improved Interface
• Tabs
• –App Tabs
• –Switch-to-Tab
• –Organize your Tabs with Panorama
• –Reopen Closed Tabs and Windows
• –Smooth Scrolling

Stay in Sync

• Password Manager
• Form Complete
• Pop-up Blocker

Easy Search

• Integrated Web Search
• Search Suggestions
• Hundreds of Search Engines
• Smart Keywords
• Location-Aware Browsing

Session Restore
Spell Checking

Get Organized

• One-Click Bookmarking
• Tags
• Library

Search and Find

• Download Manager
• Naturalized Look & Feel
• RSS Feed Reader
• Offline Browsing
• Firefox Support
• Full Zoom

High Performance

• Super Speed
• Hardware Acceleration
• Creash Protection
• Real World Performance
• 3D on the Web

Advanced Security

• Instant Web Site ID
• Private Browsing
• Do Not Track
• Content Security Policy
• Anti-Virus Integration
• Forget This Site
• Securing Website Connections
• Anti-Phishing
• Automated Updates
• Parental Controls
• Clear Recent History
• Secure Updates
• Anti-Malware
• Outdated Plugin Detection

Powerful Personalization

• Add-ons Manager
• Dress Up Your Firefox with Personas
• Customizable Interface
• Beyond Add-ons
• 100,000s of Ways to Customize

The Cutting Edge

• Newest Web Technologies
• Parser
• Enhanced File API
• Websockets
• IndexedDB
• Stylin’ Pages with CSS3
• Upgrading Forms
• Next-Generation Graphics
• Audio API
• WebM and HD Video
• Scratchpad
• Multi-touch Support
• Web Console

Universal Access

• Fabulous Fonts
• The Language of Firefox
• Better Text Rendering
• Emphasis on Accessibility
• Universal Customization

As part of the design research phase for rethinking /features, we did some quick user testing through usertesting.com

User Scenario:

Imagine you’ve heard about Firefox and you are evaluating it to download to your computer to replace your current browser (Internet Explorer, Safari, Chrome).

User Tasks:

1: Look at the page for five seconds. Then look away and answer these two questions (without peeking!):

• What do you remember?
• What do you think the page is about?

2: Look for a feature called location-aware browsing. How long did it take you to find it? Was location-aware browsing located in the category you expected?

3: If this wasn’t a test, would you have read the full page? (if not, why not and how much would you have read?)

4: Looking at the page, if you could improve the experience on this page by changing one thing, what would it be?

5: Download Firefox

User No. 1

1.) What would have caused you to leave this page?

• If the look and feel of the browser was outdated

2.) What other ideas do you have about how this page could be improved?

• As I mentioned in the video, the page is too lengthy. It has to be concised

3.) What did you like about the page?

• It highlighted all the features of the browser, some which almost all users are aware of like pop up blocker and tabs retrieval in case of browser crash

4.) We’re all ears! Share your final thoughts & help us improve Firefox

• I believe the most imperative feature of a browser is the performance. If it is stable enough, it should be great to use.

User No. 2

1.) What would have caused you to leave this page?

• Had I been confused about how to download Firefox or if the navigation was confusing and I needed to go to a different page to download it, I would have left.

2.) What other ideas do you have about how this page could be improved?

• As I mentioned in the video, there is a lot of text to be read. I would find ways to reduce the amount of text and make the information available in other ways. For example, you could provide links that go to other pages or that reveal more details without leaving the page; that would be far better than putting so much text on the page that it’s difficult to skim the headings.

3.) What did you like about the page?

• The download button was easy to find. I also liked the six blue icons representing some of the most important features. Both the button and the icons were at the top of the page.

4.) We’re all ears! Share your final thoughts & help us improve Firefox

• I’ve said it above and in the video, but it’s important: remove the clutter from the download page so visitors can focus on what’s most important. In the words of designer Dieter Rams, “Less, but better.”

User No. 3

1.) What would have caused you to leave this page?

• Possibly too much text ‘might’ have caused me to leave.

2.) What other ideas do you have about how this page could be improved?

• Lessen the amount of text, at least on the landing page.

3.) What did you like about the page?

• I liked the features at the top with those blue icons. Those were accessible for some reason, easy to jump to, and well-presented. I also liked the other features I skimmed over and read about, as I wasn’t aware of some of those.

4.) We’re all ears! Share your final thoughts & help us improve Firefox

• I like that Firefox has all those features, but I think from that landing page you should try to set it up in a way so that it’s more condensed..in other words, try to have like ‘chapter’-type links so that you ‘could’ research it all if you wanted, but this type of setup would be better suited imo because it would make the landing page more simple/accessible. Also, it might be kinda nice if you put the version # on the 1-2-3 step download page. Other than that, my experience was great.

User No. 4

1.) What would have caused you to leave this page?

• Not knowing which version of firefox I would be downloading by clicking the download link would have caused me to leave the page.

2.) What other ideas do you have about how this page could be improved?

• A list of the major features towards the top of the page for quick reading with the existing paragraph style details below that for in-depth reading

3.) What did you like about the page?

• Very detailed about all the cool features and specs one might want to know. Also I enjoyed the wording like “awesome bar” and “awesomeness”

4.) We’re all ears! Share your final thoughts & help us improve Firefox

• I stopped using Firefox a while ago because it crashed all the time and got increasingly slower with each update. Im sure there are a lot like me out there who would love to read that the previous crashes and slowness have been fixed, so maybe a “welcome back” link that users who have tried firefox before could click to see the improvements.

User No. 5

1.) What would have caused you to leave this page?

• the browser not offering the features I wanted.

2.) What other ideas do you have about how this page could be improved?

• Break it down via navigation buttons or display summaries and key features in the summary.. with a link to view more. The info is too exhaustive in my opinion.

3.) What did you like about the page?

• I love the simplicity of finding the download link. That is the most important feature for most people. Everyone needs a browser, so providing the ability to quickly find and download one is essential. Kudos.

4.) We’re all ears! Share your final thoughts & help us improve Firefox

I have used firefox for awhile. I would love the ability to see a print preview function without having to download an add-on. The ability to tell firefox anytime I want to print something, it automatically goes to print preview first (like a setting), would be awesome for me.

 Conclusions

•  Keep it simple.
• Improve search and discovery for individual sections.
• Lose weight by shedding words.
• Improve overall navigation.
• Firefox download button should follow the user, because it’s useful!

We’ll be working on improving this page using this and other design and data-driven research, what would you like to see? How would you re-envision this page for Firefox users? (share examples!)

Share on Facebook

William Reynolds, User Engagement Associate @ Peace, Love & Firefox Event #SFPride
Photo by Melissa Shapiro @shappy, Mozilla Firefox PR & so much more!

Spin the Wheel!

Sometimes user experience design is the result of taking chances and creating experiences that are unexpected, catching users’ attention and hopefully not causing an annoyance, what follows is one such instance!

Looking for Low-Hanging Fruit

My team and I do a lot of work on fine-tuning user experiences around the Firefox download funnel. Sometimes we do big redesign projects, starting from scratch to test out new waters, but often we look for low-hanging fruit, making the tiniest tweaks to learn (and share) what gets big results. There’s magic in making small adjustments and testing out the simplest thing that could possibly work.

In this case, we were working on ways to encourage Firefox users using older versions to download the latest version. Our goals:

• increase downloads of the latest version of FX
• target users of 3.6 and below (let’s get these users onto a modern & safe web!)

We want to provide users with the best, latest and greatest that the web has to offer, but more importantly, there are also security vulnerabilities that we want our users to be protected from and increasing issues around privacy that we want our users to benefit from too. It’s about helping out our users and not being overly intrusive in the process.

2 Weeks Post-Tweak

We recently released an upgrade campaign with a persistent message (here’s an example of a persistent message on support.mozilla.com) that appears only to users on FX 3.6 and below. We A/B test everything possible, so we released two versions of this messaging:

• Version A, appears to the user slowly dropping down from the top of the screen
• Version B, appears to the user slowing rising up from the bottom of the screen

Version A. Top

Version B. Bottom

Results

Results from the first 12 days of the campaign:

• Total # of Visits, 83,797
• Total # of Page Views, 203, 269
• Total # of Downloads, 62,906

• Version A. Upgrade Top, 26,262 downloads, converting at 76.36%
• Version B. Upgrade Bottom, 36,644 downloads, converting at 74.17%

Next Steps

We’ll be consulting with our metrics team to determine which experience wins based on statistical relevance and then we’ll probably test out an alternate design (learning what is most effective, from color to iconography), and then we’ll hone in on the nuances of the copy.

Credits: Steven Garrity (silverorange), Chris Howse (@no_wait_yes), Laura Forrest (@lauraforrest) & Mozilla Firefox Product Website Team

Moar!

Read Laura Forrest’s post on increasing newsletter conversions

Share on Facebook

Some user behaviors make clear sense, while others can confound your expectations. Overall, however, designing a complete experience around a conversion page is best understood taking these 3 “Ss” into consideration:

1. Somewhere—Users get to conversion pages from somewhere, so go there first!
2. Superficial—Good looks matter. Users respond to a particular aesthetic, so try different designs!
3. So Much More—Users engage deeper through community, so get them connected to you and each other! (FYI a Facebook Fan Page is a great ecosystem & it’s free)

Okay, so few weeks ago I posted about a redesign I’m working on for a lead generation page. That project began with a single page, but preliminary outcomes further demonstrated that we needed to step backwards and design for an entire experience, which is where Somewhere, Superficial, and So Much More came into play.

I’ll explain!

First, our initial A/B test is over:

• Good news—we didn’t break the existing conversion rate.
• Better news—we raised the conversion rate a little bit ;-)
• Great news—we blew up our Facebook Fan page by designing a thoughtful “Thank You”! (*We increased fan acquisition from 3 fans per day to 30+ fans per day)

Second, we’re embarking on Phase 2. of our test plan, so let me share what that plan looks like, because A/B testing can be delivered in a number of ways. Here is the 3-phase method I recommend and that we’re currently using:

Phase 1.) Update, Don’t Break

(This phase is optional, in the project I’m working on we did need to update an older design before we could effectively move forward with testing.)

• Update the design to a higher standard that better expresses the brand
• Don’t break existing conversion (50 v. 50 split test, confirmed by a 5 v. 95 follow-up)
• Phase original design out completely

(Current design in the wild, original design)

Phase 2.) Design Different Concepts

• Create 2 more well-informed aesthetically different designs
• Conduct user testing (DIY-style works well!)
• Release new designs into testing cycle in increments (10 v. 90% to start)

(Potential design to test)

Phase 3.) Optimize One

• Select the “winning” design from the 3 that have been tested
• Optimize the winning design with A/B testing of the smaller elements on page (copy, image, steps, etc)

(Potential design to test)

Third, as we prepare for our next test, which will involve 3 very different designs, here are things we considered about the current experience to make sure we covered “Somewhere, Superficial, and So Much More”:

Traffic Sources—

It’s important to learn about where your users are coming from; this is the first step to take in order to reduce your bounce rate.

Are your users coming to your site after clicking an ad? Are users coming to your site to learn something, or have they accidentally gotten there, is the message seductive, on target?

User Testing—

User testing doesn’t have to be expensive, drawn out, or complicated. Do informal (or formal if you can) user testing to gather feedback on the different designs before you release them into the wild.

Form Friction—

At the heart of every conversion page is a form. Determine what variables can be tested, and what variable make sense to test. Some form friction is good!

Let me share an example, for us, it seems like “phone number” is an easy variable to test out. But, it turns out it’s not! While we might get more conversions by taking that element out of the form, we would also open ourselves up to less qualified leads, which we don’t want and also aren’t equipped to scale for. (*Consider your community support team, if you put their phone number on your conversion page can they handle the incoming calls?)

The Thank You—

Never underestimate the opportunity for a second level of conversion that your “Thank You” messaging provides for you to create and facilitate community and further engagement.

Our Thank You experience in our first round of testing, totally changed our approach to how we were looking at this conversion page.

To wrap it all up, throughout this process of redesigning and optimizing a single conversion page (we’ve planned on about 3 months of testing), we’ve really come to understand that the best and most effective lead gen page designs involve an entire experience that goes well beyond a single page. Suddenly, our little conversion page isn’t so lonely or so little.

Take a look at your app’s conversion page, rally your team, and consider the impact of Somewhere, Superficial, and So Much More.

Share on Facebook

Designers do a lot of work engineering the experience of creating compelling sign-up forms for a variety of reasons (joining communities, requesting more information, age-gating verification, etc.). I’d like to take a closer look at how the Thank You page of the conversion flow can be leveraged more effectively for experiences that aren’t necessarily tied to joining a social network.

That said, social networking sites are full of awesome examples where the Thank You jumpstarts the user’s uptake, if you’re:

• Tumblr, you have your user create her first blog post
• Twitter, you have your user find cool people to follow
• LinkedIn, you connect with your email address book
• Meetup, you have your user join a group

But, let’s say you’re a more traditional (perception = less fun) business like a university, can you do more than guide your user towards more descriptive content about the program or services offered (where bounce rate will be high)? How can you make the most of that transaction? How can you parlay the validation “Thank You” into action that can be both inspiring and measurable?

Thank You messaging is not supposed to feel like the awkward end of a first date “Do I kiss him?” moment.

The user has shared her information with you, triggering a response and follow up campaign. She’s staring at the Thank You page, confirming she submitted her information correctly. This is a powerful moment to turn your Thank You into more than:

• a data verification step
• a reiteration of your brand’s identity and tagline
• a jumping off into content (where the bound rate will be high and not super effective in terms of engagement, relationship development, etc.)

Social marketing channels have helped turn Thank You pages into opportunities for secondary levels of conversion where you can experiment with Facebook Fan Page and/or Twitter acquisition.

This brings me back to the use case at hand, while our lead gen page had a number of design constraints, we found that we had a lot of artistic leeway in creating a Thank You page, so we decided to make the number one goal of the page to excite the user to join our Facebook Fan page.

First, let’s look at the original Thank You page, which did include Facebook & Twitter opportunities:

(Note: I apologize for striking through the brand name, my client is a major university and getting approval to share the brand is a bit of a juggernaut.)

Now, let’s look at the redesign of the Thank You page, which puts primary focus on Facebook Fan acquisition v. promoting both Twitter and Facebook equally:

The design:

• Inspired by the idea of the excitement around an “acceptance letter”
• Focused on the fun of university life and community
• Featured access to current students, faculty, and admissions through Facebook

The results:

• Increased Fan Page uptake from 28 fans per week (a consistent rate for one year) to 300+ fans per week (2+ weeks of ongoing data)
• Increased the quality of interactions on the Fan Page, where we were encouraged to see prospects asking questions that were fielded by students, admissions, and faculty
• Increased interaction with blog content, driving traffic to the parent site and making better use of all editorial collateral

As You Design Conversion Experiences Thank You Messaging is:

• Integral—A necessary part of the conversion experience, it’s no longer just a simple hello/goodbye world
• Instantly Gratifying—If you’re testing a conversion experience the results are ongoing and take time. Adding a secondary conversion exercise like Facebook Fan acquisition is an immediate way to leverage (in real time) effects of your messaging
• Social—Leverages warm fuzzies in innovative ways and gets users connecting with one another
• Sticky—The last thing the user will remember about your brand, and can have the added possibility of taking the conversation even deeper into her personal network

Perhaps, the biggest takeaway from designing a great Thank You experience is that the more you can leverage the Thank You, they more you can get your users to connect with your app and with each other the less money you’ll need to spend on post conversion campaigns, marketing, and more.

Thank you!

*Design by my brilliant partners at jjomedia.com

Share on Facebook

For the purposes of this post, let’s define a lead generation as a single page that is:

• usually discoverable when a user clicks on an ad
• a page that precedes a much larger site, or a gateway that refers the user into a larger site
• dedicated to rapidly getting users’ email/personal information for follow-up messaging and/or a trial account
• almost always makes an offer (discount, trial period, etc.)
• not always connected in an obvious way to the larger app’s site (a user might struggle to find it again)

In some ways, a lead generation page, is a micro version of the app’s home page or sales flow.

Companies make substantial investments in Google AdWords (and others) to drive traffic to lead gen pages, so these single page designs have hefty expectations to deliver compelling user experience, design creativity, and form functionality

Lead gen page design is not only short, sweet, and mostly self-contained. It’s also a perplexing balancing act between designing for conversion “the dough” and employing some conventions (e.g. not hyperlinking logos back to the app’s main home page, stock photography, microcopy, offers, etc.) that feel more trickster-like “the spam.”

I’ve divided this post into two parts, 3 tips to follow when designing a lead generation page, and a 3-part redesign of an actual lead generation page that’s currently out in the wild.

Part I. — Three Tips to Follow When Designing a Lead Generation Page

1. It’s OK to Design to Dead-end

Your lead generation page has the sole goal of conversion and should be a well-designed dead-end.

By dead-end, I mean that the submit button and legalese (TOS, Privacy Policy, accreditation statement, etc) are the only clickable elements. This means that traditional navigation items like the logo can be there, but should not be clickable. The design drives the user to complete the form without noticing she’s hit a dead-end (which can feel a lot like spam). If a user finds herself clicking about and not getting results, the page isn’t doing it’s main job.

There are plenty of ways to reduce the user’s desire to click items:

• add a tasteful degree of “dazzle” to the submit button
• decrease the design effects on the logo that would usually look like it was meant to take the user “home”
• place the logo in an unusual area: midway down the page, inside the form itself, or towards the lower right corner
• add texture and effects to the background instead of onto or within the elements like text or iconography
• write great microcopy that answers questions before a user has time to consider navigating away

2. Go Google “Role Play Gaming” & “Online Dating” & Click on the AdWords

Right now, go Google “Role Playing Games” and “Online Dating” and click on the Google Ads. Change your searches up a little by adding your city “new york” or the word “free.”

Social/role play gaming sites like World of Warcraft feature some of the most persuasive user experiences for lead generation design and layout ideas.

Online dating sites like Match, Chemistry, and eHarmony also feature some compelling user experiences on their lead gen pages. I’ve found that they can also inform you about user response (good and bad) towards both overuse and interesting use of stock/posed model photography.

3. Build to A/B Test From Day 1

Design for a lead gen page is never “final.” These pages are among the most important of  your stakeholder’s online properties. They are also among the most easily tested, because your stakeholders are sending planned traffic to them.

• Design for constant optimization
• Test designs out by geolocation, ad campaign, search query, and hundreds of other scenarios
• Determine what equals “success,” the mathematical ratio at which you commit to a split-tested change
• Outline the limits of your design, such as: photo height/width, odd image must-haves and restrictions (e.g. in the use case below we quickly learned that all photos would have elbows showing)
• Identify what is image copy v. html copy (in case your stakeholder wants to optimize the design herself)

Part II. — Use Case: Redesigning a University’s Online Degree Lead Generation Page

For this post, I wanted to concentrate on a single use case, a design for a search query around “masters degree in education online.” I’ve selected this search query for the following reasons:

• Online degrees are heavily promoted with Google Ads (a major investment for many universities)
• Online degrees are perceived as “lesser quality” degrees, so they have a somewhat spammy history
• Online degrees are gaining rapid traction and academic and professional respect
• Many top 25 universities are both entering and refining the online degree space
• I happened to be working on this very challenge

*Apologies, this is a client I’m currently working with (and who I love), so I’ve scrubbed the university’s and program’s branding. I can tell you that it is a top 25 university in the U.S. and they are doing some fantastic, extraordinary things with online learning at the university level. In spite of the strike-throughs I think you’ll see what we’ve accomplished.

It’s important note that the current page (below) has been very successful, so our first job was to not break anything that has been working.

We noticed that:

• Adding the word “prestigious” didn’t make the design feel prestigious, but we felt that the adjective was important enough to provide us with an opportunity to express prestige in a more visual but ambient way
• Aspiring Teachers and Current Teachers were both outlined in yellow, so they looked like clickable buttons, but weren’t, which could be frustrating to a user clicking on them looking for more information
• The color red felt overused and without focus on “action,” there was an added challenge because red is a major part of the university’s brand
• The blackboard made sense, but it added extra noise to the design which was already full of lots of copy competing for the user’s attention
• The design was left justified and didn’t make the best use of the full-screen experience

Design Round #1. — Maintain consistency with the original design elements

For this first revision, we were asked to stay as close as possible to the “control,” we found this challenging, but we did stick to the core elements (chalkboard, teacher, etc.), so we:

• Used different stock photos and incorporated a green chalkboard v. black to add a sense of “friendliness” to the design and make the reds and yellows really pop
• Placed more emphasis on the university and program brands
• Reversed the form color from red to yellow, so that red became our action color and was more balanced by the red in the brand’s logo
• Eliminated the number of items that looked clickable to keep the user focused on the form, but added texture to the background of the page to convey dimension and depth
• Reorganized and tightened up copy
• Added inline validation (which we plan to test)
• Replaced a dropdown menu with two radio buttons and plan to default to aspiring teacher (which is the largest audience) therefore reducing more than 75% of our base user’s need to check off that step
• Added a little “dazzle” to the submit button to make feel like it just had to be clicked
• Added “We promise never to spam you” below the button to reduce fear of sharing information

Design Round #2 — Lose the blackboard and incorporate more authentic imagery

For this second revision, we were asked to try a design without the blackboard and to try to find stock photography that looked more authentic, so we applied some lessons learned around using stock imagery:

• When in doubt choosing stock photography, I recommend going with kids v. adults. Kids are cuter, and it’s easier to get away with a cute child, puppy, or panda, than with an obvious stock shot featuring an adult
• To make the stock photo work better, subtract the original background, integrating it a little more deeply into the design’s background
• Tightened up copy again (I don’t think you can do this enough, and recommend that you revisit microcopy again and again when in the design phase)
  
• Outlined a testing plan, and made the client aware that any photos in the photo space would need to have arms and elbows, which does limit to some extent the types of images we can test

Design Round #3. — Determine restrictions of stock imagery & develop an A/B test plan

For this third revision, we created a formal test plan and outlined restrictions for swapping out images on the page, namely we learned that this particular design will always need to have arms with pointed elbows.

Lead gen pages do a lot of heavy lifting in terms of converting users to paying members, and yet are easily able to slip into the world of spam-worthy design. I’ll report back on this page’s progress as we test it out in the coming weeks and months. Meanwhile, I’d love to hear your tips and tricks, where you go for inspiration for lead gen user experience, and any design debacles you’ve experienced in lead gen page design.

*Design by my brilliant partners at jjomedia.com

Share on Facebook

As a user experience designer, A/B testing is not only something I design for, but something I advocate that all my clients implement. It’s one of the best ways we can both provide users with the best and most effective experience and provide businesses with ongoing opportunities to optimize.

The reality is that like almost anything in design, some do it really well, while others fail in appalling and reasonably smile-inducing ways. Getting caught doing A/B testing by your most unassuming and uninformed user is like getting caught with your pants down—embarrassing.

One of the great examples of this occurred in 2000 when Amazon customers found themselves paying different prices for the same DVDs. Ouch!

This brings me to eHarmony, an online dating site that advertises some well-known commercials on television. If you’ve watched TV in the past year on a TV chances are you know the Dr. Neil Clark Warren mantra I’m talking about;)

Throughout 2009 I found myself in a position where I experimented with online dating for two reasons:

• the experience of how dating companies message and market to people
• the dates (er, yes, I do mean the actual dates themselves)
  

Both taught me quite a bit.

Match, Chemistry, and a handful of others never shocked me with their emails (some of the usernames that men choose did). However, eHarmony stood out of the crowd for a few reasons:

• rapid-fire morning messages, usually between 4 and 8 in a row (like I was under fire from the “matchmaking tool”)
• radically different branded email templates
• really bad subject lines, all different, but with the same purpose

It’s the really bad subject lines that I’d like to focus on, and they relate to the rapid-firing in a row, because together they produced an experience that killed the romance.

Here’s a typical morning from 2009:

All of these messages, though different, say the same thing: “Get to know so-and-so.” They would have been more scanable and less distracting if they used the same subject line emphasizing the users’ names.

I never wanted to share these observations with anyone in my profession, because it’s inevitably tied to a much larger issue of my love life, and was ready to let this go on January 4 at the same time as my subscription ran out, except then eHarmony took thing a step further.

Beginning January 4, 2010, my inbox filled with an even more challenging set of differing subject lines. More challenging because the messaging was all over the place. Was I a user more interested in “activities,” “spark,” “unique,” “common,” or greatness? I felt like it was eHarmony having the problem ordering off a menu of men and not me. I wanted simple and given to me straight up.

Here’s a typical morning in 2010 (*pardon that they’re all in my trash now):

Distracting and disruptive, right?

This kind of A/B testing made me feel more like an experiment and less like a client. Moreover, my perception of eHarmony became characterized by the realization that this was not a thoughtful process that took pride in emotionally connecting, but that it was more of a massive warehouse churning out widgets.

A/B Testing Should Not Be:

• Transparent
• Radical
• Isolated
• Hurried
• Fleeting

A/B Testing Should Be:

Subtle—User shouldn’t be aware that they are being tested.

She should feel like she’s experiencing the very best your company has to offer from personalization to copy to look and feel. You’re learning from her actions, so make it impossibly easy for her to accomplish tasks that teach your team without drawing attention to your team.

Incremental—Don’t break things that are currently working well.

Change the text on the button v. changing the button entirely simultaneously altering its shape, color, size, and text.

Aware—Web apps don’t exist alone the world.

News events, seasons, weather, traffic sources, search engine patterns, and even the economy shape the ways in which users discover, interpret, and engage with information.

As you A/B test you should make decisions based on data that’s measured and tracked over time and interpreted with a sensitivity to the world-at-large.

Paced—It’s not a sprint, and when developing apps there is no finish line online.

A/B testing takes time and you need to understand your data in terms of mathematical relevance (e.g. how many unique visitors to sales conversions will it take based on traffic patterns to make a relevant sample size?).

Ongoing—Make user testing an ongoing part of your budget, design, and development.

The best A/B testing occurs when you’re constantly learning from your users. As you grow your user base or expand your offerings new aspects of interaction will be introduced, and as web technologies change users will change predictable patterns.

Both large and small companies can A/B test successfully, but the same rule applies for making mistakes. Executing A/B testing isn’t rocket science, and it’s certainly not supposed to be harder than finding a great love in this life—e’hem eHarmony.

Share on Facebook

Last weekend I attended a conference organized by mostly volunteer grassroots social justice organizers. Among them, Charles Lechner, Online Organizing Director for the Working Families Party in New York.

The group was diverse and full of well-known thought leaders and doers working in the online organizing and Gov 2.0 space. Among those we all know were Tech President’s Nancy Scola, Colin Delany of ePolitics, and Ari Melber of The Nation. There were also lesser known entrepreneurs contributing web apps to this evolving space like Summer Nemeth co-founder of Imagine Elections and Julie Blitzer of the Manhattan Young Democrats who recently played a lead role in the launch of an online campaign New Yorkers for marriage equality.

Together the conference was busting at the seams with talent and inspiration. Among the themes of hope and change, the group discussed the harsh empirical evidence of the 2009 elections in which we learned that new media and online advocacy tools were largely a failure. Of the Virginia Governor’s race, Nancy Scola said it best, “Television is still king. Printed mailers are second in line to the throne. And somewhere, waiting out in the castle courtyard, is the joker that is new media.”

It turns out that the success of the Obama campaign, touted for it’s innovation online, cannot be easily resized and applied to improve engagement in local elections. With voter engagement in local elections dropping to it’s lowest rates in history, the challenge of leveraging online tools to increase voter engagement is enormous and poised for profitability.

To give you a real world example of the space (please also read Nancy Scola’s Where Money Meets New Media”) I reviewed NYC mayoral candidates Bill Thompson and Mike Bloomberg’s websites on the eve of this year’s election to see if/how both candidates leveraged online advocacy and social tools to encourage voter participation.

There are 4.5 million registered voters in NYC, and in both a close and controversial race the turnout was an abysmal and historical low, 557,059 voters for Bloomberg v. 506,717 for Thompson.

Thompson2009.com (largely designed and developed by Blue State Digital) and MikeBloomberg.com were saturated with red, white, & blue graphics and personal branding. Neither site was particularly innovative or effective in terms of innovative online-to-offline engagement.

Both sites leveraged a staple set of social icons. Bloomberg’s site encouraged social media users to “donate” their Twitter and Facebook status updates on election day and Thompson leaned towards pragmatic design and provided a link to help voters locate their polling places.

If Facebook apps can inspire people to buy/give virtual gifts and even try on random hair styles, can a web app get someone out to vote in a local election?

Charles Lenchner and NYC’s Working Families Party believe that it’s worth experimenting with and so leading up to this year’s elections they developed “Candidate Finder.” It’s a simple app, a voter inputs her street address and zip code, data magic happens, and she can share, download, print the list of candidates WFP supports in her district and get directions to her polling place.

Lenchner, NYC’s WFP, and Candidate Finder bring me back to heavy-hitters Thompson and Bloomberg (and Bloomberg’s 100,000,000 budget). I believe that web apps (including bootstrapped ones) matched with smart outreach and online uptake can become a major asset towards can help reengage voters at the local government level. Yet, Bill Thompson, though not the winner, amassed a valuable list of activists, so what is he doing with that data and community? To date, nothing. We’re early in the game, but here are a collection of things learned by organizers, designers, and developers and shared at Organizing20.org.

10 tips for developing the next generation of political apps

1. Data-Hungry Developers Must Diet

Provide a data-driven activity to get the voter to the polling place (ex. WFP’s Candidate Finder). Data-hungry folks, suppress your appetite for demographics. It’s not about you;)

Don’t ask for more information than you need (user dropoff will increase with the addition of every field, and the experience is about the user and getting her what she needs to vote.

2. Imitate, Integrate, or Borrow From “Four Square”

Provide a validation activity (like Foursquare’s badges) for the voter post-polling (think of this as a virtual “I Voted!” sticker, but with the power of publication and dissemination across the web).

These activities can have tiers: be the first to vote, be the 100th voter, be the last to vote. Together this data can become a story of a community of users who can have a fun time spurring one another on throughout the day.

3. Meme, Mob, and Maybe Mock With Social Activities

Provide a mechanism for people to self-organize and go to polling places in groups (not everyone feels comfortable alone) or create a group-like activity that people can participate in.

• Enable voting day meetups with organizers (organizers should be able to download and print recs for who to vote for via your app)
• Seed flash mob-like experiences (everyone shows up to vote wearing fedoras at 10AM, which makes for great content for reporters)
• All users to design neighborhood-themed photo activities outside of polling places (e.g. Brooklyn hipsters take a photo of yourself in an ironic tee-shirt or Yankee Fans wear your gear and voters should upload to the app’s pool throughout the day)

4. Create a Feedback Loop Around Local Issues

Provide a feedback mechanism for people to get answers (keep it simple let users ask “yes/no” questions). Recycle the answers and data.

5. You Lose Your Virginity Once, But In Politics You Have Primaries

An app should engage the audience for more than a day, in fact, it should inspire a community who can in turn inspire each other to get out an vote. Experiment leading up to the primaries, optimize, and keep delivering an awesome experience.

6. Keep it Simple, but Leverage Advanced User Personas and Segmentation

Place focus on simple issues that impact voters’ bottom lines (Vote “YES” against fare increases). Voters get mired in the complications and local votes are for compelling local issues.

Your app should speak to a set of personas and the segmentation of what impacts the users’ bottom line.

• I’m a parent – what matters?
• I’m a single person – what matters?
• I’m retired – what matters?
• I’m unemployed – what matters?
• I have no health care – what matters?
• I’m the neighborhood curmudgeon, everything matters, but nothing makes me happy – what matters?
• I’m the neighborhood gossip – what’s the juiciest issue?

Identify a single compelling issue according for each and leverage that message repeatedly.

7. Get Your Google Map On

Provide an address, directions, and a map to the voter’s local polling center (sms, email, print, and invite the user to invite her friends/neighbors to join you on voting day).

8. Provide “What to Expect” When You’re Expecting Voter Turnout

Some people have never voted in a primary or a local election, while other people like to plan.

Tell your users/voters what to expect:

• When are the busiest times
• What should voters bring to identify themselves
• Will there be Wi-Fi access (if there’s a line?)
• What should voters tell their employers?

9. Translation Party

Build your app with multiple translations based on what most of your the constituents.

10. Accountability Analytics Are Awesome

Voting isn’t the end of the local politics process. Create a post-election utility similar to Politifact’s Obamameter, which is tracking Barack Obama’s promises and rating the progress of each one.

Your app should keep the community you cultivated engaged around how currently elected officials are doing and if they’re keeping their promises.

If your app was designed to support a democrat, who didn’t win, flip it to track how the republican elect is doing and how it’s impacting the same issues your audience was encouraged to get out and vote on). By doing this you’ll also be able to continue to grow your community, making your app’s potential to be stronger and have greater reach in the next set of elections.

With American engagement in local politics at a historical low the frontier for app development is wide-open. Bloomberg spent $100,000,000 on his campaign, Lechner and WFP spent a few thousand dollars on something smart, user-friendly, and simple.

Back over to you, what kind of app would you build to help influence engagement around local issues, encourage and increase voter turnout, and most importantly help change the world in the process?

(Disclosure, I played a small role in Candidate Finder’s development with friends at Fission Strategy). I’m an independent user experience consultant and you can find my work over at chrissiebrodigan.com.

Share on Facebook