Johnnyafrica

It’s been nearly five years now since the redesign vs. realign debate began.

Many designers are still approaching website changes as redesigns, with little thought to whether they should be redesigning or realigning the site for their clients.

In fact, many designers are still a bit confused about which one is appropriate for which projects, or even what the difference really is.

Understanding the difference between redesigning and realigning can result in happier clients who are better reaching their website goals.

There are times when redesigns are appropriate, and there are other times when realignments are appropriate. It all depends on how the client’s current site is working for them, and what their goals are.

Read on to find out more about the differences between redesigning and realigning, and how to determine which one fits your current and future projects.

What’s the Difference?

The difference between redesigning a website and realigning a website isn’t always 100% clear cut. But the main thing that sets them apart is that redesigns are primarily focused on aesthetic changes: color schemes, graphics, typography, etc.; whereas realignments are more focused on purpose and function.

The White House’s website underwent a major realignment when President Obama took office. Screenshots from iterasiarchive and whitehouse.gov.

A realignment will look at what parts of a site are working and what parts aren’t, and will then work around those strengths and weaknesses. A redesign, on the other hand, will focus more on design trends and how the site looks.

Many designers think that every website revision should be a realignment rather than a redesign, but the truth is that both have their place. Below we’ll cover the strengths and weaknesses of both redesigns and realignments, and how to decide which one is appropriate for your projects.

Redesigning

As already mentioned, redesigning focuses on the aesthetics of the site. A redesign will likely consist of changing the graphics, color scheme, and other visual elements of the site’s design. Little or no attention is usually paid to the structure and functionality of the site. Content usually stays the same, too.

When is a Redesign Appropriate?
Sometimes the structure of your site is just the way you want it. Your users are happy, your site is achieving what you want it to achieve. The only problem is that your site has been completely the same for the past five years. While it’s perfectly functional and does what it needs to do, it looks like a throwback and you’re worried it might be costing you new business.

This is a case where a redesign is perfect. You don’t need to change the functionality, content, or structure of your site. You just need to give it a facelift to make it appear fresh and new.

Things to Remember When Redesigning
When you’re redesigning, you shouldn’t be doing much with the structure or function of the site. Look only at the visual elements and how they can be updated or otherwise improved upon.

Most redesigned sites will bear a heavy resemblance to the original design, at least in terms of the way it works and the general content. You might move things around, but with an eye toward working better visually. The new design will leave the structure of the site much the same as it was prior to the redesign.

Redesigns are generally much faster to complete than realignments. If the original site was built on a CMS, it’s just creating a new theme or template. One thing you might want to consider if the site wasn’t built on a CMS is to switch it over to one during a redesign. While this might be closer to a realignment, it’s worth the time and effort if the client will be updating their site’s design on a regular basis.

Make sure your clients are prepared for the impact a redesign can have on their site visitors. They will almost inevitably get some long-time visitors who will complain about the new design, and (hopefully) a lot of visitors who love the new design. A client who’s never been through a redesign may be surprised when a visitor complains about the new site if they’re not prepared for that eventuality.

Remember that redesigns are often instinct-driven and rely more on your intuition as a designer than on hard data. Because functionality is left intact, you can proceed more on gut instinct than you can with a realignment.

Screenshots from Archive.org and HighriseHQ.com.

Realigning

Realignment, as compared to redesign, has a much greater focus on user experience and usability. With a realignment, you’re addressing specific issues with the structure or functionality of the site, in addition to design changes.

You’ll need to spend a lot more time on the fact-finding portion of a realignment. Figuring out what’s working on the site and what isn’t is as important (or even more important) than nailing down what the final site will look like and what features need to be added.

In many cases, a realignment will include a redesign portion. The client may want to update how the site looks if they’re spending money to update the way it works. Realize that many clients may focus more on the visual aspects of the site than the functional ones, but it’s your job as the designer to get an idea from them of what non-design elements are and aren’t working in their current website.

When is a Realignment Appropriate?
If there are fundamental problems with the way a website is working, whether it’s actual issues with the code or just a poor implementation, then a redesign isn’t going to do much for your client. This is when a realignment is necessary.

A realignment may also be necessary if a client is embarking on a new business venture. If they’re adding an online store, for example, they’ll likely need to do more than just install some shopping cart software. Changes to their home page and other areas of the site to entice visitors to purchase online will probably be needed, and other areas of the site may need to be de-emphasized or removed all together.

