One of the key aspects in improving the user experience lies in designing a winning website design flow. This critical factor is often overlooked in premature discussion of page design and content architecture, and all too often the element of design flow rarely gets the attention it deserves. This very idea is outlined in a recent article on Smashing Magazine by Morgan Brown titled Stop Designing Pages And Start Designing Flows, where Brown examines the correct way to handle design flow in order to create truly successful web experiences.

As with any aspect of web design, design flow should start with the user. Consider the user objectives for the site at hand. These vary, depending on the type of site being created. With an ecommerce site, the user will be searching through products, which will ultimately lead to a stage of purchase. In the case of membership, the user will click a link that leads to a landing page that allows them to register or join by supplying his or her information. A user could be searching for factual information or seeking a tutorial or attempting to connect to other users—among countless other possibilities—but regardless of his or her objectives, it is critical to gain a thorough understanding of this first in order to design an effective flow.

Next, Brown advises mapping user flows into “conversion funnels.” Every user will be different in their level of knowledge, their origin and their goals. As a designer, it is your responsibility to be the expert and map out user flows that are of value to the user and help to achieve the goals of the site.

“You should prioritize the flows and focus your effort on the few that will impact the most users and have the greatest gain,” says Brown. Some of the typical user flows that Brown illustrates are paid advertisements, led to by a banner ad; social media, guided by a shared link; and organic search, which occurs through a search engine query. Understand how these differ and the varying user needs and expectations each elicits.

The next step involves diving into these funnels. Brown uses the example of display advertising, which has the ultimate goal of generating new customers. Display advertising most usually starts with a banner, which ideally results in a click-through and therefore represents the very beginning of your user flow. The design of this banner should consider the user’s knowledge and needs in order to achieve this success.

The designer should ask questions like: What type of user is the target? How do I relate to them in a way that gains their attention and piques their interest? What kind of message would generate this kind of appeal? What kind of problem are they attempting to solve and how can I illustrate that this ad leads to the solutions they seek? Addressing these issues will help to initiate the flow by first engaging the user to go further.

The landing page should ensure that the flow continues. Brown explains how it should build user confidence, streamline content and design in a way that reinforces the call to action, eliminate friction in each step and does all of this in an enticing and engaging manner.

Then comes stacking the flow. Again, in doing this, the designer should refer to the type of site that is being created and its goals. This order should involve minimal steps and tell a visual story that easily makes sense to the user and encourages them to become a part. Take note of the more difficult stages of conversion, and ensure that there are multiple touch points to get the user through to these latter parts of the flow. “By considering how the flows interact, you can create a seamless experience that builds confidence and deepens the user’s connection to your website, leading to the ultimate purchase conversion.”

As illustrated here, design flow can make or break a site. Without first taking a moment to understand the user, their needs and their objectives, a site cannot properly funnel in the way it is intended and fulfill its goals. Brown offers this last piece of advice: “When considering user flows, think past the first conversion, and design for the ultimate conversion, which might lie a few steps behind.” While as designers, we are often encouraged to go against the grain, this is one instance where you really should just go with the flow.

This article continues our series on the presentations made as a part of our Lifeblue University program. This week we discuss LB designer Justin Miller’s take on the “signatures” agencies place on the websites they design.

These signatures can take several forms; you may have seen a “site created by” stamp in the bottom corner of a site’s homepage or perhaps even a mention of the agency in the page’s footer. Sometimes credit will be given on a separate page placed in the site’s “About” section (referred to as a “colophon”), or it could be hidden in the page’s code, viewable only by examining the page source material. Other times search as you may, you might not even be able to find who created a site because this information is nowhere to be found.

All of these methods, along with a few others, are currently used to allow agencies to leave their mark on their work in a literal manner. In the world of web design, this kind of clear labeling can be in a lot of ways necessary. To make this point in his presentation, Justin started out by warming up the LB team with a game of “Match the Work with the Creator.” While most everyone had little trouble identifying the art of Van Gogh and Michelangelo, a prototype by BMW and Coca-Cola’s iconic bottle design, the team had a much harder time naming the agencies behind the websites Justin showed next.

