The Key to Web Design Success: Respect the Process

As a youngster, I wanted to know the “how” of just about anything you could think of, from the mechanics of a perfect fastball to how those old floppy disks worked, but nothing captured my attention the same way as cooking did. I would hound my mother to spill all of her secrets as to how she created delicious meals and would sometimes try my hand at creating something delicious. In my excitement however, I would always rush and combine steps, resulting in some unsavory concoctions. “It’s just a process to follow”, she would say. It took quite a while to learn that the best results in life (and cooking) come from trusting the process.

Today when people ask me what’s the biggest mistake in web development, I say it is that many fail to respect the process, resulting in a rush to the end goal. This could be because they don’t understand the process, or they simply are rushed by external circumstances to bring the site online as fast as possible. When we don’t take the time to carefully plan out the requirements of each step in development it can have a cascading effect that results in lost time and rework down the line.

Start at the Beginning

It might sound like common sense, but the best first step is to sit down with your key stakeholders and determine what your project’s primary goals are, and develop a strategy around this. When setting goals, it can be tempting to just say “generate more revenue” or “increase sales,” but try to think about how this new site will do so. Have you defined who your audience is? Does a certain kind of content or experience speak to your audience? Perhaps your user base is heavily into mobile devices; now is the time to define what your site should deliver for these users. Laying out the needs of your audience early on in a formal document will help to ensure that the site is designed to meet them.

When developing a strategy, also consider how your site is preforming in organic and paid search. Defining benchmarks is critical for understanding the place you are starting from and measuring if the new site is getting your business where it needs to be. If you do not have Google Analytics set up on your site, do so today. It is free, intuitive, and is an easy way to start setting performance benchmarks. You may also want to review the presence of your competitors online. Depending on your needs this can be a formal audit of the competition or just a heuristic analysis, but the goal is to identify both what your competitors are doing well, and what they are not doing well.

Lay the Foundation First

Regardless of your site’s purpose or audiences, the foundation of a successful site is a positive user experience, meaning that it is easy and intuitive to use, informative, and visually pleasing. A good starting place for the development of a new site, or redesign of an old one is the development of a sitemap. A crucial element of usable sites which is sometimes overlooked is a logical, easy to understand navigational structure. A sitemap is a visual representation of all the major pages of a site, as well as subpages. It demonstrates the relation of all pages to each other, and as such creation of a sitemap provides an opportunity to think through the organization of content on your site. Taking the time to fully vet the organization of content at this phase will streamline the development of the final navigation structure, and ensure the content is fit to the right information silo.

A well-crafted sitemap will also define the different page templates that will need to be built out. Some form of content management system or CMS governs the majority of websites; as a result a handful of templates will populate the entire site. Sketching out these templates in the planning phase affords three primary advantages over not doing so. First, development of wireframes allows you to focus on pure functionality without being mired in the details of color choice, text content, or branding elements. Secondly, this allows the designer to iterate concepts with ease, producing a more interesting and well-considered end product. Moreover this produces concepts which can undergo user testing, be it simple paper prototype testing, or a more formal usability study.

If You Build It They Will Come

Having arrived at the build phase with well thought-out information in hand, one can begin to focus on the aesthetic elements of the site—a step that can otherwise be tempting to jump straight into. Web design is a multidisciplinary field and development of a new site can draw on personnel who don’t interact with each other frequently, or who are not familiar with the vision of project stakeholders. This is why taking time to develop design comps is critical. Using the wireframes as a reference, a web designer applies the style and branding elements that bring the page design to life. This ensures that any future developers know exactly how to code and style page elements.

Most developers will follow a similar process in the writing the actual code because one step cannot happen without the other. This involves the setup of a test environment (like WordPress or Magento), coding the templates defined in the wireframes, coding any special features or functions, and finally filling this in with text and image content. Successful development requires an understanding of the languages and technologies involved as well as current web standards, and best practices for accessibility. A less capable developer may still deliver a site that meets your visual expectations, but degrades dramatically in anything less than optimal circumstances. If your developer is not taking measures to ensure your site renders for all devices, it might be time to consider a new developer!

Testing, One- Two- Three

In the high excitement days and weeks before a site launch comes perhaps the most critical and oft-overlooked part of the process, testing. It can be easy to skimp on testing but this is where respecting the process pays the greatest dividends. A simple three step check ensures you have done your due diligence.

Test for Quality Control: Be sure that you have covered your data footprint, with the most compact images, markup, and styles possible. Review your images for quality and check that there are no placeholder images. Check for SEO optimization including titles, alt text, and other meta information.

Test for Cross Browser Compatibility: The Internet, and devices that connect to it have become ubiquitous. Your site may be looking spiffy in Safari, but is it viable for users on the Android, or Windows Phone platforms? Even if your user group is known to be predominantly desktop shoppers, the most popular browsers are releasing new versions at a faster rate than ever before.

Test in the final environment: Chances are your site was developed on another hardware environment than it will ultimately live. Good process dictates testing your site first in the development environment, and again for breakage on the same server hardware as the site will live before switching over the DNS.

So, remember on your next web project, rush the process and you are likely to come away with some half-baked results; work the process and you can enjoy the delectable (and profitable) results!

Within an eCommerce site design and platform project your Project Manager plays a critical role. To learn more about the importance of effective navigation through the process read our blog – Investing in Your eCommerce Project Where It Counts.

If you enjoyed this article, get email updates (it’s free).

We value your privacy

Dan Keebler
A member of the Groove team since 2012, Dan draws on a multidisciplinary background to provide support for clients through all phases of site development. He is a 2009 graduate of Loyola University Maryland where he received a Bachelor’s degree in Psychology, and is experienced in email marketing, user experience, and IT support roles. When not in the office, Dan can be found cycling or collecting records.
Dan Keebler

Latest posts by Dan Keebler (see all)

Got Comments?