E&J Design

Jason Santa Maria (@jasonsantamaria)is a designer who used to work for Happy Cog but has set out on his own trailblazing mission. He is also the Creative Director for A List Apart, which is “an online magazine for people who make websites”. He is also on the board of directors for AIGA/NY.

Jason gave a presentation on “Thinking Small”. He started the session by talking about one of the first Christmases he remembers as a child. Typical Christmases involved him getting some sweet toys like Castle Grayskull but for some reason, this particular year, his parents decided to get him the choose-your-own-adventure books. At first he thought this was gonna be the lamest Christmas ever, but then he started reading them. “The best part is that they are interactive…of course, you cheat.  You go back and see what would have happened if you had made a different decision,” says Jason.

This illustration is the perfect segue into what he says we should all be doing when we are deciding the outcome of a finished website, and goes on to outline seven points that we should all be thinking about as we design and develop websites for our clients and/or employers.

Point 1: Be A Thinker

As people who work with the web, we need to know how to sketch things out on paper. Don’t just dive into Photoshop and start hacking away at things, but take a step back and sketch.  It’s not about being able to draw, it’s about being able to think about the project and get ideas out.

Point 2: Find the Message/Know the Content

The beginning of the project is probably one of the most crucial steps of the entire design process: knowing the content and finding the message.

The difference between good design and great design is intelligence.

Every website has a message. Think about it as if you’re introducing a friend at a party…what’s important? everything on the site should communicate that message. Jason gave two examples of websites that do exactly this: The White House and A Working Library.

We need to know our tools, know our process and solve problems with ideas.

Point 3: Be a (Reverse) Engineer

Jason recently played a round of layer tennis with fellow designer Derek Powazek, where they decided to play the round by following the rules of “three truths and a lie”. This prompted new ways of thinking about what they were producing.

The lesson to take away from this section is simply this: when you’re in a brainstorming session, play the ‘yes’ game…take what other people are saying, and add to it – you never know what may come of it.

Point 4: Plot it out

In this section, Jason talked about how he came from a traditional graphic design background of grids and systems with questions like, “But how big should your grid be?”. Every website is different, and you shouldn’t take browser size into account (necessarily) when building out your layouts. Just because the end-user can view the site in a full 960 pixels doesn’t mean the design HAS to be 960px wide. Consider the content, don’t just blindly approach grids from a set size. The space you leave on the screen can be a valuable design tool. You can use this area for your design, but you could also use this area for whitespace, a very important tool in the designer’s toolbox.

The grid system is an aid not a guarantee

There are many types of grids in the world, columns aren’t your only choice. Life is full of choices and so is web design. How you choose to fill that space is what makes up your grid. 960 pixels doesn’t fit everyone’s needs. Find the grid that fits the message.

Grids also don’t have to be uniform and the unfortunate thing is that most grid tools start from this assumption. This affects things like what if you want to display large images AND small images within the same grid? A small decision of making your content fit the grid can have unfortunate effects further down the line.

Point 5: Think Horizontally, Then Vertically

The main point here is to ‘design systems, not pages’. Jason used his own site as an example of “website parfait”. His grid is simple horizontal strips of content. The different sections can work together, or stand alone. Then within each of the separate layers, there’s sub-layers. Only now is when he starts thinking about how things line up vertically. The very nature of the web allows for flexibility and what is ‘designed in photoshop’ does not always translate to HTML due to that very nature. Text flows longer, images aren’t always going to be the same size and various other issues arise.

Point 6: Stop, Modulate & Listen

Jason recently wrote a 24 Ways article on “modular layout systems”. Most page elements can be narrowed down to three things, “identifier” (what it is), “size” (how big it is) and “placement” (where it goes). Once you’ve figured out what these elements are, you can start to apply classes to them to start defining the grid. (e.g. class="pic two left" or class="pic seven right"). The great thing about this is it’s very human-readable and easy for clients to understand.

Point 7: Be A Matchmaker

This point is about what type-faces to use. Jason things that within the next six months to a year, there is going to be more of a push for understanding type and how to use it. A few rules of thumb from Jason when choosing your typefaces:

• don’t use two script faces together, or two sans-serif/serif fonts together. One of each is a good rule of thumb.
• Pair fonts from the same designer as they will most likely share some common shapes (Perpetua and Gill Sans go great together because they were both made by Eric Gill).
• Find harmony and structure. Bedoni (serif) and Futura (sans-serif) are very different, yet they share geometric forms.
• Look for contrast. Caslon and Garamond are too similar to use together.

“Step by step, all those decisions add up. It’s like Stewart Brand says in How Buildings Learn. People don’t begin building a house and plan for adding an addition, but over time, bit by bit, you add to the house. Buildings adapt over time…So do websites.  The small decisions add up even if you don’t realize it at the time.”

