Hi all! It’s been while since I posted a personal update, so I figured I would.

Personal:

I am at a cross-roads right now. One journey is ending, and another is just starting. My wife and I have been working on adopting a little girl from China for the past year and a half. This journey ends at the end of the month. We still don’t have travel dates, but in all likelihood, we will travel to China on May 29th, and meet our daughter 5 days after. It has truly been a life defining moment, and I am amazed at how this little girl has been able to touch people. She has the most amazing spirit, and in spite of all her medical challenges continues to smile. We have about 20 pics of her taken over 2 years, and she is radiating happiness in every one.

She was born with Spina Bifida, and has significant medical issues. We do not know her condition, but we have prayed for her every day. We pray that she is delivered to us safely, but however she comes to us, she will be perfect as she is. We believe that she just is our daughter and she was just born to another person on the other side of the world, that simple… And if your kid is on the other end of the world, you just go get her. That’s it. We are confident God has big plans for this little girl and we are just happy to be chosen to be part of the ride.

I will post some pics of China when I get back. I’m sure I will have a ton. Please pray for her health and her transition to the United States. I am sure it will be very traumatic, but we hope it goes as smooth as possible.

Design

On the work front. I just finished a contract on a Symptom Tracker for Corcept, which I worked on as part of the Heartbeat Ideas team. This was a great experience to design for people whose health depends on medical records. We designed a tracker tool that includes medical record keeping, data visualization and photo features. It was also a fully responsive web app, which was a fun challenge to tackle. The project goes live in Alpha on May 7, and will be posted here as soon as it is.

Experiments

I have also been experimenting with alternative interfaces for collaboration software. I am trying to see what kind of interfaces I can design that would solve current collaboration software. There are so many limits to current collaboration software, and travel is so expensive and disruptive, that it is an obvious choice for the next generation of screen-less- hands free interfaces. I have been working with a combination of projector based/gestural technology. The idea is to make online collaboration more… collaborative. Our current generation of collaboration software really sucks. It is better than a phone conversation, but lacks the ability to collaborate in real time, as well as the ability to consolidate the notes and knowledge of the group for others to have access. My solution includes video, whiteboarding, collaborative notes, and web access all in an intuitive real world style interface. I have sketches, but it’s not polished enough to present.

I am doing this in an effort to design the software of the future, knowing the technology will catch up sooner than later. I have been using this as a part of the “wallboard” project, and it is a very cool concept. I am picking the Wallboard concept up again this month, and it is moving forward, so keep an eye out for an MVP.

Teaching and speaking

I spoke again at the Internet Retailer Web Design Conference on Minimalism in e-Commerce. Check out the deck and the blog post here. This is a summary of the presentation. I also spoke on Competitive Analysis at the How Interactive Conference.

I am going to be offering a workshop on Managing UX/UI workflow soon. Stay tuned. The workshop is in request to several people’s interest in my workflow I designed with my former partner Ben Thompson. It is mainly a tactical workshop on using specific tools, responsibility and formulas to prevent the chaos that ensues on most projects. My thought is that a lot of it comes from a lack of definition of roles and process, as well as using the wrong tools for the job. My opinion is that using the right tools can help manage chaos, mainly because it helps manage the amount of documents and formats that various people are using. The more documents, the more room for miscommunication, duplicated work, lack of time, and wasted effort. Please sign up on my email list and I will send out notification when this happens. I really hope to change how the industry does web design. I think there is a lot of effort that is costing creatives the precious creative juice we need to create, simply because of the wrong tools.

It’s no secret to my friends that I am a thinker. I think deeply and profoundly about the most insignificant things, like when Mystic Manor will open at Hong Kong Disneyland, to why am I here and what does God want for my life. I think constantly.

The other thing that is no secret that my best thinking is when I am walking my dog. He is my best thinking buddy, and we have had full on conversations about my career, life and often times technology and User experience. He has helped me solve some pretty tough UX problems. If you need a senior UX dog, he’s pretty good.

Anyway, I was walking my dog the other day, trying to solve some problems about next generation interfaces that I am working on. I have been thinking about the next frontier in technology, and it seems obvious that the next generation of computers is going to free us from screens and keyboards and touch screens. We are in the infancy of the infancy of computer human interaction, and as crazy of stuff that we are able to accomplish now, I firmly believe you ain’t seen nothing yet. I mean my wife’s grandmother was born when automobiles were new, and they barely had running water in their region. Now they can have a computer in their pocket that can show them their great granddaughter in real time, tell them the weather, tell them the traffic and how much money they have in their bank account at any given time.

DO YOU REALIZE HOW CRAZY THIS IS????????

This IS science fiction already!!

But we really are in the infancy of Human computer interaction. We still have the mouse and keyboard – both devices that are over 40 years old. We just haven’t had the technology to find alternate input devices…. but with the wide spread use of the multi-gesture touch screen, we are now in a position to blow this interface thing wide open.

For years science fiction movies have been dreaming up interfaces that are free floating gestural interfaces. Look at Iron Man or Minority Report. These interfaces are projections on real objects. They are a blend of the real and the digital. The next wave of input devices will get us beyond the screen, back into real life, and will require us to not only use screens, but to overlay digital into real life.

So, back to the future…

In trying to come up with my own interpretation of these new interfaces that don’t exist, I felt it was appropriate to break down interface types into their essence, so they can be rebuilt and remained with hands free devices. The below exploration is my attempt to break all types of interfaces into their essence —why they exist, what problem they are trying to solve – regardless of format or type of software. These principles apply to desktop apps and iPhone apps as well as any website.

Universal approaches to data interaction.

The classes of data interaction interfaces:

1. Consuming data
2. Monitoring data
3. Data visualization
4. Transactions
5. Search data
6. Enter/Capture data
7. Organize data
8. Edit data
9. Authorize access to data

Consuming/Reading data

This is how most of the web is designed. The largest portion of how we interact with the web is the consumption of information. The class of consuming and reading data can take the form of not only words, but audio, maps, graphs, video, or any other type of static data. The goal of this type of interface is the transfer the data from the computer to the viewer as quickly and efficiently as possible in order for the user to do something with with it, or to simply be informed.

The main controls of interfaces like this are:

• Control the amount of content you view at once time – scale window, zoom, etc
• Manoeuver through content – scroll bars, play/Stop, next arrows
• Advance to next segment of content – article video, etc

This USA Today detail page is an example consumption page. The page is designed around understanding the text, and provides similar content to encourage further consumption.

A few types of examples of a consumption interface:

• USA TODAY News article
• Google Maps
• Marketing websites
• Flickr display page.
• YouTube player page

Monitoring data

This is the review of data that is constantly changing. The timeframe for the change can be from milliseconds to years. The purpose of this interface is to see progression and see in real time how data is changing, and to recognize the change. There is also a priority that must emphasize numbers that are changing and removing all other information in order for this type of interface to work.

Main controls:

• Ability to view whatever numbers are needed. This can be a "show everything at once" approach" or the ability to switch quickly, since this type of interface is time sensitive.
• Ability to see past data or compare data

This Bloomberg app for iPad is an example of a monitoring app that allows users to see multiple streams of info in order to make decisions on buying and selling stocks.

