The Tortoise Always Wins: An Argument For Discipline

Discipline is probably the most overlooked ingredient in branding, design, and marketing strategy and execution.

My favorite definition of discipline is that you do the right thing at the right time in the right way every time.

The best customer service is disciplined – every single customer is treated the right way every time.

The best branding is disciplined – it sticks to the vision and mission of the organization.

The best design is disciplined in making the obvious tasks obvious, the easy tasks easy, and the possible tasks possible.

Discipline means cutting away things that aren’t necessary and avoiding things that aren’t core to the mission.  Chances are you are far better off consistently executing simple tactics every day than trying a new tactic every week or month to drive to goals.  Chances are you can (and should) use your name instead of some vague latinate word for a company identity.  Chances are that you really don’t need this feature or that for your site.

Discipline doesn’t mean Spartan, though.  It doesn’t mean that everything has to be the simplest version of what you do or that everything is simple in the first place.  It just means stop doing the stupid, avoid doing the misguided, and keep hammering the basics.

The only difference between top performers and mediocre ones in any given field are that the top performers are so much better at the basics.  They may or may not have special capabilities that allow them to do special things, but all top performers are simply better at the basics.  Most of them got that way through countless repetition until it was automatic.

If it feels difficult to do this and you want to find a shortcut, remember,  this is a good thing.  It’s supposed to be hard.  That makes it valuable.  Remember,  the tortoise always beats the hare.

Apples and Oranges: Sales Process

Design doesn’t sell itself.  But, having the wrong Sales Process for the wrong type of project doesn’t work either. Unfortunately, very few people in the design world talk about this, and the fact of the matter is that sales – whether externally or internally – is a core design skill.  Design that isn’t sold is as bad as design that isn’t done.

 

All sales process include four overarching processes: Qualification, Rapport, Education, and Closing.  The possible project’s size determines what, if any sub processes are needed to get to the close.  Generally,  the bigger the project,  the longer the sales cycle and the more sub processes you need to run in each step.

You can, a priori, decide that you don’t want to take certain projects.  That will make your sales process more efficient by choosing to ignore opportunities. Personally,  I like a wide variety of projects because I enjoy the challenge of figuring new things out, and I like a variety of different kinds of clients.  If all I did were one type of project, I would go insane.  So for me,  it’s vital that I understand immediately how in-depth the process ought to be for a prospective client.

When in doubt, I err on the side of over qualifying, building too much rapport, educating too much, rather than the opposite.  I love longer sales cycles because it allows me to make a stronger case for myself and build an actual relationship with my client, which is vital to the success of a project.

That doesn’t mean short sales cycles are a bad thing, though.  On small budgets you simply can’t afford to spend hundreds of hours convincing them to sign.  That constraint, however, doesn’t excuse you from going through a process,  in order, with out rushing.  It simply means that your qualification criteria need to be clear and your understanding of how this project may benefit you need to be checked against profitability.

Maybe the most difficult balancing act in the sales process is to maintain a sense of urgency without annoying a prospective client.   Yes, we want the sale, but it’s important to keep the big picture in mind.  This is also why we are continually marketing ourselves – so losing a big prospective client is not the end of the world.  If we are continually adding new prospects to the pool, we won’t fish ourselves out of work. By having other activities that you need to be doing, you won’t spend as much time obsessing over one particular client.

Investing in your sales process is a direct investment in your success as a designer, and ultimately your client’s projects will be better for it.

Simple Content Models

Content Modeling is not complicated.

Content Modeling is – well, exactly that.  We’re going to basically start writing our site before we even dream of how it’s going to work.  Here’s three simple ways to get started with Content Models.

Start with a conversation

Do you start your sales calls with a deluge of information about your company? No? So why are so many sites organized along the lines of “Kitchen Sink HomePage – About Page – Product Page -FAQ – Contact”?  Writing for the web is not the same as an in person conversation, but the insights you get from talking to real live customers should inform how you organize and write for your site.

Objections!

