The 100 Million Dollar Form Redesign: A Responsive Solution


It’s not every day a client entrusts us to redesign a $100 million dollar form. But the Leukemia & Lymphoma Society knew they had to do something to fix their donation forms. They were fielding phone calls from people angry because they couldn’t give LLS money.

One of the prospective donors was particularly upset, and I empathized with him. I lost my father 2 years ago this month the Leukemia. There wasn’t much I could do to help my father fight blood cancer, but one thing I can do is fix a broken user interface.

To guide this endeavor, I wrote a manifesto to address people’s frustration with the existing form:

Looking at page 3, On Your Terms, what were our options? Mobile Optimized Sites or Responsive. Learn more about these two strategies.

It was a hard decision. Ideally, we should have probably created a mobile optimized form that had half as many fields, but the organization wasn’t ready to ruthlessly edit their form donation yet. And our first version was just a “fast-fix”, planned for 30 days from start to launch. No back end code changes, just UI changes. So we went with Responsive, meaning we designed the form to work well on any sized screen, from a desktop browser to a mobile phone.

The forms were developed with:

And tested on:

  1. Desktops and Laptops- Firefox, IE, Chrome, Safari
  2. Apple iPad
  3. Samsung Galaxy Tab
  4. Kindle Fire
  5. Apple iPhone
  6. Samsung Galaxy III
  7. Google Nexus
  8. HTC Window Phone
  9. BlackBerry Torch

(Thanks to Mudassir for pointing out that my earlier phrasing was incorrect- we didn’t target these devices, just tested on them. )

The final result is available at LLS.org, and it can also be accessed by donating to individuals participating in Team and Training and Light The Night.

We’re still working on these goals: Fast, Respectful, On Par…, and Helpful, but we’re getting there, and this is a big first step.

Comments (6)

Presentation: The Lean Tech Stack

More and more organizations are following a Lean model for creating products. This model has been popularized by LeanUX and the Lean Startup movements which emphasize build-test-learn in rapid iteration.

In this talk I get into the tension between focusing too much on reuse and components and not enough on experience & experimentation. I also talk about the powerful technology stack available in the open source world that fits so well in the lean movement — I call this the Lean Tech Stack. I gave this presentation today at the Open Web Camp 2012.

The Lean Tech Stack
View more presentations from Bill Scott

Comments off

Presentation: Anti-Patterns for Lean UX Teams

What behavioral anti-patterns can stop a lean/agile team in its tracks? What situations cause projects to lose their nimbleness?

Check out this presentation I have shared with our teams here at PayPal. I will also be giving it at Chegg next week.

Lean UX Anti-Patterns
View more presentations from Bill Scott

Comments off

Cross Platform Design Strategies- DevSum12

Just wrapped up a conference in Stockholm yesterday, DevSum12. Imagine my surprise to be on the front page of Sweden’s biggest Technical Magazine this morning.

Either my talk was riveting, or Computer Sweden needed more pictures of women in technology (or maybe both). Take a look at the talk and let me know your thoughts.

As soon as I have the links to the other speakers presentations, I will share those as well, including a great beginners talk on Node.js. I’m going to use Steve Sanderson’s sample files to get started with a little project of my own.

Comments (1)

Diving into Indie UX: The Wrong Way

We just wrapped up last day of the IA Summit 2012 in lovely New Orleans. I have enjoyed wonderful food, drinks, company and speakers including Stephen Anderson, Josh Clark, Chris Risdon, Greg Nudelman, Nadine Schaeffer and Dan Brown.

But one of the talks on Saturday, a panel called Taking the Plunge: Diving into Indie UX, left me gaping. The first section focused on design and design process and how it would be different if you are acting as an independent operator vs working within an agency or organization. I was shocked to hear the 4 panelists don’t collaborate with other designers or work with mentors because, as one said “I’m a good designer, I don’t need help“. Other comments about 16 hour days, spending 20-40% of time on non-billable tasks, deals taking 18 months to close, and not having repeat clients illustrated the wrong way to approach indie work, not a sure path to success.


I’ve been an ‘indie’ for about 7 years, but I’m no expert. I came to the session hoping to learn how other independent designers handle important issues like process, pricing, managing clients, finding the right clients. Instead I am alarmed that there may be a whole group of people out there posing as UX designers who don’t know their ass from a tea kettle and another set of professional, dedicated designers who could be very successful working independently now scared to try it.