A few examples:

• Bloomberg stock window
• An Airplane cockpit
• Google Analytics dashboard
• Weather forecasts – hour by hour, 10 day, etc.

Data visualization

This type of interface is designed to show you information in a new way. It takes information and displays it in a way to hopefully show you trends and insights or communicate abstract ideas that otherwise would be hard to communicate. This is the computer equivalent of using infographics to display information, however the data visualization interface allows the user to manipulate the parameters of the data to his liking on the fly. Almost like having a infographic designer at his fingertips to instantly create the infographic that he desires. All in a pixel perfect accurate fashion.

What are the differences between Data Visualization and Monitoring interfaces?:

Although this type of interface frequently can "look" like a monitoring interface, the key difference is that Data visualization interfaces are not designed for split second or timed decision making. Data visualization interfaces are mainly there for absorbing data and interfaces and letting the information stew prior to action. Monitoring is designed for immediate action. For instance, there is bad weather ahead, so I need to steer the plane in a different direction. A Data visualization may be an analytics report where you can see how people are using the site over time, so that as you make design changes, you can take that information into consideration. Visualization is for consideration, monitoring is for action.

Needs of this type of interface:

• Control the parameters of the information – change date, change units
• Compare/Choose multiple streams of data
• Choose visualization type – possibly graph, list, overlay, 3 dimensional,
• Manoeuver through visualization – advance time, see more/less, move in direction (3D)

This Mint.com dashboard allows the user
to visualize his/her spending habits in a way that might change behavior in the future.

Examples:

• Mint.com
• Analytics detail/reporting pages
• Photo timelines
• Weather Radar Maps

Transactional

This type of interface involves 2 way communication with the computer. Much like a game of chess, this type of interface works on a move by move basis. You move, the computer moves. You move again, the computer responds again. Back and forth into a dialogue between human and machine. The machine is in essence doing the work for the human. This may be using the computer to control the physical – i.e. routing a plane to a location. It may be digital – i.e. using the computer to place an order, or send a print job to the printer.

Requirements for Interface:

• Feedback to the user. Since this is a dialogue the user must get constant feedback on what is happening
• Controls to adjust outcomes- As information comes to the user, the user needs to be able to adjust what is happening. This can be movement controls such as in a map type interface, or it can be in unit adjustment – how many what kinds of unit or even where the information is going – i,e, switch printers.
• Send/Submit information – The computer needs to know when the user is done and ready to complete

This Product page is a perfect example of a transactional page. At this juncture, the user is supposed add the item to cart and have a 2 way dialog with the interface in order to complete a “transaction” or a specific task.

Examples:

• Checkout on an e-commerce site
• Buying tickets at Ticketmaster
• Print dialogue
• Adobe Photoshop artboard

Search Data

This type of interface is concerned with the location of information. This is the type of interface you use when you need to give the user the ability to find information. This can be things like open search fields, but this is also the class of interface for browsing. Much like trying to find something you are looking for in your house, the user needs to find a piece of data in the system, and needs ways to find it. Since they cannot physically get into the machine and start looking for stuff (at least not yet), they have to use a viewport and some controls in order to find what they need in order to manipulate, monitor visualize, etc.

Requirements for Interface:

• Hierarchy of data: Data structure in order to browse information according to a classification.
• Open ended search – the ability to search free form. Some examples might be type your search, but it also could be voice activated, where you tell the computer what you are looking for
• Parametric search
• Submit search – a method for letting the computer know you are done setting parameters or entering your open ended search. This could be a button or a pause in your voice.

The classic search interface. Google’s search interface is one of the world’s best for a reason. The Google team has removed all extraneous information from the search task

Examples:

• Google Search
• Siri
• Category trees
• Shazam

Enter/Capture Data

The ability to add new data to the system is another key feature of any interface. Data does not appear out of thin air, so there must be a way for a user to capture data, be it by filling out a form or using an external device to record. Like the monitor interface type, this type of interface must have no distractions, to keep the integrity of the data, and maximize ease of entry. Let’s face it, nobody likes entering or capturing data, but it is a necessary evil.

Requirements for Interface:

• Ways to input: form fields, start record, take picture, etc
• Ways to stop input; stop button
• Submit data

This time tracking software is an example of a data entry screen. The screen focuses on form fields removing all other information, so the user can focus just on the task of entering data into the computer.

Examples:

• Time tracking software
• CRM system customer page
• Sound recorder

Educational/Instructional

Some interfaces are designed to instruct you on how to do something. Similar to monitoring and transactional interfaces, these are done in real time. In contrast to consumption interfaces, this interface breaks the information up for you in bite size pieces in order for you to respond in a timely fashion. It may also be something that teaches you how to use another interface, or it could be instructing you on how to do a physical task, such as play tennis, or turn by turn directions in order to drive your car to the right place. The instructional interface gives you quick references to do another task be it digital or physical. It can also be used in learning information, but the structure is shorter and faster than a consumption interface, and often gives you more information to choose from at once.

Requirements for Interface:

• Labels ; in the instance of a software tutorial, this may be label overlays on all the tools of the software. In a virtual reality software, it may show you places on the street.
• Additional information: This info is the additional information needed by the user to complete the task. This may be the address or phone number of a place on a turn by turn GPS software, or a short video on how to swing your racket.
• Steps: Another difference between educational interface and consumption is the introduction of steps, and that a user must complete several steps in order to complete the task. A short tutorial on InDesign will have several sequential steps that you must do in order to learn how to use the software.
• More detailed information: This is an option for the user to get much more in depth on the topic at hand. for instance. If there was an anatomy software that labeled the lungs, and had a shore video of how the lungs worked, there may be an additional library on lung related diseases, how to maintain healthy lungs, biochemistry of the lungs and more. Or for instance, you are looking for a restaurant, and the interface offers reviews by critics, the history of the restaurant, articles on its owners, etc.

This GPS is an example of an instructional interface. The goal of the interface is to instruct the user how to do something and react to his movements or actions.

Examples:

• GPS directions
• Software overlays: ipad and iphone apps often have a quick introduction on the software along with overlays of the controls telling what each control does.
• Lynda com – This is a consumption/learning interface because the content is exhaustive, but each tutorial is designed like an educational interface.
• Yelp virtual reality mode
• Stargazer app

Organize data

Users need the ability to take data an rearrange it to be findable. This is more likely a part of a screen, such as a search screen, but this type of interface allows users to classify, label and organize data, such that the search interface can find it. This can be an interface that allows metatags or a category tree for moving customer records around from one section to the next. The key of this interface type is that it allows you to move data around into places that make it easier to find, and creates metadata for parametric and freeform search

Requirements for Interface:

• Create/Edit categories
• Move data to category
• Label data

Evernote notebooks are a way for you to organize data into folders, The interface allows you to update folder names and move notes from one folder to the next easily.

Examples

• Evernote Notebooks page
• OSX Finder
• Email client main screen- Mac Mail, Outlook, etc
• iTunes

Edit Data

