Blue Compass regularly creates beautiful websites for clients all across the country. However, we can’t forget about ourselves! At the beginning of 2016, we launched a redesign of the Blue Compass website with a new, sleek layout. While it was no easy feat, our new website is more user-friendly and will easily guide our visitors to the information that they’ve been looking for.
Follow along to discover how the Blue Compass team worked together to develop our fantastic new site.
Developing and Identifying the Blue Compass Audience
Before we can begin the process of designing and developing a website, we have to determine our audience. This begins with persona development. We have so many goals that we would like our website to meet but, depending on the goal, the target audience varies. No matter what the main goal is for that persona or target audience, we need to ensure that the website works for that user.
We don’t require nitty gritty details about each individual persona, but an overall look at who our users are is necessary. By fleshing out these details before the design and development of our website, we can perform better SEO on our site before and after it launches, write better blogs that are geared toward the correct audience, perform better targeting when doing social media marketing, and more. Overall, developing the target audience and personas at the beginning of the project will play an important role in any subsequent digital efforts.
The Inspiration and Creation of our Website Design
When we began the process of designing our new website, we knew we needed to “modernize” the site. Overall, it needed to be more crisp and clean, and we really wanted to improve our content architecture in the navigation structure. How could we figure out what users wanted? By doing a deep dive into our analytics, we could see how users were interacting with our site, therefore developing an idea of how the website should be designed to cater better to their needs.
To make the design more user-friendly, we consolidated many of the smaller sub-pages we had on our old site into new, robust pages. Why was this important? By consolidating the pages to have more content, it would be of greater value to the reader of the page.
The designers began from scratch when it came to our new website. They began with the homepage design after they determined a list of essential elements that should be portrayed and prominent. At this point, designing a site becomes a puzzle, making sure that each piece is fitting together nicely. Because we reformatted the way our blog system was laid out, we had to resize old images to fit the new site. This was a process of making sure pictures that were 3000 pixels wide would look good on a website and on a mobile phone or tablet. It was important to use that no matter what device our user had, we were filling up the space, but also making wise use of that space.
The Development Process Doesn’t Happen Overnight
Developing a website is no easy feat but, fortunately, we have a team of skilled front and back end developers. The two teams must work together because a site is passed back and forth between the two with constant tweaks and fixes. Below is a breakdown of how the two teams worked together cohesively to build the new Blue Compass website.
The Front End Development Process
The development process begins with our front end team, which starts by taking the homepage design and laying it out. Before moving to the interior pages, the homepage must be functioning properly. Custom templates, such as employee bio pages or a news page, are created by the front end developers. Once the homepage and interior pages are styled, and custom templates are applied, the front end developers run tests to ensure that these pages are working the way the page was intended to work. Each test must be run in different browsers and on various devices to ensure the website is working on a variety of hardware and software configurations.
After the initial round of tests, the site is handed over to the back end (see Back End section). Once back end has finished working their magic, the website returns to the hands of the front end developers to run more tests. It’s important for front end to think like a client at this stage. In this case, Blue Compass. They ask themselves, “are the titles and headers too long?” or “are the images on the page too small?” Often times, parts of the design or layout have to be reworked at this point in order for everything to look clean and polished.
The Back End Development Process
When back end developers start working on the website, they take everything given to them from the front end developers and begin putting the pieces of the puzzle together. For example, if there is any sort of custom application on the website, such as managing form data and submissions, back end developers make sure all of these things work.
When it comes to the custom templates on the site, our back end developers take the hard coded text given to them from front end and replace it with controls that pull data from the database like meta titles or summaries. All of this data is populated from the content management system (CMS), which is customized based off of the client’s wants and needs. For our website, our back end developers created a new CMS that contains more features and is more user-friendly. This version of our CMS is also available for clients to view and purchase. In the new CMS, there is an updated article section with features centered around SEO, social media marketing, custom Twitter text and more.
Project Management: Keeping the Team on Track
Throughout the whole duration of the website build, a project manager keeps things running smoothly and the lines of communication open with the development teams. It was important to us that we treated the development of our new site no different than we would with a client.
Typically, the process begins with a kick-off meeting with the client and members of the Blue Compass team. For our website, it was an internal meeting with multiple members of our team participating. In this meeting, we pick the client’s brain about what they want, to better understand their style and have them give examples of websites they’ve found that they like.
The project manager built a development schedule to keep Blue Compass on track and punctual. Then he or she creates a new content architecture, which is based on a website audit of our old site. We evaluated what we liked and what we didn’t like, which helped guide the design process.
From start to finish, the project manager was constantly communicating with each Blue Compass team and helping them with any questions they had about the project.
SEO: A Step That Can’t be Missed
Before and during the launch of our website, it was all hands on deck for the Blue Compass digital marketing team. The team spent hours doing keyword research for all of the new pages to ensure that we were ranking for the correct keywords, and we were showing up in the search results. It was very important for us that as the developers programmed, we made sure that both teams were following SEO best practices.
This keyword research spread into optimizing our blogs. We updated the content to make sure all the information was relevant, and the appropriate keywords were receiving focus. The digital marketing team made sure that the meta titles and descriptions were keyword-rich and the appropriate length, on not just the articles, but the web pages, as well.
Making Sure all is in Check with a Launch Checklist
When it came time to launch our website, our Account Executive (AE) has a launch checklist to make sure all of the ducks are in a row before making the site live. Items on this checklist include:
- Evaluate content and site structure
- Make sure 301 redirects are in place for the new site
- Reevaluate site meta data
- Ensure images are optimized for the web
- Thorough testing of the site’s functionality
- Double check that our social media accounts are linked on the site
- Make sure our website is 508 compliant
When testing the site, different members of our team tested all links, buttons, and forms to ensure that they worked before taking the site live. During the launch of our site, our AE made sure things were propagating correctly as the site transferred over.
Taking a Look at the Website Post-Launch
Nothing is ever perfect, and that includes launching our website. While we are experts in our fields, we use audits to make sure everything's running smoothly, things have been input into our CMS correctly and that we are following best practices.
Immediately at launch, we begin monitoring the site to see what's working well and what could be improved. For instance, we closely watched analytics to see how traffic was flowing across all web pages. We also kept an eye on Google to see how quickly pages were indexed and when they began ranking in search results.
At this point, we implement our marketing strategy plan to spread the word of our new website. This included sharing it on social media channels, such as Facebook, Twitter, Google+ and Instagram. We wanted people to know that we had redesigned and launched a new Blue Compass website!
User Experience is a Continual Process
Some may say that you should update your website every three years and once you launch a site, it’s a done deal. At Blue Compass, we believe that a site should be continually updated through keyword research and optimizing the site for SEO.
We use heat mapping to conduct user experience research and see how users are interacting with our site so that we can make updates according to our user’s actions and to make sure we are meeting their needs. This coincides with scroll mapping and mouse tracking that we do.
An example from our site is that we found users were clicking in the gray space surrounding a form in order to exit, but they had to click the X to leave. It was obvious our users would have preferred to have just been able to click out instead of exing out, so we increased the intelligence of the form to meet the needs of our users.
Is it Time to Take Your Site to the Next Level?
No matter if it's redesigning your website or developing a new one, Blue Compass has you covered. With our team of experts, we will keep users returning to your website. Contact us today for a free quote!