Like I said, I am not an expert, but I have been successful, more so that I would have ever imagined. I have a group of 10 other ‘indies’ who work with me, many outstanding client relationships, a broad & deep portfolio in the space I’m interested in. If you measure success with dollar signs, I matched my salary from my previous Director of UX position in the first year and it has steadily increased each year. I like what I do and I hope to be in this field as it evolves over the next 7 years.

So I don’t know if this is the right way to dive into indie work, but I think it is a more balanced and professional approach than what I heard Saturday:

1. Clock your 10k

Malcolm Gladwell and other writers have noted the correlation between 10,000 hours of experience in a field and expert status. So you’ll need a bare minimum of 5 years designing before you have the skills, experience and exposure to go out on your own. But a normal desk job doesn’t get you 10k in 5 years. A full-time job + side projects might though- see #2. And making a web site in high school doesn’t mean at 20, you now have 5 years experience under your belt. I’m talking about design work in a professional environment, hopefully one where you work like a dog to learn everything you can about this field- see #3.

2. Ease into it

Keep you day job, and if you have the passion and time, pick up a side project for the evenings and weekend. This will help you learn important info about yourself that you’ll need to know before taking the full time indie plunge. How are you at:

  • estimating
  • managing timelines
  • setting client expectations
  • selecting and screening projects and clients
  • taking criticism
  • following through
  • scheduling meetings
  • saying ‘no’ (this was one of the good things Donna Spencer noted in the talk)
  • working from home
  • working remotely
  • dealing with all the bs that comes with working from home
  • negotiating your rate
  • handling the bookkeeping

.
It might become readily apparent that you will thrive in this role or that there are some areas where you’ll need more experience or support.

3. Do anything to work with the best

Anthony Bourdain, author of ‘Kitchen Confidential’, has a newer book, ‘Medium Raw’. In this book he has a chapter titled “So you wanna be a chef”. He bluntly explains that if you are old (in restaurants that means over 30), fat, or have any health problems, to stay away. After this chapter designed to open your eyes about the real physical demands of cooking, he says if you do decide to go to culinary school, and manage to graduate, do everything in your power to work for the best. Whore yourself out to the best restaurants in Europe, just for the experience. Even if they don’t pay you, even if you sleep on someone’s floor for a year, it is worth it just for the experience.

Same thing applies in our field, but I’ll spare you all the cussing Bourdain uses to make my point. Go work with the best UX designer or agency that will take you. Intern for free, or volunteer to work on side projects just to get the chance to collaborate with experienced and talented people.
I was super lucky in this regard. In my first year as a designer, I helped hire my future boss, mentor, friend and co-author, Bill Scott. I spent 4 years learning from one of the best UI designers and developers in the U.S.

4. Don’t degrade or disgrace this budding industry

UX is an emerging field. Many companies know they need UX help but don’t know exactly what that will entail. If you have clocked your 10k, worked with the best, and successfully delivered a number of side projects on time, on budget, and the designs you made were well received by the end users (in testing and production), you may be ready to help these companies.

If you haven’t clocked your 10k, haven’t successfully delivered multiple projects on time, on budget, and received positive user feedback (in testing and production), and haven’t worked with the best, you likely do NOT know what you are doing well enough to represent our industry on your own. Go back and get the experience you will need to help your clients be successful. Because, ultimately, this isn’t about you making fat stacks while working in your pajamas, it is about making your client’s projects successful.

5. Get your ducks in a row

Legal

You need some type of legal entity. I’m not lawyer or accountant, so I won’t advise you as to what type. I have a LLC, and so do most the designers I collaborate with (who are in the US).

You will need a standard MNDA, a consulting agreement, and a SOW template. And you’ll need a lawyer to review contracts before you sign them. I am serious, pay the extra money to make sure you are covered, you’ll sleep better at night.

Software and hardware

You need a time tracking system, invoicing system and file sharing system. You need a personal computer, and preferably a back up computer. I shouldn’t even have to mention this, but you need a secure backup of your work.

Financial security

You’ll need 3-12 months of living expenses in the bank. Trust me, you don’t want to be in the position where you have to take any job that comes along because you’re broke. Having some financial security gives you the freedom (and time) to screen prospective clients carefully and only accept projects that are closely aligned with your expertise and interest.

Public presence

You do not need a fancy office, amazing web site, logo, or business cards.