The goal of the edit data is to take data that has been entered, and to give the user the ability to modify this data. This is not always text or form fields as we might be inclined to think. This may be to edit photos or video, which is why it is distinct from the capture enter data. It may also be to edit field data, However the difference between this type of interface and the enter, is that it may afford the user to edit the data one piece at a time, which requires a different interface than entering data. For example, a user may create an account in the checkout process, but the "edit account" will be a different form because the task is different, and may contain all the parts of the record that were not required to enter the data.

Requirements for Interface:

• Edit data
• Separation/categorization of information on the record
• Submit changes
• View/preview changes

Examples

• Magento product
• Amazon customer profile
• Quickbooks edit check

Communication

Since there are now video chats, audio chats, instant messages,etc, there is a different class of interface that is not for communicating with computers, but to communicate with other human beings. This class of interface allows you to select a person to contact, a method by which to contact, and an interface for the actual contact. This class also includes virtual collaboration tools, for people to work on or see the same things from 2 different terminals or locations.

Requirements for Interface:

• Select a person/location to contact:
• Select a type of communication – may be video, text or audio or photo
• See who is available to be contacted – may be availability or security issues
• Controls for communication – size of window, bandwidth, mute, etc.

iChat is a class of interface that allows users to communicate with one another. In this case, video, audio and text are all used.

Examples:

• iChat
• Google Hangout
• Skype
• email clients

Authorize access

Interfaces that authorize access are very simple. They have one goal: To get the computer to recognize who the person using the machine is. While most often we think of a login screen, if you think outside the box, this can be voice recognition, retina scan and/or thumbprint. The key is that the user inputs something into the computer that allows the computer to cross reference and serve up the appropriate information or access based on the identification.

Need of the interface:

• Input of verification information: While we all know the "user name/password" type of verification, this might be a microphone, a video camera or thumbprint scanner
• A means of submission: This can be automatic such as a pause, or when the computer has a match or a submit button or a change of focus on a field.
• Feedback on why or why not authorization has been approved.
• Alternative means to verify: there might be an additional method for verification, such as sending an email to recover password, a different data type – such as an email vs user name verification or Security questions versus user name password.

This MailChimp login is a screen we see every day. It’s goal is to authorize the user to access his account.

Examples:

• Mail chimp login screen
• Edna Mode’s house in the Incredibles
• FTP/VPN/Connect o server screens or modules.

What does all this mean?

The above classification is the results of an exercise to understand interfaces better and to break them down to their essence. I find that we don’t spend any time wondering why we have a content detail page or a category tree. Those tools evolved as a way to solve the larger problem of interacting with data, and what we as humans need from our machines. Why do we even have computers in the first place? They allow us to help interpret our world, help us see new things, new information that we otherwise would not be able to see. They help us communicate. They help us store data for repetitive tasks.

In innovating for the next generation of computers and interfaces, it is important to know the essential types of interfaces that we are encountering and what are key elements of those interfaces, so we can reframe the problem. Does a data capture interface need to be a form? Can it be voice? Maybe it’s brain waves at some point? Who knows. If we don”t consider the problem from alternate angles, how do we expect to get us from where we are now to a new solution.

This list is not exhaustive, but meet the requirements of most interfaces I could come up with. In the future, I may add some additional types, but these are the main models that I could come up with.

Does classification help you in your everyday work now?

Maybe … or maybe not. I am an over-analytical fool, and love to look at problems from different angles. If I am designing a content site, and I realize that I need a consumption interface, and a search interface, I might try recreating these elements in a new fashion. If I know that my main task is to monitor something, I might add a visualization tool to the mix to make monitoring easier and more insightful. You can try breaking up the pieces of the puzzle at their essence and put them back together in new and exciting ways.

And let me know what you come up with.

Minimalism has always had a great relationship with retail. Since the 60′s when minimalism started to take off, upwardly mobile consumers have embraced the design concept’s beauty, and closely associated it with products of high quality. Ever since, minimalism has been a design style that emphasized a high design aesthetic. It is closely aligned with the principles of simplicity from whence it springs. Using it in design and marketing makes products seem more designed and “simpler” as well.

Influences on Minimalism

In my research for this article, I came across minimalism of all types: design, art, film music, photography, architecture. All of the disciplines embraced the concept and had their own take. I would say the most known disciplines to embrace it are art and architecture. Drawing from Japanese concepts of balance, simplicity and geometry, Architects have been inspired by minimalism for over 90 years. The concept of minimalism removes everything unnecessary and only keeps the necessary. It seems a good fit for architects, who in an attempt to create harmonious space, want to create an environment that feels spacious and expansive. The expansive design in a physical space gives you a feeling of relaxation and calm, which is the goal of most spaces.

The other main concept architects brought to minimalism was the use of top notch materials. Architects brought in high quality woods and textures, and added them to open spaces. The effect is that you really notice the nicer materials. Also adding a minimal amount of furniture allowed architects and interior designers to invest budget into a smaller quantity of furnishings, but at the same time purchasing higher quality. These higher quality furnishings and materials had more impact because they were left on their own to create impact. If you have little to look at in a room, you focus even harder on what is there. If what is left is high quality, it evokes a feeling of quality. Plus the feeling of expansion.

Web designers have taken the concepts of architects and applied them to the web. Whitespace, high end materials (such as custom photography, and illustrations), minimal elements and simplicity are all concepts that translate well to web and UI design. Visual and web designers have embraced the concepts and applied them to the medium. The effects of minimalist are the same in web design and architecture. In essence minimalist design:

• helps users focus only on what is important by removing all distraction
• gives users a feeling of relaxation and space
• connects with an emotional desire
• uses space and geometry to instruct and guide uses
• maximizes impact by removing all extraneous elements
• engages users by making them think about how the interface works
• creates a sensation of value by aligning it with other high design
• but most of all… minimalism embraces simplicity.

Remove Everything Till It Breaks.

Minimalism embraces only what is necessary, and removes what is not. It is about using only the best elements, placing them in an expert fashion and removing all that is not necessary…. and it is not easy. It takes focus, prioritization and restraint. It takes balls. It is bold to remove everything but what is necessary, and not fear that the viewer or user will not get it because of a lack of information. It is precisely this boldness which catches people’s attention and draws them in.

Take a look at the ad below. You notice a speck in the center, and try to make it out. It is only after you read the copy on the right (which is the only other element that draws your attention), that you figure out that it is a car. This ad plays a great visual trick on the user, in which the artist has got them to think by making them look for something hidden, and then, drawing them in to question what it is. Only then do we give them the answer in the lower right.

This ad illustrates a perfect example of how minimalism works. It makes our prediction sense fail, and we pay attention. We expect the page to be filled with a lot of stuff that is easy to see and to read. Most of what we see is full and easily legible. When we see something missing, it engages us and makes us question why what we expected is not there. It draws us in and makes us demand an answer to what is the speck in the middle of the page.

When it comes to minimalist web design, we engage the user by putting few elements on the page. We further engage by using beautiful elements on the page, and expertly placing them to lead them in the direction we want them to go. We minimize options and give the user only the right choice at the right time. The following trends are techniques that web designers have used to create the same effects of spaciousness, beauty, and simplicity for maximum impact and engagement.

5 of 9 trends in minimalist web design:

1. Big luscious photography