In last week’s LB University presentation, Jonathan explained how the “group auteur” theory could generate a synergistic dynamic among a team to create work with a recognizable style, but this idea applies more to a consistency in quality rather than appearance. The websites in an agency’s portfolio—unless all created to look extremely similar—rarely achieve the instant identification that other products are able to. And in this industry of serving diverse clients in different categories with unique needs, agencies would be wise to strive to make it to where each site is not similar in appearance to another before it. But then how, you ask, can an agency brand its quality and style in a way that ties back to its name? This is how a signature can help.

Those who oppose the use of signatures claim that this practice is a sign of a less established agency that is not “professional enough” to forgo clearly displaying its name in order to attain credit. Another common argument against the practice is the fact that any mistakes made in the management of the site following the launch of the agency’s initial design could be reflected upon the agency, whether or not it is actually at fault for the error.

However, the support for signatures is much stronger. Most hold the belief that the name and contact information of the agency responsible for a site’s design is desired by the user often enough to make it readily available. A signature gives credit where it’s due and has the ability to drive business to the agency when prospective clients likes what they see on a site that that agency has designed. Lifeblue has seen first hand how some of its own signatures directly influence interested prospects to contact the company.

Signatures hold intrinsic value for designers by giving due credit and providing referral opportunities. This value evidently holds a lot of worth considering that the use of signatures has become a common practice in the industry.

In most cases, agencies will attach some form of a signature to the sites they create, but most will agree that there are right and wrong ways to do it. “Black hat” methods that involve attaching a signature to every page of a site or displaying it in a distracting manner are generally frowned upon and can even be counterproductive by generating negative feelings towards an agency’s brand for being so uncouth. Most will agree that these kinds of practices should definitely be avoided.

Some of the more favorable methods of displaying a signature that were noted earlier have proven to be more positive and successful ways for an agency to leave its mark on a site. Each of these methods possesses unique benefits.

A “site created by”-type stamp is a quick and noticeable enough way to put your agency in the spotlight for a job well done. This also provides the opportunity for prospective clients or interested users to click through to your agency’s website for further inquiry and information on how to contact you. A mention in a page’s footer serves the same purpose but should be used sparingly to not become seemingly overbearing.

As mentioned earlier, a colophon is a separate, but easy to locate page that supplies ample space to list information on the creation of the site. Think of it like the page in a book that displays the facts like its copyright, publication, editing, etc. A colophon acts in the same way by providing the opportunity to give credit to all involved and to include all relevant information on the site, like the code it incorporates, the type of computer on which it was created or the programs used to design and manage it.

Another form of leaving a signature involves placing it within a page’s code. While it will be mostly the computer-savvy that will come across this mark, it is one of the least intrusive methods. Code-implanted signatures also allow for increased creativity in display since it will not be a visible distraction on the website itself.

Some agencies prefer to have a standard protocol concerning the format in which it displays its signatures, but again, each client’s needs are unique and each site different, so handling this issue on a case-by-case basis can allow for more flexibility. No matter how it’s done, it’s critical to ensure that most importantly it’s done right. As with anything, always refer to the best practices and further your agency’s business in a manner that is consistent with its brand message and better serves its clients.

The way a signature is presented on a site can prove to be just as important as the signature itself, so take the appropriate time to consider this practice and how your agency handles it. Play your cards right, and your success could one day have people asking for another kind of signature.

This marks the second installment of our continuing series on the presentations made during our weekly Lifeblue University sessions. LB University gives the members of Lifeblue the opportunity to practice their presentation skills by sharing their expert knowledge on a topic of their choice. Providing each other with knowledge and insight on different subjects expands our breadth of knowledge as professionals and people and builds us to be more T-shaped thinkers. Through creating an environment of continuous learning and enrichment, LB University is one of the ways we support our ideology of combining creative and technology. With these blog entries, we want to pass what we learn in these intriguing presentations on to you.

Recently LB’s Jonathan Pacheco gave a presentation on the “Auteur Theory” and how this idea can be applied to the world of web development and design. According to Jonathan, the Auteur Theory originates in film criticism, stating the belief that a film reflects the director’s personal creative vision, as if they were the primary “auteur” (French for “author”).