A web site is the perfect place to get the perfect response to sales objections front and center.  Every single time you hear a pattern of objections you should be figuring out a method to overcome those objections on your site.  If you need a place to start with web copy, look to the things that have held back your business in real life.

Venn Zen

Make two lists: Everything your team wants on the site, and then everything your customer wants on your site.  If there’s a union (things that show up on both lists), congratulations!  Those get top priority.  The next tier of information is what the customer wants, and the last tier (if you even need it) is what you want. Remember: to benefit you, the site must first benefit your customer.

When taken together, these three models form the backbone of an effective site or application.  It also prevents your site from looking, feeling, or being cookie cutter, even before the first sketch is drawn.

Thinking Mobile

Your people are mobile. The only question is: are you?
Mobile State of Nature

The only statistic that matters: 100% of your people are on the mobile web.  A billion more people will come online in the next five years and smart phones as a technology will get down to 10 dollars.

The mobile web is nasty, brutish, and slow, to paraphrase Hobbes.

This makes designing for the web very simple: it either works on low powered devices with small screens on bad connections or it doesn’t.  If we take that as an operative given, the implications are that:

  • Content priority matters more than ever
  • It better be damn enjoyable to read that content
  • Part of that enjoyment is that the perceived experience of the site is fast.

Simply put. If you focus on getting the right content done the right way for your audience, and present that in the right context for them reliably fast, you win.

And if you don’t you’re losing trust and money.

 

Happiness

My wife have been married one year today. I’ve never been happier and I know that our lives will only get to be better.

To my wife; I adore you. You’re my person. Your love and support are seemingly unending, as is the joy in our life together.

To anyone reading this; here’s three things I’ve learned from a year married to the right person for me.

Embrace the Nonsense

When I got married, my wife and I received a ton of advice.  Far and away the best advice we got was from my friend Josh and his wife Shannon.  Their advice on a happy marriage was simple:  Embrace the nonsense.

Our first year of marriage has been truly blessed.  Even the hard things for us weren’t really that hard in the grand scheme of things.  But what made it great and enjoyable was embracing the nonsense of a mad world.  More than that, we embraced each other’s nonsense.  Life is a lot happier when you laugh with someone else.

Flowers are cheap

I read this in Ben Horowitz‘ awesome book,  The Hard Thing About Hard Things, which I suggest you read too (and buy, because all proceeds go to improving women’s lives around the world).

In his twenties, Ben worked for a hot mess of a start-up.  They were so broke they couldn’t afford air conditioning.  One day, his father came over to watch their kids and asked Ben:

“Do you know what’s cheap?”

Ben had no idea what he was talking about, so of course he said, “No, what’s cheap?”

“Flowers. They are really, really cheap.” Ben’s dad went on.  “Do you know what’s expensive?”

Again, Ben had no idea what his dad was getting at.  “No, what’s expensive?”

“Divorce.”

The point is, in a marriage, the most corrosive thing you can do is put your desires over the needs of the marriage.  Having the right kind of ambition – to have a wonderful marriage – means considering your spouse first.  Making decisions through that prism is not easy – you literally have no practice at it before you have an obligation like marriage.  But simply thinking about how to be the spouse your spouse deserves (and then acting on that) goes a long long way.

Clear Eyes, Full Hearts

Being on the same page is not easy or simple to do.  But getting on the same page of what we want together has made our marriage delightful so far.  Because we have the same vision, it makes decisions and actions easier to take.  Because we’re on the same page it’s easier to trust and talk about difficult things.  We get to do things together and it’s a lot less scary.  It’s great because I know I have someone with a different perspective and skills that I can rely on, and getting to be that for someone is really special too.

Happiness, like love,  seems to be more of the acts we take than the attitudes we hold.  I wish you the kind of happiness I’ve been able to find.

 

Type Systems Part 3

Finishing out our brief look at type systems, we’re going to talk about what to choose.

The short answer is: anything that works.  The slightly longer answer, and I’m sure this doesn’t comfort you much, but just pick something and go with it.