With minimal elements on a page, a beautiful photograph sucks you in like a vacuum. Imagery provides an anchor for you to focus on and balanced with a minimal amount of distraction, are incredibly impactful. The below sites each uses photography in a unique way

Suit Supply- Unique Image Style

Suit Supply uses a unique image style to create engagement and draw users in. The designers of the site have done more than just create great photographs, they have created a compounded effect by unifying the style. They all have a specific look, as well as an action to them.

Lilybalou – Minimal impact navigation

This site maximizes the impact of the full screen images by using a thin minimal navigation system, and then placing it at the bottom, so the page feels more like a photo gallery than a website. They compound that with interesting front face shots of children to suck you in.

VanMoof – Full Screen Background images

Van Moof is a bicycle manufacturer based in New York. The company offers simple bicycles that demand top dollar. This site ups the ante by using free floating content and navigation, and full screen images. This allows the images to be even bigger (or smaller) and makes the images and the navigation look separated.

Manufacturer d’essai – Emulate a Magazine ad

Using a continuous scroll this site, this site uses large imagery to emulate a gigantic magazine spread, adding interactive elements on the page.

2. Minimal UI and navigation

Simplicity should not only apply to the amount if items on the page, but also ornamentation. The next samples are ones that remove all elements from the UI framework – all extra strokes, shadows, heavily contrasting colors, and nav bars, and removes them. These samples minimize the amount of options for navigation in order to make users go down a rabbit hole, and not distract them with extra elements. The UI is also transparent, and sometimes removed all together. The concept is to make the page look like art, and less like UI.

Apple - forked navigation

While Apple is a company that often exemplifies good design, and there is probably not an experienced web designer alive who hasn’t been told a million times to design it “simple like the Apple website,” one of the main concepts of the apple website may not be known. The Apple website has a very simple navigation system that forks users down a certain path, and does little to cross pollinate the path. The site, as of this writing, forks by product, and immerses you in the experience of each product. It removes distraction by strategically using the fork strategy. The forked strategy is further characterized by a limited amount of navigation options (anywhere from 4 to 8) on the top level main nav. The minimalist nav philosophy is that if you have less options you will not be overwhelmed with choice and will try one of the main options, as long as the “scent” of the information is clear. Apple does a great job using this approach and giving users the scent of information to keep them clicking.

Shoe Guru- free floating products and navigation

Shoe guru removes almost all UI elements, and free floats products. The nav bar is simply text without any ornamentation – shadows, strokes, button effects. The product display emulates a shoe wall that you would see in a shoe store, and shows only the price and name. This allows the products to really shine and be viewed without the design overpowering the product photos.

Shopbop – Type as navigation

Shopbop does a similar thing as Shoe Guru by using only type as navigation. The site further reduces all UI to simple boxes with black borders to simplify type and maximize the impact of the banners and product display.

RueLaLa – content as navigation.

Because of the limited amount of product in each nave category, RueLala.com uses a different strategy. They put all of the content available in one long page, and have users click direct to the category grid simply by clicking on a big beautiful product image. They use a grid approach, and while they do display a lot of content on the page that one may not technically call “minimalist” the approach here is to maximize engagement with a single page, which creates simplicity for the user, which is a key principle. Also, while not technically discouraging the user fro using the nav bar, the strategy is to use the nav bar more as a filter than proper navigation. This style of navigation has been popularized by the iPad and tablets, which in the interest of space, designers have been using hidden/collapsable navigation in order to create more space for content. As a result, they made large tap targets, that they designed for users to click on, and voila, the use of big images, minimal navigation, forced users to tap on the images, which in turn causes content strategists to create more intriguing targets to tap on.

3. Balanced Typography

The hallmark of minimalist design has always been type. When used properly, Type can create balance, asymmetry, clutter, space, density, and color. It has been the weapon of choice for minimalists for years because of its ability to convey messages when combined with images. And let’s face it beautiful typesetting is… well… beautiful. It’s engaging and exciting, but can stand all on it’s own to communicate messaging ideas. It can be used in and of itself to prioritize attention, and can be used all by itself. The below sites, use type, (expertly placed, expertly set) to create interest and lead the user to the most important items on the site.

Bored of South Sea – Typesetting to clarify calls to action

Bored of South Sea does a grew job of using dynamic to to draw attention to it’s calls to action. When used in conjunction with a minimal amount of type styles (as illustrated here), larger or contrasting type calls attention to itself to clarify calls to action in buttons and banners, and UI.

IWC – dynamic type for interest

Iwc has a bit of a different approach. Instead of a simplified approach, IWC uses several different sizes of type with the same uppercase setting to create a rhythm.,/p>

Fossil - simple typesetting for clarity

The Fossil site uses less type styles and contrast in order to draw attention to the main image section, and reduce attention from navigation. The effect is a very “cataloge-y” feeling website. It feels much more like a great catalogue than a typical e-commerce website.

4. Hiding everything

“If you can’t get rid of it… hide it.” —John Maeda

As Interactive designers in e-Commerce, we often are told that you cannot hide anything because of the hit to conversion rates. The thought is that if consumers can’t see it, they don’t know it exists right?…. hmmm…. not always.

As designers, we are constantly in search of the beautiful, the simple and the elegant, and nothing is beautiful, simple nor elegant about filling a page full of a bunch of crap. It is no longer design at that point. It is retrofitting. John Maeda in his book “Simplicity” has a long section on the topic of reduction. His thought is that simple design only contains the necessary, and removes the extraneous. If something cannot be removed, then the next course of action is to hide it. In designing products, this means covers and minimal controls. In interactive design, we must create intrguiging UI and delightful interactions in order to engage users and make them want to click. It is very difficult and a slippery slope. How do we create a visual design that draws attention to hidden things so users can find what they need, without going so obvious that the site becomes clunky. messy and disorganized. At the same time, conversion rate and usability cannot be sacrificed. The below sites do a great job of engaging the user, so he wants to click around and find the hidden UI elements, making it very fun along the way.

Nixon – Interactive elements using patterns for learnability

nixon.com is one of my favorite sites on this list. It makes you want to play with it, because on every interaction, something cool and new happens. Information is displayed on interaction, not upon load. Things like expanding menus, the banner images with hidden captions, and filters that expand, all create a great cohesive experience that encourages engagement, while serving users at the same time. It sacrifices little usability for the cool factor.

One of the concepts they use in order to create predictability is reuse of interactive design patterns. The 2 key ones are the expanding menus( which are used fortop level navigation, as well as the filter set), and the hover captions on the large images. This minimal set of patterns makes learning the site a breeze and improves usability.

Uniqlo- Universal scroll to reveal more

,p>Uniqlo uses a different technique of hiding that some might not call hiding – the universal scroll. I would argue the way in which they do it is a hiding technique… you just use your scroll wheel instead of your click to expose. The effect is the same – it feels like you are discovering more content as you scroll and it feels like you are uncovering content.

Makr.com – Hide labels

Makr.com does a greet job of keeping an ultra clean page by removing all type from the page until you hover over an image. The effect is an easy to read and elegant product page. They further enhance the page by adding an accordion display of the product upon click, which reveals more information as the user requires it.

5. Graceful Responsiveness