You do need a concise overview of your services and how you will work with your clients to provide value. I drafted a UX process years ago to help set client expectations about my role as a UX consultant, the deliverables, and what I expect from them during an engagement. Every client’s UX needs are different, so we don’t always follow this approach, but it is a good tool for the initial discussions. If you are going to freelance, you need a process or at least some case studies of projects you have been involved in.

You need a current portfolio. Be honest. Clearly call out what your role for each project was and who else you collaborated with. I would also recommend having a professional blog and authoring original content. Once you get used to writing, contribute to reputable UX blogs, like UX Booth, UX Magazine, UX Matters, etc..

References

Not all clients ask for them, but they should. Be able to provide references, preferably from pleased clients and colleagues. Again, if you clocked 10k, eased into this and worked with the best, this shouldn’t be hard to come up with. I had the luck of the lifetime when I left Sabre with a portfolio with dozens of desktop, web and mobile applications and their gold star recommendation.

6. Build a trusted team of collaborators

So I already mentioned that I was appalled that the panelists didn’t work with other designers, not even mentors. But as I thought about this more, I realized this is simple arrogance, not ignorance. UX encompasses a broad array of disciplines. A typical UX project we’re involved in includes:

  • market research
  • stakeholder interviews
  • business strategy sessions
  • user research
  • information architecture design
  • interaction design
  • content development
  • user validation/testing
  • prototyping
  • development collaboration
  • project management
  • visual design

And some projects require even more specialty work like video production.

I’m certainly not qualified to handle all of these roles myself, nor have I met any single UX person who is. Before I built my team of UX experts, I connected with fellow consultants who specialized in the areas I was weakest (ie. user research, testing, visual design, and prototyping). I knew which ones I could collaborate with who could be trusted to provide high quality work on time and on budget.

7. Provide a stellar Client Experience

Here’s an area I am still working on. After designing all these years, I forget that our clients don’t live and breath UX. They are new to the process, the terminology, the principles and the deliverables. They are looking to us for guidance to make their project successful.

One of the things we try to do, but should probably make a mandatory step in our process, is an on-site kick off meeting. We elaborate on our process, meet the stakeholders, then start looking at the business objectives for the project.

Once we’re up and running, we have standing design sessions, 1-2 days a week depending on the pace of the project. We also use Basecamp or myBalsamiq for file sharing and collaboration. Basecamp isn’t the perfect app for consulting, but the calendar does allow you to enter events and milestones. We’ve found that providing a really light weight project plan combined with standing weekly meetings, and the message board in Basecamp cuts down on random client emails at mid-night, or panicked calls asking when they can see the next version.

Don’t go crazy with the SaaS though, notes on Google docs, assets in DropBox, messages in Basecamp, project plans in Gantter, etc… just confuse clients. You’ll spend more time resetting passwords than getting design work done. Try to find one tool that is good enough, and stick with it, for their sake.

All in all, be professional

  • Leave a reasonable amount of time to complete your work, don’t knock it out at 3am, or in a 16 hour day
  • Respond to messages in a timely manner
  • Treat clients’ questions and feedback with respect, you are the design expert, but they are the subject matter experts
  • Educate them on UX methodology as appropriate during the project- note this is different than evangelizing UX

8. Get clients, not projects

This was the most troubling part of the talk, none of the panelists had significant repeat customers. They didn’t even talk about building client relationships. I have found the key to consulting is building client relationships, meaning, instead of taking 20 disparate projects a year, we have a half dozen clients that we work with on multiple projects.

The panelists spoke of 16 hour days (at the same time saying they bill by the hour which made me cringe) and how “you’ll burn out quick” like this. What I find to be most draining is ramping up on numerous small projects back to back. That is why client relationships are so valuable; it is easier to ramp up on projects within the same company, even if the work is for a different organizational unit. And we’re providing a great value to our repeat clients by reducing the number of hours need in the discovery cycle, since we already have some understanding of their industry and customers.

In summary

You can’t become an ‘indie’ UX designer until you have proven yourself as a ’successful’ UX designer and have the portfolio and references to back you up.

I’d love to hear more tips from other successful independent designers; I’m sure there are many topics I’ve overlooked here, so chime in with your own experiences.

Comments off

eBook Released: Mobile Design Pattern Gallery

Get it for $20 on the O’Reilly site, format ePub, mobi or PDF. Please rate it and leave a review, I appreciate all feedback.

The print book should be available next week. I’ll be signing copies at SXSW @ 1:30pm, March 13 at the Expo Hall.

Comments off