I’ve known designers that only use one type face and just make everything else fit that. And it worked! Most clients don’t notice or care – they see words and letters. Having only one, legible, multi-purpose typeface makes a lot of sense.  You can cut down on cognitive load on a page (how much information a person has to process), and it would keep costs down, and in theory improve site performance. It’s drawbacks are obvious too – it’s probably too limiting for all cases and all of your work will eventually feel the same.

I’ve known designers (and I would fall more into this category) that needed to seriously be restrained from trying too many options because, well, there are thousands of great options out there.  And that can work too! After all, if we believe that every project should be specific to the project, then we ought to try to pick the appropriate solution for that project.

And then, there are some designers (very famous and important designers) that stake out a middle ground: they have a family of favorites that they’ve found are applicable to just about everything.  Massimo Vignelli loved Helvetica as his sans-serif and Bodoni as his serif, and rarely deviated from those.  Jason Santa Maria (who literally wrote the book on web typography) recommends that approach as well.  If it’s good enough for those two, it’s good enough for you.

If you’re trying to come up with a suitable family, it’s a good idea to have at least one and no more than three typefaces per basic category.  This will give you some flexibility but also quickly constrain venturing off into crazy land.

A sample family might be something like this:

Sans Serifs: Futura, FF Meta Sans

Serifs:  FF Meta, Caslon

Slab Serifs: Sentinel, Clarendon

Humanist Sans: Whitney

Monospaced: Input

Coming up with different use cases is actually easier when you’re purposefully constrained, and it’s not as if there aren’t thousands of varying applications and permutations of the list above, or any similarly constructed list.

The bottom line is that the web is still, essentially, a reading interface.  This means that we need to choose how we display text to be read with care, and that requires a well thought out type system.

Type Systems Part 2

Getting down to the nitty gritty of Type Systems.

The reason we call them type systems and not simply type selections are because like a fine wine with medium rare steak (or a hot dog and a bud light), text is meant to be paired to create hierarchy.

Imagine for a second that everything you read on every page of the internet was only black type, in Arial, and 12 pt. in size.  Pretty boring, right? Further imagine that everything was one line height, line length, and one weight (how heavy or light the font appears.) It would be difficult for many people to read (since screens strain the eye and 12pt is relatively small), and impossible to distinguish importance – everything would look uniform.  Our eyes evolved to notice when things are different from our expectations so one font, at one length, line-height, weight, and size would result in a block of text that our eyes would really have a difficult time reading.

How we solve this problem is by defining what kind of type is appropriate for what kind of information.  Generally speaking for web, there are three basic kinds of information:

  1. Display – the dominant text on a page
  2. Heading – orients the eye to start there
  3. Body – The main text of a page.

A display may or may not be a heading element; headings may or may not be a part of the body copy, but body copy is always going to be a primary determining factor.  After all, this is the “steak” of a site – people go to sites to read something or complete actions. If there’s one place to focus on,  it’s body copy.

Interesting tangent here; the importance of your selection is inversely related to the amount of copy you plan to have.  It’s a simple principle, really – the less copy, the more perceived importance of any given word, sentence, paragraph.

From there it’s deciding what pairs well with the body copy type.  “Well” here is obviously subjective and depends on the project.  For instance,  you may need a much higher contrast between body and heading text and so picking two relatively different fonts may make sense.  Here’s an example:  Proxima Nova – a very popular Sans font – paired with Adelle, a popular serif font. The contrast between the two creates an interesting and inviting read.   Or, you may decide that you need a lot of harmony between  body and heading text, so picking a pre-designed pair like FF Meta Serif and FF Meta (a sans-serif version meant to pair with FF Meta Serif) makes sense.

Last,  with Display text,  I’d urge caution and lots of discretion.  These elements are going to be big, bold, and visually dominant,  so it’s vital that one uses restraint in only using them when and where the design calls for them. On many projects they may not even be necessary. But you may have to incorporate display type if it’s consistent with branding guidelines.  An excellent example of display type is Playfair Display,  which is versatile enough to be used for headings but not a great body copy type.

WordCamp Round Up

Notes and shout outs from an awesome WordCamp STL 2015