One of the fringe benefits of minimalism has been to make responsive design easier. The approach of minimal navigation, large images and minimal ornamentation makes responsive design easier, because there is simply less to scale. Large images scale nicely, there is less type and less ornaments that need to be retrofitted to the multiple screen size. If there’s less to scale, then it makes design, development and upkeep simpler and faster.

Indochino – Going larger gracefully

Indochino does something most designers don’t consider— going large gracefully. While everybody is rightly concerned with mobile devices, this site also accommodates big screens very nicely. Using large tiled images, this site fills the screen and creates a beautiful experience not only for small screens, but for big ones as well.

Tattly – minimal oranmentation to make responsiveness simpler

The Tattly site is truly simple: Just text, images and a few strokes. Their strategy of keeping things simple makes responsiveness easier because there is less stuff moving, shifting and scaling. This means easier coding, QA time and implementation time. If you put a site like this together the dev team will love you. Simple, elegant, AND easy to code.

Five Simple Steps - Simplified grid

Five simple steps combines minimalism with a basic grid structure to make responsiveness easier. They use a simple 2 column grid that expands and contracts and scales images. They have worked this into the design so that it feels right and scales nicely. They took advantage of the simplicity of the layout and the whitespace to make the grid flow smoothly and make the scaling to alternative devices headache free.

That’s it for this issue!

I will do numbers 6 -9 in the next few weeks. In the meantime, you can checkout the presentation slides on slideshare.net. Email me with any questions.

In 1995, following the success of Toy Story, Pixar animation studio tossed around the idea of starting a sequel to the hugely popular movie. The project was approved by Disney, and the production started in 1998. The initial scope of this project was to be a direct-to-video 60 minute video, however, on initial viewing of preliminary reels, Disney execs Pete Schneider and Joe Roth, decided to upgrade the movie to a feature length animated film.

Seeing as the movie was not a primary concern when production started, most of the more experienced team members were working on A Bugs Life. Additionally, Director Lee Unkrich described the story as “all over the place.” Once the movie was upgraded to feature, 12 minutes of footage needed to be added to the movie, so Chief Creative John Lasseter and the rest of the story team scheduled an emergency “story summit” over a weekend, which at the end they had hoped to have the initial 12 minutes that they needed.

In actuality, what came out of that meeting was a whole new story. Top to bottom rewrite. The team members took a hard look at what they had, and realized that ultimately it was a mess, and needed to be scrapped. It was a tough decision, but having an incredibly high level of creative integrity, they knew that they had to start from scratch.

But it gets better. They burned through so much time, that they had to deliver a completed film in 9 months. Just to give you perspective, a normal animated film (let along a cutting edge 3D animated film) took about 3 to 4 years. So this was not only an issue of throwing away thousands of man hours, but also producing the new movie in a quarter of the time.

As we now know, the movie was insanely good (I am an unabashed Pixar fanatic), and this was indeed the right decision. I am sure it was not an easy one though. However, the team had learned so much in the stuff that they threw away, that they were able to start again, from scratch, and build a story that met the goals of the new criteria: a feature length film.

Starting from scratch

When starting a new design project, we start by defining scope and requirements for the project, and once scope, requirements and strategy are defined, we start working on concepts. Oftentimes, we try several comps with different approaches. In trying those different concepts, we pick one to start with, and then retrofit requirements that are not met on to the approved direction, with varying degrees of success.

What happens when there are one or many several fatal flaws in the design that start to be uncovered? On a complex web project with several moving parts (social, commerce, advertising, etc), no matter how many questions you ask upfront, you are going to hit roadblocks. There are going to be requirements from other departments that the core team is unaware of. There is going to be a learning curve, especially if you work for an agency. At an agency, you will not have the benefit of a history and will have to take requirements at face value by a third party, and you may not have access to have a conversation with these people. This makes the job even more difficult.

If you add to this an expectation by client or stakeholders that the approved design would remain in tact, but that a few things will be retrofitted to accommodate the requirements, there can be trouble. I personally have found this situation a “lose, Lose” situation until I figured out how to handle it.

After presenting initial concepts, throw them out and start from scratch.

The Spike

Why would someone work for a few weeks, and throw away all the work? A builder doesn’t work for 3 weeks, and then tear down the house and build a new one? Filmmakers (usually) don’t film a movie and then start from scratch? Why would you complete a design and then throw it out.

In Agile development process, there is a term called a spike. A “Spike” is a short period of exploration where a developer will try a few things simply with the idea of learning what they need to, and finding out a strategy to move forward. It is timeboxed, usually to a sprint, and at the end of the sprint, all the code is thrown away.

Yes, thrown away.

The idea with a spike is to learn all that you can by doing it once, making mistakes, not worrying about clean code, trying stuff out, uncovering possible risks that can only be uncovered by working on something, and then writing clean code on the second attempt. Developers are often faced with new technology, and often have to program things that they simply have never done before. You can’t get everything right the first time you try something.

In design, we have experience with solving similar issues, but we never create the same project twice, so we are doing the same thing as developers: trying something new that we have never done before. Furthermore, we are working with a complex set of moving parts, all of which need to move seamlessly, so that the business, consumer and developers all are able to complete their tasks. It requires exploration.

The Fail

As projects have gotten more and more complex, I found by accident, that the idea of creating a concept and refining it, doesn’t work. I had the fortune of being on a few projects where the business lacked focus, and we had to start from scratch. In doing so, the things we learned in the first iterations led us to a bulletproof v 2.0. Fortunately we had not started development on a project that was just not right. We did what Pixar did, and threw it away. It just wasn’t right and it wasn’t working right.

One of the most important lessons I have learned is that good design does not need retrofitting. Good design just works. There is not a long list of exceptions for use cases. There is a minimal list of adjustments for use cases, but overall, I’ve found that if you find yourself coming up with an unreasonable amount of interactive accommodations, you have the wrong concept. Another barometer, is that after one round of revision, the excitement is gone, and there are a bunch of additional use cases that are not met. This is another sign that your design is not right.

The Solution

When working on projects now, I treat every concept as a spike, and throw it all away. I make note of all the things that are working, and bring those over to the new concept. I also have all the assets from the previous iteration, which saves a lot of time (although I start with a completely new document as well). By trying a lot of things, running into problems, asking more questions, thinking through more operational and user scenarios, you will compile your “real list” of requirements. Some things that you thought that might be negotiable, might not be possible due to time or budget constraints, and it is better to create a unique solution that is solid from the foundation than to retrofit an idea.

I also make it very clear to stakeholders that we will be starting from scratch on ONE concept from our findings, and we can do it in less than a quarter of the time. We will also come up with the right solution this time, and that the exploration allows us to try new things without hitting it out of the park on the first try.

If it’s the right solution. It will just work and you will know, and all the stakeholders will know.

Don’t be afraid to throw everything out and start from scratch.

I don’t know when it happened or how it happened, but it happened.  Everybody has stopped solving problems, and started using features.

Until recently, products have changed focus from a problem and proposed solution to a tool that does all this cool stuff, that you have to find a use for it. This shift has changed our focus as designers and product developers from a world of  “must have” great products to a world of  “nice to have” superfluous items. The result is “featurism” — the belief that a product, app or website is a bunch of features, and not a solution to a problem.