Design Beautiful & Usable Android Apps

Here are some excellent resources if you are designing for Android Gingerbread or Ice Cream Sandwich.

Galleries

Pattern Libraries

Stencils/Templates

  • Zurb’s excellent OmniGraffle Stencil
  • Android 4.0 PSD
  • High Density PSD from Teehan + Lax, June 2011
  • Stencil for Visio- Nope can’t find one. I’ll say it again, the Visio community needs to get it together and starting making high quality stencils and sharing them. If you know of a Visio stencil for a current version of the Android OS, please comment and share.
  • Keynotopia for prototyping. I have bought and used this bundle for iPad prototyping and it works well. I haven’t tried it for android apps yet.
  • Glypish Icons are really useful for low and high fidelity mockups
  • User Interface Design Guidelines

    Android Design

    Blogs/ Articles

    Books

    Presentations & Videos

    Comments off

    Show Me, Don’t Tell Me: Pattern Galleries vs Pattern Libraries

    I read a post on Boxes and Arrows this week titled Are Design Patterns an Anti-Pattern? where Stephen Turbek outlines the pitfalls of pattern libraries. This got me thinking about a UIE talk a couple of months back where Stephen Anderson ‘vilified’ the set of RIA screen patterns Bill Scott and I published in 2009 & 2010. His talk encourages designers to fully explore an engaging conceptual model before falling back on an established design pattern.


    The Villains in Stephen Anderson’s talk on Emotional Engagement



    And I started thinking, does my new book about mobile patterns have any value or am I unwittingly polluting designers creative minds?

    After a glass of wine, here’s what I came up with:
    UI patterns are a useful educational tool. Designers should be familiar with design patterns, just as they should be aware of other fundamental principles of design (psychology, typography, color, balance, proportion, etc…). If nothing else, patterns give us a shared vocabulary and rules to break.

    UI patterns are also useful for developers and product owners who don’t have a dedicated designer to collaborate with. Patterns give them a better chance at creating a usable interface than if they randomly design something in a vacuum (or more likely, a small, stinky meeting room with a whiteboard and a half-dead dry-erase marker).

    After another glass of wine I realized, I’ve never used a Pattern Library. I’ve made a couple for clients, I’ve browsed a few online, I own a two books on Pattern Libraries, but I don’t use them. And I have a sneaking suspicion I’m not alone here.


    Pattern Galleries are a different story. What’s the difference? A Pattern Library is a an educational effort explaining the how, when, why. A Pattern Gallery is a bunch of pictures of good design that can be perused for inspiration.


    At the risk of sounding immodest, I frequently refer to my own DesignGalleRIA when I’m working on complex Rich Internet Applications. Many interaction design challenges have already been solved and I can build upon these IX patterns to create an ‘intuitive’ experience. In fact, I’m a better designer and provide a better value to my clients by knowing what’s out there, and knowing when to leverage an existing solution or start from scratch. I’m pretty sure Mari Shelby and others started their Pattern Galleries for similar reasons.

    If the number of subscribers on these sites are any indication, the popularity of Pattern Galleries is exploding. Even my brand new gallery and Flickr photostream is getting upwards of 1k+ unique visitors a day and the book isn’t even released yet.

    UX practioners aren’t the only ones creating Pattern Galleries. I know of fashionistas, architects, interior designers, puppeteers, brand designers, and landscapers who create scrapbooks, physical and digital, for design inspiration.

    What do good Pattern Galleries have in common?
    1. Lots of pictures
    2. Minimal text
    3. Easy to flip through
    4. Frequent updates

    With that in mind, I’m updating my Pattern Gallery with better navigation and a bunch of new screenshots.

    Please comment and share your own experiences with Pattern Libraries, have you ever really used them, did they help you solve your design challenge, do you use Galleries more often, if so, which ones?

    Comments (1)

    Does It Have Legs- Heuristics for Information Architecture

    Great talk from Abby the IA. Fresh style, clearly expressed. Can’t wait for the poster she’s making.

    Comments (2)

    jQuery Mobile Graffle Stencil

    Had to whip up an OmniGraffle stencil for jQuery Mobile. I submitted it to Graffletopia, but it isn’t live yet. You can download it here in the meantime. Just put in the user name > Library > Application Support > OmniGraffle > Stencils folder and unzip.

    Another great resource to help in your mobile web design projects is the Glyphish icon library- free and inexpensive icons for your mockups.

    Comments off