As far as exactly when a client should realign their site, the answer is as often as necessary. It should become a regular habit to review what’s working on their site and what isn’t, and to make adjustments as necessary. If goals aren’t being met, continuous tweaks to the functions, structure, content, and design of the site can move your clients closer to them. Stress to your clients that realignments to the site should be part of regular maintenance, not just something that’s done every few years.

Because functionality is often changed in a realignment, ideally it should be done during the client’s slow season. The last thing you want to happen is for a bug to crop up during the holiday shopping season (or whatever is the busiest time of year for your client’s business). It’s almost inevitable that there will be some bugs in the new site, and while you can hope that pre-launch testing will reveal them all, sometimes they don’t present themselves until well after the site has launched. If a client wants to embark on a realignment during their peak season, attempt to convince them they should put it off until after their peak season is over. If they refuse, reconsider accepting the project.

The Realignment Process
Realignment should start with a pretty in-depth discovery phase. You need to talk to the client about what they perceive as working and what isn’t, as well as taking some time to explore the site yourself to get your own idea of what should be kept and what should be replaced.

One of the main things you should find out during the discovery phase is the purpose of the realignment. The client should have clear goals for making changes to their site, and a concrete idea of what they hope to achieve when the site is complete. Keep asking your client questions until you find out what their main objective is.

The process of realignment falls somewhere between a completely new website and a redesign. You’ll be creating some elements of the site from scratch and reusing other parts. How much of each is done will be largely dependent on the individual project.

A/B testing is something that should be more heavily used in a realignment. Test not only new options, but also the new options against the existing feature. You need to be sure that what you’re doing is actually a functional improvement over the existing site, and not just a prettier design.

Things to Remember When Realigning
Just like with a redesign, there are a number of things you need to keep in mind when embarking on a realignment project. First of all, be sure you have a clear set of objectives in mind before you get started with the actual changes. Without this, you’ll have no focus in the project, and it will run the risk of just becoming a redesign.

Not all realignments are huge projects. In some cases, you may only be making minor changes to the way the site works and looks. In other cases, though, you may be basically starting from the ground up. With a realignment, make sure you aren’t doing unnecessary work. The point is to keep what works and change what doesn’t. If 90% of the current site works well as-is, then make sure you’re only changing the 10% that doesn’t.

You’ll want to be sure that the site you’re realigning has a solid foundation to build on. This means making sure the code is well-structured and standards-compliant, as well as making sure it’s built on a suitable CMS that can handle the site’s size and traffic. If any of these things are lacking, take advantage of the realignment process to remedy the back-end issues that may be present. It will pay off in the future with reduced costs in future redesigns and realignments.

Remember, too, that realignments are done based on hard data about what works on the current site and what doesn’t. While your gut instincts on certain aspects of the realignment will be important, so will be established usability patterns and information the client has collected about what’s working on their site and what isn’t. Don’t lose sight of that.

Final Considerations

During the discovery portion of a project, you, as the designer, need to determine whether the client is looking for a redesign or a realignment.

The client will often be unfamiliar with the term “realignment”, and in all honesty, there’s no reason to educate them about it. But you need to know in your head which type of project you’re embarking on.

If major changes to functionality, structure or content are necessary, then you’re looking at a realignment. On the other hand, if all the client wants is an updated look, then it’s probably a redesign. Again, it’s your job as the designer to determine which type of project the client needs.

Remember, whether you’re doing a redesign or a realignment, make sure you back up the original site as well as make regular backups throughout the project so you can rollback if necessary.

Further Resources

• Good Designers Redesign, Great Designers Realign
  The original article by Cameron Moll discussing the difference between redesigning and realigning, from A List Apart.
• Redesign or Realign Your Website?
  From Tunnel 7.
• Redesign Vs. Tweaked Design: What’s Best for Your Website
  From Visual Swirl.
• Redesign: When To Relaunch The Site and Best Practices
  From Smashing Magazine.

Written exclusively for WDD by Cameron Chapman.

When do you use redesign vs realign on your sites? How do the two compare?

Graffiti Analysis 2.0: Digital Blackbook from Evan Roth on Vimeo.