The “Why” Factor

In his book called Start With Why, Simon Sinek goes into grave detail about the fact that “People don’t buy what you do, but why you do it.” He goes on to describe the “feature” mentality discussing brands like Motorola and how the Razr lost its market share to products like the iPhone rapidly because of a focus on features. The Razr had a focus on speed, size, colors and materials versus with the tag line “thin.smart,strong” and in the end failed to create any sort of loyalty because it was just fluff. Sinek’s argument is that people buy your philosophy, your belief system, your world view, and THEN what you do.  He uses Apple as an example of his theory:

“In everything we do, we believe in thinking differently. We believe in challenging the status quo. The way we do that is by making our products beautifully designed, simple  to use, user friendly. We just happen to make great computers. Wanna buy one?” 

as opposed to:

“We make great computers that are simple to use, user friendly and beautiful. Wanna buy one?”

The difference of starting with the “why” is much more compelling It goes much deeper than just the description of product and the features. In a world of featurism, I would like to propose an amendment to the maxim of “People don’t buy what you do, they buy why you do it:”

“People don’t buy what you do, but how and why you solve their problem.“

Why don’t you have a nice tall glass of Kool Aid?

It was a slow transition from a world of challenges, problems, needs and solutions to a world of products and features, but the advent of new digital devices and the internet, companies now tryi to sell us on this new cool feature and that cool new feature without directly speaking to the actual need the of the consumer.  We often neglect how this new feature actually fixes their problem  We, as a society have drunk the featurism Kool Aid.

And developers, and especially product people are drinking the Kool Aid too. As a result, designers are often put in the position of adding features at will without putting the features in context, and helping the team to understand why x,y, and z features are the right solution to the problem.

A Battle of the Superheroes: Features vs. Narratives

As a designer, you are in the trenches everyday of design constantly solving problems, either visually or functionally, or both. Seeing as there is precedence and convention for solving problems, we can often cut right to the chase, and offer a solution without thinking of the need we are fulfilling. A need to share something I find online turns into “social features.” A need for me to choose a product to buy that meets my needs turns into “reviews, descriptions, photos and videos.”  While all of these features solved their respective problems, all the “features” seemed have skipped the vital step of understanding the users needs, putting down the “usual” or “conventional” methods of meeting those needs. But, here’s the issue:

They are just one way to solve the problem.

In a world of tons of products, innovation in design means solving the problem better than our predecessors, be it incrementally or dramatically. But true innovation gets to the solution of the problem, without giving a bunch of ideas to cover it up. As UX designers, our job is to help everybody take a step back and help our team members understand the application in context, and educate them and solve the problem with new eyes,

While there may not always be budget or time to truly innovate, as UX designers, we need to consider first and foremost “What are the problems this product is trying to solve?”  rather than “What set of features does the product I am designing need?” and lead our teams with that frame of mind. We are there to serve the user, by understanding where he is, what he needs, and help him get it. We are the barrier between where he is (disgruntled, and insecure about his situation) to where he wants to be (secure with a solution, and knowledge about how to solve his problem in the future). With our unique knowledge of design, computers, the internet, database systems, programming languages and API calls, we create a tool to solve his personal problem. In doing so we solve a problem for thousands or possibly millions of people with the same problem (and hopefully we retire to Aruba, but that is the subject of another article).

In this feature laden war-zone, what is the Kryptonite for Feature Man:

Using narratives to describe user scenarios

User scenarios are what tie the feature to the problem, and get our user started off to where he wants to be. If the business that you are working on truly provides value, there WILL be a narrative. A narrative of what information the user needed that our system provided, and what the system did. For instance, if my problem is that I need to transfer money between my two accounts, the system told me how much I have in each account, indicated to me what I needed to do to transfer the money and then performed the transaction finally letting me know at the end that the transaction was complete, Voilå … narrative.

The best way to create a product is to figure out all the user scenario narratives you want the app to cover, and then figure out what features are needed in order to solve the problem. In the above example we know we are going to need a balance check, a list of accounts, a date of transfer and an amount of transfer at the very least. We may want to add a “transfer later” feature, or possibly a “transfer to an account at another bank” feature, but we will need to write the story and the situation that our user finds himself in before assessing if those features are needed, and if the business wants to meet those needs. If the philosophy of the business is that they are a full featured brick and mortar bank, they may not want to give the user that option. If they are an internet bank, it may be integral to completing the task.

Why narratives?

Going from features to narratives takes a change in perspective, but in the end it will allow you to:

• Create new solutions without being boxed in by previously conventional solutions to the problem.
• Quickly assess the effectiveness of the solution
• Create a rich narrative by including persona development and research findings on behavior
• Create a more useful app that was designed for real people

I would like to suggest that as a part of any application or website, even an informational marketing microsite or landing page, that you create a story. Storyboarding as long been a tool for creating scope on projects and helping to visualize products, and I what would like to offer is an approach to storyboarding that is less drawing for those of us a little less sketch inclined. At the same time this approach will clearly define a use case for business people and product managers, as well as giving us UX designers the freedom to dream, to innovate, and to boldly go where no application has gone before… or at least make one that doesn’t suck like the other competitors.

A Great Story

In creating a useful story, you will want to tell the story of a person in a situation, and how he used our product/app/website to get from point A to point B. Describe the problem, and a step by step account of what happened when to solve the users problem. In the case of an informational site, this may be something a little simpler, such as “a consumer wants to find out what ingredients are in our products and what each of them do.” It can also be more detailed including buttons, gestures what they see on their screen, and data transfers between their machine and the server. The main idea is to show how this app is to be used in real life.

Another thing you will want to do is to use your personas, and attach them to their story. Your personas are the characters in your story. With your persona document, you have set the stage for your team to know who we are talking about, what motivates him, what are his tastes, where does he live, etc. It is the background on the character you would expect to find in the first few chapters of a book, but for our purposes, we are going to sum up with bullet points to keep it short and sweet. Each of your narratives will start with whichever persona needs to accomplish something, and will end with them riding off into the sunset, fait accomplI.

Defining all your narratives

The first step in creating the narratives is figuring out all the use cases for each of the personas. I usually end up with 5 to 10 narratives, but on a large site it could be as many as 20 or 30. Remember these are going to be used to create product requirements, which you will turn into wireframes, but for now you will need to brainstorm with your team all the things you hope for someone to do on your site [epics]. For instance on a banking site, you would include:

• Transfer money
• Pay Bills
• Check balances.
• Download transactions
• Download statements
• Etc

Once you have all the items compiled, group items that might go together such as check balance, transfer money, and pay bills, All those three items can be put into one story. It is a real example of what a person would do in one session on a banking site. You can use your research interviews to put these together from real life situations. If a participant told you that they often download transactions and statements prior to reconciling at the end of the month, then you can confirm that a real person actuality did these items.

The other part of the definition that is often neglected is the internal story. There is a story inside the walls of your organization. The site usually doesn’t just magically create new content, manage itself, and answer customer concerns., your organization does that. You’ll need to create narratives that explain internal procedures from the point of view of the administrator/customer service people, It may include how support is handled, and how that shows up on the front end, It may include what happens to your personas request for help, and how they answered it (email, call back, etc). The people at your organization are personas as well.