WordCamp STL is one of dozens of WordCamps around the world and the local version of the global WordCamp. I had the pleasure of presenting this year but it’s a conference I try not to miss if I can.  For only 25 bucks,  you get a t-shirt, great swag, and an unparalleled learning environment where you can find anyone who is interested in what you can bring to the WordPress community.  In other words, it’s Web Geek Christmas.

This year’s event was 2 days of programming starting with a keynote recording of Cain and Obenland in the Morning.  Then, 4 blocks of 4 presentations each of 30 minutes.  From Lucas Lima I learned a ton more about project management, which is always valuable. From Heather Acton, I got valuable insight into financial planning for my company.

Then I spoke.  My partner Justin Chick, my mother, and my wife came for my talk, which helped calm me down.  I still had a ton to cover and probably talked too fast for a good chunk of it, but at least I started off at a reasonable pace.  The feedback I got was overwhelmingly positive,  which is great!  If anyone didn’t like it, they didn’t let me know.

We broke for lunch and then the break neck pace continued.  In the afternoon I learned about the amazing work Cam Barnett is doing moving school systems over to WordPress, saving taxpayers boat loads of money, providing a better solution to their real problems,  and ultimately,  making schools better at their core job – teaching and cultivating kids into great adults.

Then I learned about how to fundamentally alter how to use WordPress with a great talk on the REST api, which is hopefully coming to WP core soon.  I wasn’t able to make the after party at the City Museum or much of the Community Day, which held a kids workshop and helped build a site for HandsUp United, but I learned a ton and met so many wonderful people.

I’m more sad about the great presentations I couldn’t make, like Sara Cannon’s UX Talk, Drew Bell’s talk on the rat hole of CSS Specificity, Christoph Trappe’s on authentic storytelling, Joe McGill’s on Atomic Design principles in WordPress, and Megan Harris’ on content marketing.

Far and away, the people in the WordPress community are what make it so easy for me to do what I do and make better sites for my clients.  Thank you so much to everyone who attended, volunteered, presented, sponsored or otherwise make things like WordCamp possible!

I’m looking forward to next year already, but my experience at WordCampSTL has encouraged me to begin submitting my presentation to more WordCamps.  I’m a little leery of it – the best part of WordCamps are that most of the presenters are local – but I feel like the reaction I got means that I have something to share.

 

Type Systems, Part 1

Shhh.  Don’t tell anyone.  Visual concept is not why someone comes to your site.

Type Systems

If not for the visual concept, why do people go to sites on the web?

People use your site for one of two general reasons: To read (or view, or listen) to what is there, or to complete a task, like purchasing a ticket for a flight.

The latter general reason – completing a task – is far too complicated to get into today.  Rest assured however that this is very important to consider for any web project.  The former – to read what is there – means that the way the actual text is laid out means more to the success of your site than most other visual considerations.  And, by way of standards,  this is what I look for first in evaluating designs.

A type system is the result of the deliberate choices a designer makes to display text across a site.  The reasons a designer might choose one type face over another might be:

  • legibility : some fonts are made for big displays but would be unreadable at smaller sizes
  • history: like all designs, fonts have very human reasons for being, and connote the historical periods they were created in or meant to imitate
  • availability:  there are some fonts that are common to nearly every computer, many freely available fonts and even more fonts you’ll need a license to use.  The budget plays a big role here
  • performance:  Fonts must account for a variety of weights, styles, and usage.  Loading all the possibilities is a big drag on performance as it’s usually many files (which means many HTTP requests) and each file is quite large (since they must display all of the necessary glyphs like uppercase A-Z, lowercase A-Z, and numbers)
  • branding standards:  whatever font/s are chosen must be congruent with the overall brand of the organization that is publishing the site.

On a typical web project, it’s not uncommon for there to be a font selected for Header elements and another for body copy, and in addition to the concerns above, a designer needs to be aware of how each would pair with the other.

This is only the beginning of talking about maybe my favorite part of web design.  For more, check out Typekit’s excellent (and free!) resource here, or consider purchasing the amazing work of Yesenia Perez Cruz at Mijingo.