Opposition of this theory holds that a film isn’t just the realization of a single person’s vision, but rather a collaborative effort, stemming from the collective roles of the cast, crew and all of those who have a hand in the film’s creation. However, as Jonathan points out, most people subscribe to the Auteur Theory without even realizing it. This point is illustrated through people describing a film as “Hichcockian,” or claiming that they prefer Spielberg-type films. This kind of talk reflects creative credit bestowed solely to the director.

Despite the circumstances—cast, crew, genre, plot—the director still leaves a recognizable imprint. Scorsese is visible in both Goodfellas and Hugo. Kubrick’s touch is noticeable in 2001 and Dr. Strangelove. Spielberg may use his usual crew of Williams and Kaminzki, or he may not, but you always know when it’s a Spielberg.

The directors described by the Auteur Theory share certain characteristics, some of these being vision for the present and future, leadership and confidence. A distinctive feature of the films from auteuristic directors is the appearance of stylistic tendencies. An example of this is French New Wave; it became a style of storytelling. Another characteristic is arising themes. This can be seen in Woody Allen’s cynicism or the social realism of the Dardenne brothers. Auteuristic directors also reflect growth and life changes in their film work. Spike Lee started out making films like Do the Right Thing and now makes films like When the Levees Broke; this illustrates his personal progression as a director and a person.

The Auteur Theory can apply to more than just film directors. For example, Facebook exudes Mark Zuckerberg’s personal style the same way that the creative vision of Steve Jobs is present in all that Apple does as a company. The style of Nintendo’s Shigeru Miyamoto can be seen in every Zelda and Super Mario Bros. game. These “auteurs” all leave their creative print in a very recognizable manner.

Jonathan subscribes to the theory of the “Group Auteur,” which is the idea that a group, company or entity can work together as one to achieve auteuristic results. While this may just seem like it describes performing as a good company should, it depends on how you view it. Certain companies like Pixar have created a company culture and standard that transcends their day-to-day operations and can be seen in every product it delivers. While employees come and go, the spirit and style of Pixar remains consistent. We can see this same group auteurism in Apple, which continues to function in the same fashion even after losing its influential CEO Steve Jobs last year.

For any auteur, every film or product continues the story. This progression tells the story of who the company is and how it evolves. As web developers, it is important to act as auteurs. The impression we make on the web scene should tell a story about our company. We should continue to strive to put out work that conveys a high standard of quality and a unique way of doing things. Every company and individual should brand their work in a recognizable and desirable way to build value, because if you stand for nothing, you’ll fall for anything.

Photo courtesy of Flickriver.

Who could have possibly foreseen the changes the online scene has undergone over the last few years? The Internet has become a sort of unpredictable force that is constantly changing and improving the user experience and the capabilities of online features. The new year will undoubtedly usher in a new landscape for the world of web, and we here at Lifeblue have put forth our hopes and expectations for the next chapter of the online evolution.

LB’s Digital Alchemist, Cristal Givens, believes that 2012 holds an increased use of augmented reality features. This means more apps incorporating socially populated data to create more relevant and useful mobile and web experiences for users. We’ve already seen the beginning stages of this phenomenon, so Cristal just may be right.

Piggybacking off another budding aspect of the Internet, LB’s Marketing MacGyver, Cindy Jones, expects to see continuing growth in web experiences like those created by the site Pinterest. “I think they are just on the beginning of an amazing journey to engage consumers in a way that will demand the attention of brands. The Pinterest model delivers a great way for brands to better understand the behaviors and motivations of their consumers, and I think it is just a matter of time before this social media engagement platform explodes.” Cindy could be on the right track, especially considering recent statistics on this site’s popularity and growth.

Cindy has also taken note of other trends that have yet to really take off, but hold great potential in further connecting people globally and making lives easier—features like mobile payments and an increase in mobile web strategy to complement the ever-changing capabilities of our smartphones. These kinds of advancements will demand an evolution in the usability and interface of smartphones as well as online.

Increased connection will also further affect our idea of globalization. No longer does time or distance serve as barriers in our ability to communicate. “The web, along with social and digital technology, will have infinite possibilities in the way we build engagement platforms on a global stage and connect brands to consumers on a larger landscape,” Cindy says.