Sometimes there are several points of view for an app, and you will have several “consumer” personas, but you may have secondary personas as well. I was working on a consumer app, but we had businesses that were using the admin on the app, as it was a tool for consumers to find businesses who give a portion of their sale back to charity. The businesses needed to record transactions, create reports and make payments themselves, so we created a story for each. Don’t neglect these narratives. If you have a product that a customer is an admin, but not the “consumer,” you will want to storyboard those out as well.

Creating Your Narrative:

Once you have everything defined, you need to put all your actions into a narrative. Most sites have a 3 step process for interaction, kinda like a movie. It has a beginning, a middle and an end. Again, good enough for Grandpa… you know. So break the lifecycle into at least three parts, and tell the narrative of each of our personas at that point. In our bank example. There will need to be a discovery or marketing phase where our persona is in the process of figuring out what services the bank offers in order to open account. This may end with her opening her account online. The next phase might be administration, where she checks balances, manages her portfolio, etc. Then the last phase may be support. In the case of an e-Commerce company, it will be product discovery, purchase, support and returns at the very least. On a larger site, such as Yelp or Yahoo, this will need to be done in digestible pieces, so break the stories into themes (not the SCRUM kind), and then do them one section at a time.

Next write the narrative like you would any other story. A couple things you can include:

• Location
• What has previously happened to get the user to where they are
• How much time they have? Are they relaxed or harried?
• What do they want to do? Where do they want to be?

Each narrative should be broken out into steps. Once I have written the narrative I break it into steps. You can use bullets or a comic style (if you are adding visuals) which breaks each part of the narrative into smaller digestible pieces. Here is an example from a narrative for a site that conducts online conferences:

Beginning:

Christina has heard about the Smithsonian conference on climate change from a colleague. While at her office, she visits the site. She browses the speaker lineup, and the sessions. Next she looks on a calendar view to get a sense of timeline, then she looks at the content in a list view to see the topics. It looks good so she decides to register. Christina fills out the registration form, then is taken to Paypal to complete her payment. Upon completion, the system takes her back to The Smithsonian site and logs her in. The conference topics are held over the course of a week, so she wants to make sure to doesn’t forget. She RSVP’s and downloads the ..ics file that adds it to her calendar, and then clicks the “Add Reminder” button, which will send her a notification in her email box. The system marks her RSVP and shows her as attending that session

Creating requirements:

From the narrative, you will want to create a feature list. In the first paragraph above, we see we will need:

• Speaker lineup
• Session list and calendar
• Payment module that accepts Paypal, (and probably other types of payment methods too)
• Registration module
• A reminder system that sends an email
• An RSVP system- that allows users to see who is attending which session.

Now that we have a list of features, we can start design, but this came from a real life story of how people are using the app. We have a context of what the app will really be used for, which type of person is using it, what they hope to do, and where they want to be. In the above, Christina wanted to attend a seminar. She needed to browse the speakers, sessions and topics, register and finally pay. We know that a standard e-Commerce workflow will work for this, but that wasn’t the point on this. We can make advances to the process because we can evaluate competitors based on Christina’s needs, see what they did well, and what they didn’t, and what we could do better, ultimately improve the product. Without the narratives, we would have created features for an online conference, just like the others. As I wrote in another article its all about perspective, and ultimately narratives help you take each user’s perspective, and let you decide on how that problem is to be solved.

And scratch their itch.

In a recent article I did for Smashing Magazine, I discussed  a little Neuropsychology, and how your brain works. Essentially, how your brain works is that the left brain engages until all your usual solutions have been tried and exhausted. At that point, when you have hit the “wall” and have sunk into a deep depression and are researching classes at your local community colleges on auto repair because you feel inadequate as designer, your relaxation causes the right hemisphere of your brain to engage. Your right hemisphere allows you to free associate and creatively assemble 2 things that have no relationship at all – gravity and an apple, gold and a bathtub, a kite and lightening, etc.

On my current project working for Fandango, I realized that this process explains my method for design. When I start working on a design, I find it essential to  get the obvious out first, so my first sketches are all the obvious ideas. The ones you know will work. The first thing that pops into your head once the direction has been defined. So I spend a certain amount of time, just getting the idea out of my head, and on to paper.

Now it’s pretty rare that this is a “winner.” It is often based off of the usual set of chops and techniques I have developed. These are pretty routine, at least to me, and are not usually acceptable work to put out. Occasionally, I am blessed with divine inspiration, and the first idea is so pure and so right, that anything else is just extra, but that is definitely the exception not the rule.

I have found that this process of sketching the obvious allows me to lighten my head, and get the obvious stuff out of my head. It also is very reassuring that I can let it go. I now have the comp on paper, and I can go back to it if I want to, or if I want to refer to it at any time.  It also allows me to hit the wall faster. If I don’t get my idea out of my head, it will haunt me and I will be unable to move past it.

Once I have got the obvious out, I get to a place where I don’t know what to do. I come with no further preconceived notions of what the project should look like, and I am open to explore new alternatives.

• I often start looking at different layouts and design patterns on the web to see if I can use them as an inspiration to try something new.
• I also talk with a lot of people. I try to have as many unstructured casual conversations with as many smart people as I can around the topic. I find that talking through the ideas, and hearing yourself talk through a problem often helps you arrive at new solutions without the pressure of stakeholders.
• Then I sketch every different variable I can imagine – quickly
• … and use my intuition on which idea to present or further discuss with others.

What’s your process?

If you’ve been in the web business for long enough, at some point you’ll have a story about the project that wouldn’t die. You know, the one with 20 rounds of revisions, features added in development that add a month to the project, and a feature set takes 3 months to agree on? I’m going to be honest and say that I have been a part of several.

At a certain point, these projects will wear on even the most perfectionistic and patient of us all. I mean, how much more juice will you have after the 23rd revision to the home page. It’s pretty hard to keep up your enthusiasm, and I’m a pretty damn enthusiastic guy. There just comes a point where enough is enough, and you just want to see something completed.

In my experience, most “designers” have a shelf life of about 3-4 months on a certain task, after which, they will need to have help to see things more clearly, pass their work on to production, or they will start to get cranky. 3-4 months is about what most people who focus on a certain project can effectively handle. By project I mean an end to end design of a certain piece of functionality or app, as larger sites may have multiple projects. So, for instance, I am a UX designer, my time intensive part of the process on a site happens to take about 2-3 months, and then tapers of to a few hours a week. If it goes on longer, I start to feel it. Once it is off my plate into visual design, the project has new life again and everybody gets excited to see the project alive as visual designers breathe new life into the wireframes.

Oftentimes, we don’t have a choice as to how long a project will take. There may be disention in the ranks,or people can’t agree, or you just haven’t got the right solution. These types of projects drag on, and you just hope for them to end. They loose steam, and creatively start to weigh on you. You loose your confidence in decision making as all options seem the same, and you slug it out until you can hand it off.

So What do you do?

