re:group is back from old town with a website redesign

After an extended visit to Old Town, the re:group website is new, and better than ever. In mid-2012, we as a company decided it was time for a new website design. We knew there were certain aspects of the site we could improve on, and that we needed to align our website’s look-and-feel with the new personalities at re:group.

A New Website Design

We approached our redesign just like we would any client’s project. The only snag was WE were the client. This made the project that much more challenging. Imagine suddenly combining several people with different backgrounds, along with a ton of ideas and opinions that stem from different areas of our industry experience. Sounds chaotic, right? Well, we’ll admit that, at times, it was. BUT, this is also one of the reasons why the new website is a vast improvement over the old one. Great minds working together can do wonderful things. Just take a look at our site now; it has improved functionality, design and technology.

Image of the ingredients to a good website: coffee, alcohol, brains, and collaboration.

What we changed

After doing thorough user testing of the old site and examining the site’s analytics over a long time period, we noticed some specific problems that needed to be addressed with the redesign:

  1. Our information hierarchy needed to be reworked
  2. The outward expression of our brand needed a facelift to more accurately reflect who we are: creative, fresh and insightful
  3. Web development technologies and best practices needed to evolve

New Information Structure

Image of an icon that represents a sitemap.The biggest problem we had with our website was that we had an unorganized information structure. This led to many problems, both for us internally, and, of course, for the visitors to our site. From an internal standpoint, the fact that information was not easily accessible or found made it difficult to update and maintain the site. Moreover, that problem was exacerbated when trying to use it as a sales tool.

And we know that the external user/consumer must have been frustrated when they weren’t able to find the one piece of information they were looking for. It not only may have prevented them from returning to the site, but it also meant that we could have lost a potential sale or a lead.

When restructuring the site’s content, our goal was to make as much of the information as we could accessible within three clicks or less. To do that, the information had to be logically placed on the site, and the navigation system needed to be designed in a manner to ensure that anyone could access anything from anywhere on the site.

To do that, we concocted some scenarios that we predicted our clients and future prospects might find themselves in:

Check out what the old site (pdf) used to look like versus what the current structure is (pdf).

what would our visitors search for? (from the home page)
  1. Who would I potentially be conversing with on a day-to-day basis?
    • Location: regroup > biographies (done)
    • 1 click
  2. I wonder if re:group is hiring?
    • Location: let’s talk > See our job listings (inline link) > job opportunities (done)
    • 2 clicks
  3. Where are examples of client work where they did website design and development?
    • Location: work > select a project with “website design and development” as a listed service > project page (done)
    • 2 clicks

A New Face

Since November 2011, re:group has grown both in terms of client size and number of clients. This has, fortunately, resulted in the hiring of 10 fresh, new faces. These new employees have experience that extends into several departments: business development, account management, media and creative. With the infusion of new talent and new ideas to the company, our website no longer represented us as a group. We needed to align the website’s look and feel and attitude with our core beliefs and new personalities.

After many discussions and long evenings (sometimes with some Mad Men beverages), we had narrowed our design directions to four. More long nights (and the occasional drink) ensued until we finally landed on the one you’re looking at now. The design accommodates the wealth of information we have to offer, incorporates key elements of our brand standards (and some new ones), and the layout is flexible enough to ensure ease-of-use on all major browsers and devices.

Better Web Development Technology

Child Themes

Although the last website was built on the same CMS, we’ve learned many new techniques and perfected best practices to give our user a better experience. We’ve also given ourselves an easier way to update and maintain the site. The key change we made was incorporating the use of WordPress child themes (tech talk). Creating a child theme for a WordPress site allows us to easily update core files of our theme without losing custom changes that we’ve implemented.

Designing for Devices Other than a Computer

Web development, and the internet in general, has changed a lot in the last four years: the way it functions and the way we use it. With advances in smart phone design and tablet usage on the rise, web developers and designers have changed (and are always evolving) the way they approach digital solutions for the internet. Since more and more people are surfing the internet and accessing information on their phones, we knew it was about time we jumped on the train and made our site more user-friendly. The debate was never will we do it?, it was how are we going to do it? There are two ways a website can be mobile/tablet friendly:

  1. You make a totally separate mobile/tablet website (which is actually two separate websites)
  2. OR you code one website that is designed/developed using a responsive layout. SIDE NOTE, a responsive layout means that a website will change compositions and layouts based on the detected browser resolution (i.e. one website will look one way on a 24″ iMac, and another way an a smartphone screen)

Image of icons that represent responsive website design, H T M L 5, and C S S 3

In the case of the re:group website, we chose to utilize a responsive layout versus a separate dedicated mobile site. The deciding factors that go into choosing between the two depends on what kind of business you are, and what kind of content your users need to access. Since our user’s experience doesn’t need to be altered in a dramatic way depending on the device they use, a responsive design was a great fit for our website. NOTE: The pros and cons of mobile versus responsive websites will be discussed in a future blog post. :)

New Toys

Without getting too geeky and techy, the new website utilizes some newer web development code that is starting to become more accepted by major internet browsers. The code I speak of, HTML 5 and CSS3, allows us to do more complex styling, along with giving us the ability to use styling techniques that weren’t available before. Some examples of how they are being used on our website are the following:

  • Ease of transition of rollover effects which highlights and shades the color or opacity of text and images after hovering over them (available in select browsers)
  • The inclusion of fonts other than the standard web-safe fonts
  • The ability to make colors transparent
  • The use of gradients
  • And much more, but I won’t get too geeky

The End Product

Ultimately, we learned a lot about ourselves and the direction we’re headed, produced a better website and got to play with some newer technology that we can now use on our clients. We look forward to providing our users an awesome experience and we encourage you to leave comments/feedback below OR contact us on our LET’S TALK page.

Tags: , , ,