LB’s Backboard, Russel Dubree, doesn’t foresee any huge advances in technology over the next year, as he believes that we have already seen a plateau in mobile and gaming enhancements. He does, however, predict an even more seamless integration of the web into our entertainment lives in 2012.

“Basically combining TV, Internet/web, gaming, movie streaming and mobile into one cloud-like platform that can be accessed from anywhere. I know it exists with a significant investment or technology installation, but essentially I’d like to see the advancements that would make this capability more accessible to the masses.”

LB’s Codebase Wrangler, Derek Odell, also focuses on entertainment trends and predicts that 2012 will be the year of 3D web, as this technology has swept to televisions after making a big comeback on movie screens. Jonathan Pacheco, LB’s own Front-end Auteur, views the web from the aspect of censorship, predicting that 2012 will bring in an increased level of censorship and protection; however, he also believes that by 2013, we will all be accepting of this fact.

Ben Tautfest, as LB’s Design Savant, focuses his thoughts of the future more on the visual presentation of the web. “From a visual design perspective, I think we will continue to see the use of lots of subtle textures, minimalist design will rule the school, and I also see a big movement towards modern vintage aesthetics as well.”

Ben also foresees typography design to continue to improve and take cues from traditional print, with more varied and sophisticated typeface choices, better use of space and cleaner blocks of copy. He also predicts the use of space in general layouts to become increasingly important in directing attention as the need to call attention quickly and clearly will expand. Ben believes animation will also play a bigger role in interactive design as well. “One more thing as a “wish” for what I’d like to see possible on the web is layer blending modes via CSS. It’s not going to happen in 2012… but a guy can wish.”

Amongst all of our expectations, predictions and wishes, it will be interesting to see what of our proposed advancements will actually be realized during the next year. What will be even more exciting to see will be those that we haven’t even fathomed? But regardless of our guesses about the future, one thing is for sure—the web will continue to evolve and enhance its capabilities. We intend on being ready. Are you?

Written by LB Wordsmith, Savannah Harper

Photo courtesy of WST WebSuccessTeam

This article marks the beginning of a new series on the weekly presentations made by Lifeblue’s team members as a part of our LB University program. LB University gives the members of Lifeblue the opportunity to practice their presentation skills by sharing their expert knowledge on a topic of their choice.

LB’s newest team member, Derek Odell, recently took us through the world of geolocation in a presentation he called “Geolocation and You.” As someone who uses geolocation features often via iPhone applications like Facebook Places, Google Maps and Runmeter, I realized that I knew very little about this program that has become a part of my daily life. But Derek’s lecture provided a thorough explanation of how this extremely useful feature operates to power apps like the ones I and many others use to make our lives simpler.

Geolocation is defined by Derek to be a device that provides “the identification of a real-world geographic location of an object” and determines “where it is in the world.” As of right now, only the United States and Russia have launched satellites that support fully operational geolocation systems, but China does have an operational system that’s very antiquated. The Chinese are currently launching their updated satellites and were recently in the news for getting their first new generation satellite into orbit and online. Other countries like India and those of the European Union are working to embark on their own systems for the near future.

Microchips that work under these systems can be found in everything from cell phones to automobiles to missiles. Essentially, geolocation technology is becoming extremely omnipresent in all we do. Optional equipment used to support geolocation includes assisted GPS and local positioning systems.

Assisted GPS uses a network to ask a server to interpret limited location information, so that it doesn’t have to process the info itself, while local positioning systems use known, fixed positions such as cell towers, radio towers or wifi hotspots to determine location.

Google is responsible for the first popular geolocation system, which it placed under the name Google Gears. While Google Gears achieved the objectives, it was feared that this would cause software makers to create separate and incompatible geolocation systems for their products, thus what had already been created for Google Gears went towards the development of the W3C’s Geolocation API, the version that is used today. The W3C’s Geolocation API is device agnostic and compatible with everything. Now the de facto standard, the Geolocation API can operate with a very small, single line of code, or complex multi-file algorithms.