Roberto Verganti's article in HBR, "User-Centered Innovation Is Not Sustainable," discusses how focussing on what user's say they want isn't a strategy for innovation. Not news to you, but his take looks at what that means regarding innovation from a sustainability perspective. I found it thought-provoking in other ways as well. The main idea is this. Forward-looking designers and business or policy decision makers may have a greater role and influence regarding designing sustainability products than customers.

The article tells the story of the Toyota Prius, which emerged during a time when the SUV reigned supreme in the US, and customer desire reflected that interest more than any desire for small cars that had less of an impact on the environment. The proposal to produce that innovation came from a vision that started within company.

Verganti believes that decision makers "need to step back from current dominant needs and behaviors and envision new scenarios. They need to propose new unsolicited products and services that are both attractive, sustainable, and profitable." It's an interesting story from many perspectives, with environmental impact being only one.

To dumb the discussion down a little, because I feel more comfortable with my smaller ideas, I'll tell you a silly story from my youth. When I was a teenager, I used to hang out occasionally at this record shop to pick up vinyl. I, like countless male Filipinos in NJ could mix and would DJ now and then. This guy who owned the record shop, his name was Spike, would play whatever new stuff had come in that he thought I would want to play, or I would ask him if he had stuff that I wanted. He knew tracks that I would hum to him after hearing them in the city clubs I'd go to. He was like the reference librarian of the DJs to me.

In those needle drop sessions we would chat about what we had played and what the reaction was. One day I remember asking him what he did when people would ask for something he would refuse to play. As you can imagine, as a teenage boy, it's hard to ignore girls who come up to ask you to play something for them. His answer was this. "You play them what you decide they need to hear, not what they ask for. You're the dealer and they come to you because you know what's good for them." Or at least that's how I remember it. Not sure about the drug dealer analogy.

I laugh when I think about that story, mostly because it was funny. I thought, well that's what separates one type of DJ from another. But I based what I would play on that idea. A DJ is like a curator. Mixing ability is one thing, but it's nothing without taste and experience designing the vibe of the night. Or something like that.

So oddly enough, after reading this HBR article, I think back to this Spike story and think about the role of the designer and what we do with our user research. I think modeling products based on what we believe customers need to do is necessary. But somewhere in that process there's also this need to go on something else. Taste, authority, gut? It's something more like vision based on those things.

Last May I was given the great privilege to write a sidebar in Christian Crumlish and Erin Malone's fabulous new book, Designing Social Interfaces. The topic I was asked to write about is "onboarding"—designing welcoming experiences for new users by easing them in.

You might have seen a couple blog posts that I've previously written about how Plurk and Yahoo! Shine handled the onboarding process.

The authors have given me the permission to republish the sidebar here in full. I hope you enjoy it and find it valuable. I would love to hear your thoughts in the comments.

When you're done reading, do yourself a favor and buy a copy of Designing Social Interfaces. It's a must-have for anyone involved in designing and developing social products and services.

What is onboarding, and why is it important?

Most companies think that getting people to sign up is the ultimate challenge, but what about getting them oriented to your site and actually using it? That process of helping people get started is called onboarding, and it's crucial that you give it the attention it deserves.

When left to their own devices in a new space without any sense of direction or purpose, many users can feel lost, overwhelmed, and confused about what they're supposed to be doing there. The user might have arrived at your site from a link in an article, an organic search result, or on the recommendation of a friend. In essence, the user is taking a leap of faith that she will be able to achieve something on your site, and it's your responsibility to shake her hand and show her the ropes when she gets there.

They say you don't get a second chance to make a first impression, and on the Web it's truer than ever. If you don't capture the attention of new visitors from the moment they arrive and guide them on their initial journey through the site, they won't learn that the benefit you provide outweighs the cost—their time and effort to participate—and as a result, won't stick around very long. Worse, they'll tell their friends not to bother visiting, either.

Onboarding is the process by which you can help users overcome the cold-start problem—a blank profile, an unfamiliar interface, a general feeling of "what the heck do I do next?" Many websites force users to start from square one and build up content (and value) over time. Social apps in particular are prone to this because so much of their usefulness is derived from person-to-person interaction and user-generated content.

The term onboarding comes from the field of human resources and the common practice of new hire orientation. In that context, the steps in the process are often referred to as accommodate, assimilate, and accelerate—all of which apply quite nicely to how new users ought to be treated in order to bring them into the fold.