(editorial note: I heavily relied on Jeremy Keith’s liveblog of the even as filler/explanation of some of my notes. You can read the post here: http://adactio.com/journal/1588/)

The next session was given by Kristina Halvorson who has been labeled ”the patron saint of content strategy” by Dan Saffer. Kristina’s background is that of a Copy Writer who then morphed herself into a Web Writer — a position that was far removed from the rest of the Web Team and there seemed to be no link between the two. Something she noticed from the get-go was that everyone talked about the user’s experience, but nobody was talking about the content. Throughout her time as the web-writer, she noticed that everyone was looking at user flows, mental models, and then eventually the site map and was happy. All of a sudden, someone looks at the schedule and calls in the Copy Writer (which is usually lumped in somehow with SEO) and is allocated 2 weeks – at most – to research the content, to come up with the content requirements, and finally to deliver the goods…”How did we allow this to happen?!” she asks the group..

Content isn’t a three-step create, revise and approve process. It’s much more complex than that. And it’s never done. (Jeremy Keith’s liveblog of the session)

Lies We Tell Ourselves

We already have the content. This is one of the most frustrating things about Web (re)Design. We already have all the content, so why should we worry about it. Then comes problems with the design or the site is restructured and the needs have changed. The copy writer is then brought in at the 11th hour to ’save the day’.

Content is almost always the last thing to be considered and the last thing to be delivered. This is called the Content Delay Syndrom. In Kelly’s book, she says “Accept it. Plan for it. Charge for it.”

As the Copy Writer, Kristina thinks this sucks. Content Strategy is a much better way.

What is Content?

Content is any element that takes up space on the page. It can be text, graphics, video and/or audio.

What is Strategy?

Strategy is often seen as “what we’re going to do”. Strategy is about answering all those journalistic questions, “why are we doing this?”, “who is this for?”, “what do we have to work with?”. Alot of people actually confuse strategy with tactics.

What is Content Strategy?

Content itself must be useful, usable, and enjoyable. Content Strategy plans for the creation, delivery and governance of content and is made up of 4 distinct – yet integrally tied – jobs:

1. Plan
2. Create
3. Publish
4. Govern

Kristina notes that many times when someone is not held accountable for the content, it usually falls upon “Marketing” and they have a tendency to screw things up.

Governance of content is distinctly important because content is a living, breathing organism that must be nurtured and cultivated. Content is not a feature and it has a lifecycle. Right now, the mindset with content is “launch and leave it”, but content is cyclical and it needs a process.

Content Lifecycle

The Audit.

There are two types of audits, a Quantitative Audit which tells you “where” and “how much” and there’s the Qualitative Audit which tells you how useful the content is. These are the two broad categories but there are more specialized audits like dealing with metadata. Most people thing of content audits in the quantitative sense and say things like, “We’ve got 600 PDFs that cover a wide range of topics!”. This type of audit isn’t nearly as helpful as the quality of the content that you’re auditing with the second type.

The Analysis.

This is one of the most important steps that a content strategist can do, but more often than not, is overlooked. This is where the content strategist will help ensure the content aligns itself on the company’s business objectives. Don’t just jump into action. Even though you may not think you have the time or budget to dive into this part, it is entirely crucial and something you should heavily consider investing in. This is where you consider brand messaging, where you identify your success metrics, define risks and how to mitigate them, how you will be delivering the content, user research, etc. Creating a strategic foundation for your content here is incredibly important and Kristina implores us to not take this step for granted. She also warns us of “stakeholder swoop’n'poop”, whereby she analogizes stakeholders opinions with that of “pigeons that swoop in and poop all over everything”

The Strategy.

After you’ve completed the first two steps, you can finally put together your content strategy. This is where the content strategist really takes ownership of the content and cultivates it, cares for it, revises it, etc. Too often no one will own up to the content. They all try to pawn it off on someone else…”Maybe it’ll be the information architect… maybe it’ll be the user experience designer.” Kristina doesn’t care who does it, just that someone is in charge of it. Always consider what will happen when the content is “out there”. Don’t launch a blog, for example, unless you’re willing to invest time in it.

Final Remarks

The main idea behind what Kristina is telling us is this:

Why do this? Think about why people go online. They want content. Support your users in their quest.

How can you start? The reality is probably that you can’t just hire a content strategist tomorrow. But you can change your mindset. When we talk about user experience, content is missing from the discussion. Let’s change that.

(editorial note: I heavily relied on Jeremy Keith’s liveblog of the even as filler/explanation of some of my notes. You can read the post here: http://adactio.com/journal/1587/)

Last week I had the privilege of going to An Event Apart in Boston where I participated in some great sessions on Web Design from some of the leaders in web design and development community.

The first session was from Jared Spool on Revealing Design Treasures from the Amazon. Jared starts his session by talking about Tuscan whole milk on Amazon, and the reviews included. Amazon stopped selling this milk a couple years ago, but people are STILL submitting reviews — and the reviews are HILARIOUS! A few examples Jared shared with us are reviews written from the perspective of a travel piece, a romance novel, and rock music review. The shorter ones are funny too, “ok product, but you have to buy a glass to use it”.

“How many times have you gone into a planning meeting only to hear the words, “I like how Amazon does it, why can’t we do it like them?” People don’t say that about QVC…what makes Amazon so popular? A few stats:

• 8th most popular site
• 71 million visitors
• $19 billion in sales
• 83/100 in Customer Satisfaction
• 76 million registered users
• 175 million orders.

A VERY successful site by any measuring stick. This isn’t the only thing that makes Amazon so popular though — there are a few features that are nearly invisible that add a ton to the appeal of the website. An example of this would be from within the search results, the user can see when a product would be delivered. Most other sites do this on the product page, not the search results page. Pushing these results up higher allows the user to see important information without having to click deeper into the site. Another example of this idea is that Amazon provides incremental improvements rather than full, site-wide updates. Their shopping cart widget is a perfect example of this sort of iteration.

Based off these stats and the ‘invisible’ design iterations Amazon goes through, it’s no wonder that people want to emulate them. But in order to emulate them we need to understand exactly what it is that Amazon does.

Engage Through Content

For Amazon, their content is their reviews. Shoppers will read the reviews that have been submitted on Amazon and then sometimes buy that product somewhere else. Amazon knows this and is okay with it. They even foster this by allowing people to continue adding reviews to their products that are no longer available on their website. Examples of reviews that are helpful not only to Amazon in driving customers to their sites, but the users that read them are two reviews from a Harry Potter book Jared shares with us. Once is about the content of the book while another talks about the experience this reviewer had with getting the book delivered from Amazon.

The problem with continually allowing people to add reviews is they are shown in a chronological fashion. This had disastrous consequences for Amazon because the crappy reviews were pushing down the good reviews. Naturally, Amazon saw this as a problem that needed to be rectified.

Their solution was a simple one. They added a simple question with a yes/no answer: “Was this review helpful to you?” That single addition to each review, is directly correlated to a $2.7 billion increase in revenue. This simple little addition didn’t rollout with any big announcement of a new feature, but rather no fanfare. This addition allowed the more helpful reviews to filter to the top, while the crappy reviews fell to the bottom. Amazon found out that a simple chronological listing of reviews was not helpful to their users, but the helpful reviews were the most meaningful to their customers. Chronological reviews were only helpful to the author of the book and the people who wrote the reviews.

Some Experiments Don’t Work

Although the key to success for Amazon has been experimentation, we must realize too that some experiments simply do not work. Amazon’s interest in experimentation is extremely large because if an experiment works and is able to increase sales by $5 per order, that leads to an overall sales increase of $875 MILLION. If we as a web development community want to be like Amazon, we have to be willing to take incremental risks.

Amazon Gold Box

An example of an experiment that failed is the Amazon Gold Box at the top of the page that would wiggle at you. The idea of this ‘widget’ was to show that Amazon sells more than just books and DVDs. Essentially, they looked at your purchase history and show you things that are similar but nothing like you’ve purchased before and didn’t know about. This frustrated people because they wanted to see things they were likely to buy. After awhile, people stopped using the Gold Box.

Tags

During the ‘tag-craze’ when every web developer who was worth their weight in gold started implementing tags, Amazon too jumped on the bandwagon. Some of the tags that people started using a lot were things like “book” and “DVD” but these are not very helpful, similar to the tag “not interested”. Someone went through a lot of trouble to tag things that were not interesting to them….so they could come back later and see all the things they aren’t interested in? There are many other tags that people started using for bogus products, like “snakeoil”, “IQ test”, and “waste of money” are all tags that were placed on an ethernet cable that was selling for $500. Why would Amazon let their users tags things in such a non-helpful way?

The big lesson to be gleaned from Amazon’s experimentation is this:

If your people are saying “we should be more like Amazon,” that should really mean “don’t feat new ideas.” Experiment. Some experiments don’t work. Know when to drop the ones that aren’t working…

Jared leaves us with three points:

1. Be careful when emulating features
2. Some experiments don’t pan out
3. Not every use case is the same

You can view Jared’s slides from his website.

(editorial note: I heavily relied on Jeremy Keith’s liveblog of the even as filler/explanation of some of my notes. You can read the post here: http://adactio.com/journal/1586/)