There are some techniques that I use to maintain my own interest in a project, and boost the morale of the team, when everything seems to move at a snails pace. The trick really is to pace the energy of the project. If you get all excited at the beginning and discuss every detail at length in the beginning, by the 12th week, you’re going to be fatigued. I like to break a project into 3 phases – beginning, middle and end. Each phase has things that you can do to boost energy, and get everybody creatively energized about the project again.

Beginning

The trick with the beginning is to really set yourself up for the rest of the project. Pacing is important, and so is preparation and strategy.

Prepare your strategy well
One of the biggest things that stops projects is a long internal discussion on this feature or that feature based on subjective opinion. I find that it is due to lack of strategy. How many time has this happened: there are 3 ways we can do xyz feature/design, and all of them look good, yet it takes a 1 hour meeting to come to a consensus?

If you’ve done your strategy right, you should be able to refer to personas, goals, and research to make a best guess before yielding to personal opinion. These types of “my opinion is better than your opinion” conversations will kill momentum on a project faster than anything, have the highest potential to create animosity.

Establish your strategy process, make sure that it prepares you for the rest of the project and assists you in your decision making. If it doesn’t, do a post mortem on your next project, and try to figure out what information you were lacking that would have made decision making easier and more accurate. More user research? Usability studies? Feature prioritization? Messaging? How can you create a clearer strategy to help decisions next time.

Set your pacing
A web project is kinda like running a marathon. If you go too fast in the beginning, you’ll tire quickly. Go too slow, and you’ll have to rush to make up time at the end. The trick to keeping energy high is to pace it evenly.

Some projects that I have seen get tiring do so because of the old “sprint” methodology. It is usually impossible to foretell how smooth a project will run, and if it will run according to schedule, but having only short sprints to base timing on may make you spend too much time up front, which can make a project drag. If you set dates, and watch your pace, it will be easier to manage versus making up time at the end.

My philosophy is to do short sprints, being aware of the bigger picture timeframe. Give someone the responsibility of being a “timekeeper” who can push the project along if things get too drawn out. It can be a Project Manager, Creative Director, UX lead, Tech lead or whomever, just not the Product Owner. The Product Owner will inevitably want to tweak things forever. Agree to this up front, get buy-in and set some time boundaries for large sections (Strategy, UX, Design, Development, QA) and some firm deadlines.

Middle

The main challenge in the middle of a project is to keep things moving. Nothing destroys project momentum faster than long drawn out back and forth discussion. Back and forth discussion is good for the product, however, too much talk and not enough rock, will leave the key person drained and at worst, discouraged.

Meet frequently for short periods – 15-20 minutes – versus fewer long meetings
In the beginning when there are lots of ideas swimming, a short period of time to discuss a limited amount of items helps prevent long discussions on small topics. Longer meetings, can be very draining creatively, especially when you have a lot of ground to cover. Short frequent meetings are key. If you can’t come to a decision on something in 20 minutes, save it for the next meeting. Agile/Scrum teams already do this as part of their regimen. Making sure that decision makers are part of this will help maintain team morale, and keep the project moving.

When you’re stuck make quick easy decisions to get moving
When a team is stuck on something, it can be very draining to find an answer. For instance, I was on a project where there was research needed by the dev team on a payment system. There was several weeks of research and tested they had to do in order to give us an answer on what payment service we were using. This affected the energy of the team, and at the time, weighed down on the project. At that point, we focused on some other areas that we could get some quick wins on, and that got momentum moving again.

Grab a beer!
Never underestimate the power of good old fashioned bonding. Bonding is a great way to create empathy with your team and to have time to relate in non work mode. Let’s face it, sometimes, discussions can get heated, and if that heat is not tempered, you can start to villanize team members very quickly. Take one day every month to go to happy hour and grab a beer together, and talk about your kids, yoga, hiking, travel, technology, anything BUT your project.

End

At the end, everybody wants to see the project live already. You can feel the impatience brewing. Product Owners and Designers are pressing to see this live, but even with all the pressure to complete, the product has to be completed strong. I feel our job as Designers at this point is support to our other team members. Our job is “done” and the PSD’s are off our table, but we owe the rest of our team just as much support to make sure the project is completed successfully. I have seen and personally been a part of projects that have failed at this point, due to a lack of support and teamwork with the rest of the team at this crucial juncture.

Support your developers!
Those of us in the design process have long been finished with our portion of intensive work once the project reaches it’s final development stages. Our job in the development phase is to support the developers. Usually these guys get the raw end of the deal. They are the ones who are “pushed” to get a project done with an insubordinate amount of time when everything else dragged out.

How can you support your developers? First, encourage them. Give them praise when they get it right. All too often I see designers critical of developers work, simply because that is our job— to make sure that they get our “vision” right, and it performs as you intended. It can be a thankless job, so show these guys some love.

Get in the feedback loop in short sprints versus long detailed reviews.
The best projects I have been a part of had the design team reviewing small bits that take 20-30 minutes, versus, long detailed reviews. Going back to our “quick wins” this is a way to create quick wins, so when there is a snag, you all have brain space to dedicate to it.

Be very careful of major changes!
There is always the last minute idea that gets added to the pot that you didn’t think of in the design phase. It ALWAYS happens. When this happens (not if), be very aware of the impact of this. Minor changes are to be expected, but major changes often busts a team’s morale at a critical point in the project. Tread lightly. Product owners are notorious for adding things at the last minute, often unaware to the SNAFU that it adds to morale of development, design and production.

My philosophy is unless it is a major usability issue, save last minute ideas for the next sprint. Complete what you have, test it, verify your hypothesis, and get feedback. It can also lead to a “just get it done” mentality which gets it done half-a**ed. If you are going to add some major functionality or process change at the last minute, tread lightly and think through your decision. Is it mission critical at this point? Is it a nice to have? What are the ramifications of adding this in the grand scheme of the product. How will it affect morale?

If you you decide to move forward with a major change, drinks should be on the product owner— for real! If you are a Product owner and you decide on a major pivot, treat your production team very nice and be very appreciative of the work they do. It will help boost the energy and morale.

Whether or not you are a leader on a project, or a team member, you need to do what you can to help a project move along, and keep everybody engaged and energized over the course of a project. Nothing will ruin a project worse than a lack of enthusiasm. At the end of the day, every project is a team effort, and we owe it to our team to maintain energy and enthusiasm. Even the most engaging projects can be draining if you do not take some precautions along the way to maintain energy. It takes some planning and effort, but in the long run, the projects that keep energy throughout are the one’s we do our best work on, and the one’s we look back on with fond memories of.

The new venture will be a software company. I have been bitten by the app bug. I admit it. A few months ago the idea of productivity, and the lack of visual productivity apps in the market got me to create a new app for you to visually create your action items, and keep inspiration and action items. It is called Wallboard. More details to come as well as the prelaunch beta site. Stay tuned!

Also, I will be at the How Magazine Interactive Design Conference speaking on Competitive Analysis. It should be a fun session. I will talk about the 3 different types of analysis, and how to create them in a way that you get insight, and how to learn from competitor’s mistakes. I am doing both East and West coast conferences.  Here is more information:
http://howinteractiveconference.com/ehome/index.php?eventid=39587&