Accommodating your users means giving them the tools they want and need to use your site to their benefit. Assimilating means helping the user to absorb the culture of the site and, in a sense, come to resemble the existing users. And accelerating generally applies to delivering on the value proposition better and faster.

Oftentimes, the true value of your product or service becomes apparent only after significant use—perhaps because the user needs a sizable social network to really reap the benefits, or because continued activity on the site ultimately leads to something, like better recommendations. But don't make the mistake of assuming that your users will stick with you that long. You need to help them get there as quickly and painlessly as possible in order to make your case.

Designing the onboarding process for your site is most commonly limited to a first-time use scenario: from the moment just after a user has signed up until the end of his first session. There are certainly extended approaches you can take to consider the user's needs during subsequent visits until he is exhibiting a desired behavior on the site, but exert caution, lest you be seen as too heavy-handed or pushy. Typically, once a user understands the lay of the land, he wants to be left alone to explore.

A prime example of great onboarding

One of the best and most often-cited examples of an onboarding process is on Tumblr.com. Tumblr proudly calls itself the easiest way to blog and goes to great lengths to prove its point. The sign-up process itself is dead simple—just a single form to provide an email address, password, and desired URL. Once the user confirms her credentials by logging in, she is presented with the main interface and blogging tool, but most of the page is dimly lit. Her attention is directed to the toolbar, and a large bubble tells her exactly what to do next: "Create your first post!" In actuality, there are a dozen things she could do from here, but the guide is making a decision for her. By limiting the user's focus, Tumblr ensures that she is significantly less overwhelmed by the options at this point, while simultaneously being trained on the primary purpose of the product—to create content.

As the user mouses over each of the post options, only the subtitle changes: "try writing about something you did today;" "try linking to a cool website you like." The language is clear and concise, the value inherent to the directive, and the user begins to conceptualize the variety of things she can achieve with the product despite the very simple interaction that is required.

At any point in the process the user can "x-out"—close the large bubble and exit to the main interface—without further interruption, but the copy and visualizations are compelling enough to urge her forward.

Once the user posts something, the next step in the onboarding process is to customize the blog. Now everything on the screen is dim except for the location of the Customize link. Not only is the user being taught about the ability to customize, she's also learning where to access the functionality later on when she needs it again. Now that the user knows how to post content and customize her blog, the last step in the onboarding process is to "Follow some cool people!" One of the biggest differentiators for Tumblr is its highly active community, but until a new user is connected to several other bloggers, she might not truly comprehend its magnitude. Tumblr overcomes this by encouraging users to find their friends early on, in a variety of methods. A user can scan for contacts in an existing email address book, or follow people under Staff Picks, Music, or Art and Artists. By observing the usage patterns of these popular and highly active users, new users will most quickly understand how to use Tumblr to their advantage, nearly guaranteeing more frequent use of the site.

Other variations on onboarding

Onboarding can sidestep the sign-up process entirely. TripIt, a travel itinerary and planner site, allows users to simply forward the site a recent travel confirmation email and TripIt takes care of the rest. By sucking in all of this content automatically, TripIt removes any effort new users have to put into the first-time experience and can almost immediately present the site's value. They do have a sign-up process (just an email and password), but it is not required to see their tools in action. This strikingly reduces the barrier to entry and is still rare enough to make a user sit up and take notice.

When it originally launched last year, Yahoo!'s Shine, a website for women, had an interesting take on first-time use. Though it is no longer live, Shine's onboarding process wasn't directed at recent registrants, but instead was directed at first-time visitors to the site to help orient them to its variety of features. On a user's first visit, a "Welcome to Shine" layer appeared in the center of the page. It said, "Shine features the best writers and bloggers in women's publishing. Plus, connect with likeminded women, share stories and more. Take a ten-second tour to see more."

By clicking the single call to action, a Continue button, the user was moved all around the page, with the browser auto-scrolling accordingly. It was a three-step process that also used the familiar bubble pointing at the functionality on the page with a short description of its purpose. It highlighted access to Yahoo! Mail in the sidebar, a recent activity stream of user-submitted content, and a quick-access headline list at the very bottom of the page. In the last bubble was a Get Started link that ended the onboarding process and scrolled the user all the way back up to the top of the page.

Suffice it to say, there are a variety of ways to handle a new user orientation. The user's mindset and the site's business goals, brand identity, and value proposition must all be taken into account. After all, this is the first impression, and you know what they say about those.