An In-Depth Look at Our Website Redesign

One of the major pushes for 2014 was to redesign the LightSky site. Although we had just done a small redesign back in August 2013, there were some aspects of our site that we wanted to improve. A redesign would allow us to address those concerns and further define what we do as a company.

The Discovery Process

The discovery process was quite lengthy. It focused primarily on two distinct areas.

First, we had to define who we are as a company. The answer for that was rather simple: A Full Service Drupal Shop.

Full Service: We provide clients a wide range of services, only one of which is development. We get to know our clients, their businesses, and their audience. Taking what we know about web technologies, we truly do create innovative experiences to delight users. We want our clients to be successful, so we create blogs, screencasts, and other resources to help ensure that they are.

Drupal Shop:  LightSky has focused almost exclusively on using Drupal as a starting point for our web projects for the past 4-5 years. We’ve become progressively more involved in the Drupal community by attending more training events, taking the initiative to speak at Drupal events, and giving back to the open-source community by contributing modules

A Full Service Drupal Shop. That is what LightSky is. We wanted our new website to be able to showcase all that we can do. Toward that end, we wanted to emphasize our portfolio. We’ve found that viewing samples of our work plays a big role in a potential client’s decision to work with us or someone else.

The second area we focused on was taking a hard look at how people used our current site. In conjunction with analytics, we used a heat-mapping service to analyze visitor behavior. Click to view the heatmap results. 

There are a couple of things to notice here. First, the ‘About Us’, ‘Contact’, and Portfolio sections of our website got the most love from our visitors. This was in line with what we expected. People want to know what is we do, what makes us different, and what we’ve done for other clients. Our homepage rotator got some clicks, but there weren’t very many conversions. The blog, while showing lots of activity in analytics, showed only a few clicks from our homepage. Analytics helped us determine that most of our blog traffic is from search engine results. Because of this, we wanted to put a larger emphasis on our blog during the design process.

After many hours in discovery, analyzing the data we had, we felt prepared to move forward with the design. We knew who we are, what we do, and why people visit our site. Now, we had to make it visually appealing and easy to find the right content. 

The Design Process

LightSky, like most web firms our size, does not have an full-time designer. We partner with a company called Avex Designs out of New York. Their lead designer, John Surdakowski, has delivered outstanding work for for our clients, and so it was only natural that we use him for our design as well. 

We knew that we wanted a clean design. Large fonts, lots of white space, and big, clear text was a priority. We also wanted a design that would easily scale down to mobile devices.Taking what we’d learned in the discovery process, we worked with John and got a design that we’re very happy with.

One of the first things people notice when they come to the new website is a clear tagline explaining what we do. We opted to remove the homepage slideshow, since heat-mapping had shown it wasn’t optimal use of our homepage real estate. Eliminating the slideshow also allowed us to focus on creating content that people do want to see: our blogs and other media material.

Our portfolio, which before was tucked away in a small corner of our homepage, is now showcased in a coverflow style gallery at the top. This accentuates our recent work in a creative way, and ensured that the portfolio is above the fold, where it gets ample spotlight.

We wanted to take a more minimalist approach to our site content, and found that we could easily consolidate our “buckets” of services without any real sacrifice. The four buckets of services on our old site were condensed into three. John found demonstrative and unique icons to describe each bucket.

The next section of the homepage was designed to clearly distinguish between our articles, videos, and other news. Having them organized this way and prominently displayed on the homepage makes it easier to visitors to find these frequently viewed offerings. 

For the responsive/mobile portion of the site,  we decided to keep it even more simple. We asked: “How are mobile users going to use our site?” Analytics told us that content consumption was the answer. So as the device width gets smaller and smaller, the amount of non-blog related content starts to go away. The end result was a very content-geared mobile version of our site.

When it was all said and done, we were quite pleased with our new design and anxious to get started on making it all work.

The Build Phase

The build of the site was rather straight forward. Since Drupal 8 did not yet have a release date, we decided to stick with D7. We started with the same custom installation of D7. This installation contains a set of modules that we use on every site to increase the functionality and usability in places where Drupal core comes up short. We also spent some time researching the modules that will be in Drupal 8 core that will have D7 backports, and added them to our install. We finished it off with the other modules we needed in order to complete the functionality. We wanted to ensure that the content entry portion was as easy as possible for our staff and that the back-end of the website was as intuitive on the front end. In addition, the upgrade path from Drupal 7 to Drupal 8 will be far easier than the upgrade from Drupal 6 to Drupal 7.

The theme for the site was built off of the Zen base theme, and used the LESS CSS preprocessor. There is a lot of debate about which preprocessor to use, but more important, in my opinion, is that you use one. We took the same approach for our site as we do with our clients and ensured that the site rendered properly in the latest versions of IE (including IE8), Chrome, Safari and Firefox. We also did tons of testing on the mobile and tablet side to ensure that the site has as few bugs as possible at launch.

Launch

For someone like us, we didn’t have to do too much planning as to when to throw the switch to launch the site. The biggest thing was that we wanted to launch during the week, not on a weekend, and we wanted to coordinate our launch around an internal marketing push. 

We opted to use Acquia to host our site. We’ve found that both Acquia, and Pantheon, are both really great hosting solutions for Drupal based websites. Most important to us was that our site had a reliable uptime and that the performance of the server remained up to par. We partner with both Pantheon and Acquia for our clients hosting needs, but in the case of our site, Acquia was the winner due to ease of workflow.

Post Launch

Now that the site is launched, we have some breathing room, but not for too long. We plan to expand the types of content we offer. We’ll also complete a series of post-launch site analyses to determine if the changes we made are having the anticipated outcomes. We often tell our clients that a website isn’t like a can of beans you can buy at the grocery store and then keep in the cabinet collecting dust. It must be nurtured and maintained.