The common person uses geolocation often via applications like Yelp, Urbanspoon and Foursquare. With its unique ability to pinpoint the user’s location, this feature creates new opportunities to connect with users on a whole other level, whether it is through providing navigation and information on locations and events nearby or by helping users meet up and connect with each other. Geolocation is an undoubtedly useful feature when it comes to enhancing the value of user’s online experience.

It also provides an interesting view into the future of how brands will market to and reach new and existing consumers. Predictive analytics that could be used as a result of geolocation based information and other data could make things like “Siri” even more powerful. Imagine the idea of your phone and it’s “personality” being able to take historical geolocation based information and develop algorithms based on past information and calculations and then cross-reference with something like weather data (as an example).

Imagine if you will…you live in Manhattan in a high rise, every day as you leave the building for work you “check-in” to the lobby at around 8:15AM and again at the subway entrance at 8:30AM, except on the days it is raining…on those days you ring XYZ cab company. With predictive analytics and geolocation based information and technology, your friend “Siri” could have that cab waiting for you at 8:16AM without any interaction from you, keep track of the awards program that the cab company offers and allow you to pay via your mobile wallet as you exit the cab. Too invasive? Or super cool? Either way, this technology has the power to change the way we all do business.

Next time you pull out your phone to fine directions to the nearest Chinese restaurant or look for deals online in your area, give geolocation some credit for making searches like these possible and keep in mind how cool the future of these services could become.

Where in the world is Derek?

Photo courtesy of ars technica.

As we embark on 2012, we decided we wanted to provide a porthole into our lives here at Lifeblue and many of the ways we strive to deliver excellence, both internally as part of our culture, and externally with our clients. The Lifeblue Betterment Society is part of our agency DNA and one of the unique ways we engage our team.

One element of this includes what we refer to as LB University: every Friday we spend an hour together and one of our team members presents for 5-10 minutes on a topic of their choice. It gives all of us an opportunity to brag about our craft, talk about hobbies, present on topics that get us excited, predict trends or practice public speaking. For each of us, it allows an opportunity for growth and continuous learning.

One of the unique attributes of Lifeblue is our emphasis on T-Shaped thinking and design. We believe this applies to each of us in the way we collaborate and think, but we also believe there is application in how we operationally deliver. LBU is just one piece of this puzzle in our effort to create a culture that fosters a sense of creativity and enrichment, and we also think it is an important cornerstone in how we live our brand and differentiate Lifeblue.

Jonathan Sy wrote in his Signals blog about T-shaped thinkers and he referred to IDEO CEO Tim Brown’s definition: ““T-shaped” individuals are those possessing depth of skill (signified by the vertical stroke of the “T”) as well as a collaborative personality (represented by the horizontal bar). Their in-depth knowledge allows them to participate effectively in the creative process. Their cooperativeness requires (a) empathy and (b) enthusiasm for other people’s work.”

While most people may not start out as T-shaped, we try to foster a culture that encourages this philosophy. We strive to make our creative people more technical and our technical people more creative. This balance of mastering a craft coupled with understanding application through accumulation of horizontal knowledge has allowed us to deliver excellence in online experiences for our clients. We encourage one another to live this philosophy in our daily practice.

So, as we begin this new journey in 2012, we will be providing presentations and insights from our weekly LB University sessions. We hope to inspire and intrigue you and give you a looking glass into the insights of the team here at the LB.
Just to give you some ideas on what is coming soon:

• Where in the World is Derek? A Journey Through Geolocation
• The Auteur Theory: From our own LB Auteur, Jonathan Pacheco
• Does Color Affect Your Mood and Ability to be Creative?

We are excited about 2012 and look forward to sharing our thoughts, inspirations and theories over the next 12 months. If you have any suggestions on topics that you would like discussed as part of our ongoing presentations, please let us know.

We are always looking for inspiration!

 

As we approach the much-anticipated countdown, the exchanges of good cheer at midnight and the traditional caroling of “Auld Lang Syne” to make the transformation complete, we wake up the next day expecting change to accompany the calendar’s new date. The number of gym memberships will skyrocket as cigarette sales slump, but we propose a resolution of a different sort: to improve the web experience. This is a broad goal that can be achieved through adopting a few simple resolutions. Change doesn’t occur overnight; instead it takes initiative and action to happen. The world’s eyes are upon the online scene, anxious to see where it will go next. Let’s give ‘em something to talk about. Let’s be the change we all wish to see and resolve to create better, more engaging online experiences. Here’s a few resolutions to consider:

1. Resolve to know your audience.

If you’ve been slacking on this critical step, there’s no better time than now to improve your focus. “User experience” literally starts with just that—the user. First, identify who this person is and why. Who uses your brand and your site? Who do you want to use it? Get to know these people better than you know yourself. Understand how they use, why they use and what they want out of the experience, and apply this information to create a site that delivers and keeps them coming back.

2. Resolve to keep it simple.

Simplicity is a beautiful thing and an aspect that is extremely attractive to users. Don’t overcomplicate things. Make navigation easy and the next step obvious. Use design elements to enhance this process and create an atmosphere that makes the user feel confident in their use. It’s that simple.

3. Resolve to learn from others.

It’s always good to look around and check out what others are doing. There’s a lot that can be learned from examining a good website and determining what makes it so great. It’s okay to adopt practices you admire and integrate these successful elements into your own design. As much as one can take away from a good site, almost more can be learned from a bad one. Understand why it fails and what could be done to avoid the problems if your site is suffering similar pitfalls. Make sure that your site isn’t making the same mistakes that others have. Learn from these sites and use your acquired knowledge to take yours to the next level.

4. Resolve to generate better content.

In 2012, content is still king. If you haven’t been giving it the appropriate amount of attention, make this your New Year’s resolution. Whatever it is you are putting out to the world, make it interesting and engaging. It’s a wonderful time we live in; online interface gives us the opportunity to have real-time two-way conversations with our users, but it is often up to the administrator to start the process. So get ‘em talking, and make it good.

5. Resolve to be engaging.

Again, we are all in the interactive business now. To get users to interact with you, you must engage them. This goes back to knowing your audience—provide them with what they need and want. Appeal to them in a way that attracts them to your brand and makes them want to get involved.

6. Resolve to thoroughly test.

Many of a website’s issues can be caught and correctly early on testing—if you give the right amount of attention to this step of the process. A website abound with errors, broken links and malfunctioning features is a huge turnoff to users and can give a negative connotation to your brand. Unlike much in business, this is something that you can control. Dominate in testing your site so it’s in top form when it’s presented to the world.

7. Resolve to listen.

Everyone has a voice now, and it would be foolish not to listen to what’s being said. Monitor the conversation going on about your brand—it’s right in front of you—and respond to the feedback. Address problems, make improvements where needed and build strong relationships with your users. You can learn a lot from their comments, so be mindful of your brand’s response.

8. Resolve to update regularly.

The beauty of an online presence is that it’s current—so keep it that way. Maintaining an up-to-date website fosters a positive perception of your brand as being modern. Establish a web presence that is responsive and timely, both to the changes of the business world and the commentary of users. Create an atmosphere in which you appear to actively participate.

9. Resolve to cover new platforms.

The Digital Age has provided us with multiple platforms from which brands can present information and interact with consumers. Not all will be relevant to your brand, but it’s wise to make use of the ones that can expand your brand’s presence and touch consumers in new and different ways. Always be on the look out for new programs and networks that allow you to reach your users and connect with them.

10. Resolve to be media-friendly.

Continuing on with the point made in Resolution #9, for a brand to reach heightened success in today’s day and age, it must take advantage of the media available and those that will be developed over the coming year. Ensure that your brand is not left out of this growing phenomenon and cover all appropriate bases. Have your brand be there in the way its users need and want it to be. Update your brand’s profile on these forums frequently and use them to gain further insight into your business and your consumers. Being media-friendly builds better relationships within the industry and with users. Come on, everyone else is doing it. You should be, too.

2012 is sure to hold even more changes for the business landscape, which makes it imperative to resolve to be ready. If you feel that you are already exercising these practices, do it even better than before. There is always room for improvement, and if you need the start of a new year to motivate you, now is the time.

Let’s all resolve to grow and create a bigger and better online scene than the world has yet to see.

Here is to a Happy New Year.

source: digby.com