This past fall I spent a lot of time designing, developing and building an updated website for Sentinel Benefits and Financial Group. They were going through a re-branding and it seemed like the perfect time to update their website.

Their previous website had become bloated with too much information, making it hard for customers or potential customers to find what they were looking for. Sentinel offers so many investment and insurance options that it was hard to cull through all of the information. This is where Single Source, the agency where I work, came in.

After a few attempts to create the architecture, it was decided that we would build four separate sites aimed at each of Sentinel’s targets. Members (subscribers), Employers, Advisors and Investors would have their information right at their fingertips. For example, there is no reason why an Employer would have to sift through information aimed at Advisors.

While we were hammering out the architecture, I also started designing and building the site. At the same time, Single Source hired a writer to clean up all of the content that was on the old Sentinel site.

Knowing that some things (the logo, navigation, etc) had the potential to change, I fully built this site using CSS. After the site was mostly finished, I went in and added CSS style sheets for IE 6, IE 7 and IE 8. I waited until the end for this because if I did have to adjust something, I didn’t want to adjust the CSS sheet AND the three IE hack style sheets. Plus, there was a separate style sheet for each of the four areas of the site.

An interesting note, the flash animation that appears on the front page of each section is the result of a miscommunication. I had originally envisioned something completely different. But I wasn’t there to present my design and it was presented as an “iTunes-like” animation. One of those little “mistakes” that ends up working out for the best.

Another obstacle we encountered was that I wasn’t able to actual work on the client’s server. Because they have very sensitive materials on there, they have significant firewalls in place to protect their customers’ information. I built the site on one of our test servers. This later lead to additional testing once we handed the site over, but we were able to make the launch date. There were a couple of things that needed to be tweaked after the launch, but I was able to work alongside a very helpful IT guy at Sentinel. My general experience with IT people hasn’t been great, but Brad helped to change my perception.

I’ve never worked harder (or longer hours) on a website, but the information I learned during this massive project has changed the way that I build websites.

On a personal note, my wife was the true MVP of this project. She didn’t complain that I was getting home around midnight for two and a half months. We found that by the time she got to work, I was just starting my commute. She would call me from work and we’d be able to chat for about an hour. Judging by my cell phone bill, AT&T was true beneficiary of the project.

Since one of their primary products is windows, we needed to ensure that this would be a clean, bright website. The main feature of the website is the galleries that showcase all of the products that JB Sash has to offer. With that in mind, we worked out the architecture, breaking down the site by products, and then by brands.

We knew that the easiest way to show the many photos would be to use XML Flash galleries. This lead to one of the most difficult parts of the entire process: picking the photos. The account executive tracked down hundreds of photos from the manufacturers. JB Sash then picked out the best photos to be displayed on the site.

As if the galleries weren’t difficult enough, they also feature the ability to email the link to a friend. I set up individual forms for each gallery that a viewer could use to send the link to whomever they wanted. There are also several places on the site where a viewer can fill out a form and set up an appointment with a JB Sash representative.

Another area of the site that has garnered a lot of view is the video section. I wasn’t directly involved with the video testimonials, but those turned out well. It was my responsibility to get old VHS videos up on the site.  It was a bit of trial and error, but eventually I figured out the many, many steps involved.

All of these features are there to help gather sales leads which should, in turn, lead to additional sales.  Within the first 24 hours people were already submitting requests.

Once you take into account the number of photos on this site and all of the additional forms, this ended up being a large site. The client was great to work with and they trusted where we were going with the project.

After designing the logo (see details here) I started designing the website. My first layout was based on a wordpress blog that would highlight a few recent photo shoots. Jess didn’t want it to look so “blogg-y”. I then opted to keep it simple and design a clean website that would keep the focus on her photography. A white website with a single row of buttons that would be broken up by a centered logo would work perfectly.

The photo galleries were based on another site that Jess had seen before. She was able to find a free photo-viewer. Building it as an XML-based Flash gallery also gave her the opportunity to update her galleries when she wants to.

As I said, her previous site was a blog, so I wanted to add an area where she could post new photos and allow viewers to comment. I modified WordPress’ “default” theme so that it matched up with the rest of the site.

For the home page, I wanted something that would grab the viewer’s attention. A crisp collage showcasing Jess’ specialties would work perfectly. I usually like to design using bold colors and shapes, but this project allowed me to try something far from my comfort zone.

UPDATE: Sialia Photography has moved to a new web host/design. If you would like to see the site that I created, please click here.

After the new logo and colors were chosen, I set about designing a site that would appeal to the target market and represent the City’s ideals. The background is a brick color, but not the loud, blue-based brick that they had used in the past. This brick was a warmer, more inviting yellow-based color. We didn’t want to use too much of this color because people don’t have to travel very far in Lowell if they want to see bricks. To balance this color I chose an yellowish, off-white background. We wanted to use a serif font, not only to reflect the logo, but to present the upscale nature of the City.

The Flash animation was based on a previously developed animation.  But this was manipulated beyond recognition of the original to what you see today.

The four main navigation buttons are large and keep the viewer focused on the four main areas that help to promote Lowell. These four areas have expanded out into other promotions and media.

The green bar that runs along the top is an element that will eventually find its way on to all of the websites that the city runs. We also added an area where businesses can advertise. It’s a great way to get the community involved, as well as help the City take in some additional revenue.

So far in this post I have spent a lot of time on the layout of the site. This was the first time that I had designed a website that I didn’t end up building.  The guys in the IT department for the City did the actual labor. They built the site using Microsoft Sharepoint. I never would have guessed how smooth and easy it would be to work with outside developers.

I won’t get into the whole write up about the creation of this website because I actually kept a running “Twitter diary” of the process. You can see the step-by-step process at my agency’s Twitter page. The page was left as a generic-looking account because I didn’t want anyone to know which website we were working on at the time. The “Twitter diary” was fun and productive.  It’s been handy at times to go back and view how I handled different issues.

Previous website

Early on, it was determined that we would build the site, and then hand it over to Envision and they would make any future modifications. We opted to build the site knowing that Adobe Contribute would be used for future edits. This created a few complications, but nothing that we couldn’t overcome. Contribute does have some limitations, but eventually we came to the realization that if a client wants a fully functioning web design program that can do everything they want, they would need Dreamweaver.  Contribute is a lot easier to use for the non-web designer, so this remained the best option for this project. 

While we didn’t modify the Envision logo, we at Single Source did come up with a new positioning statement. Original Content On-Air, Online, On-Demand. To help emphasize this, we decided to animate the words.  In order to have this animated, as well as have the buttons work as normal, I split the top navigation so that the top part is Flash, and the rest is normal html. The hardest part of this was the actual logo.  Since it is split between two methods, I had to make sure that it lined up and that the colors were the same between Flash and Photoshop. If I’ve done my job correctly, you never noticed. 

Once the design was finalized, we moved forward with construction of the site.  I built the pages so that each individual show page would follow the overall look of this site, not necessarily the look of their individual websites. Each page has description of the show (written by the account executive for this client), links, sample mp3s (which are actually flash movies) and a RSS feed from the blog of the individual shows. Many of these shows are in the business of promoting themselves, so they keep their listeners/fans up to date with their latest activities. 

The home page also has an RSS feed that draws from the Envision news page.  Envision issues a lot of press releases, so the home page now reflects the most recent.  Since they already had a WordPress blog set up for all of these press releases, it didn’t make sense to rebuild this part. I downloaded the same version of WP that Envision was already using, and I modified the header and a few other files in order to allow the Newsroom section to have the same look and graphics as the rest of the website. 

The last challenge to overcome was animating the “spotlight” box on the home page. While I’ve flirted with it in the past, this was the first time that I’ve really dug down into a XML generated Flash animation. It took a while, but I was able to give the client what they wanted.

Overall, this is a site that I am very proud of.  I think it looks good and it works well.  I also learned new skills that I am already incorporating on future projects.

You can see this entire site at www.EnvisionRadio.com

The idea behind the last version of the site was to create a portfolio site that would be easy to update. Many of my recent projects have been big, so I haven’t been able to add a lot of content to the portfolio section. So, to make up for that, I have worked to add design tips that I use or have recently learned. But, as this site was becoming more text-focused, I was losing the portfolio aspect. Switching to this new theme will help to showcase the portfolio pieces, as well as general design information.

Originally I spent a lot of time on a flash animation that would be the header of the home page of the “red and white” website, but it ended up being too small and I was going to have to start over. A better solution was to re-evaluate my theme and see if I could make this site more reflective of where I currently am as a graphic and web designer.

This new layout is based on the Infinity theme by yichi. I found it via the Smashing Magazine website. This site also incorporates a couple of icons that I picked up from ThinkDesign. I have spent a lot of time reading and studying other design blogs and it really opened my eyes to all of the opportunities that are available with web design. I recommend the sites listed above, plus the sites that are listed to the right. (Of course, when I change this theme in the future, those links might not be there, so you’ll have to look around.)

This is actually the fifth layout that I’ve used for my personal website. As usual, this site is my testing ground for learning new web techniques, so you if you didn’t see the first few iterations of this site, consider yourself lucky.  As for the design, I wanted to keep the majority of the elements from my previous website (logo & red background color) because I recently printed up some new business cards.  No sense in breaking brand standards and having to incur new printing costs. 

There are still a few minor things that I will update, but now I can get back to focusing on creating posts for new pieces that have recently been unveiled. The X-Men 150 project will soon have an update, and I will give everyone a breakdown on the Lowell Spinners logo redesign, as well as the re-launch of Envision Radio Networks’ website.

If you see anything that you would recommend that I change or fix, let me know. I’m always looking to improve.  And please, feel free to subscribe to this feed and/or follow me on Twitter.

Once the architecture and design were finally nailed down, the most complicated part of the site was the quiz.  After trying a few different quiz applications, we ended up going with a package created by Articulate.  It allowed me to set up a ten question (plus bonus) quiz. As soon as the user finished the quiz, it would then give the user a score, and if necessary, show the user which questions they had answered incorrectly.

After this stage, the user would then enter their name, email address and store number.  They would then be sent an activation code for the software.  I built the form to submit the information, and then distribution of the activation codes was left up to Kaspersky. 

The sales people in the different retailers were given some materials to help acclimate themselves with the new software.  This piece also gave the sales reps the username/password for their particular portal site.

The previous five paragraphs overly simplify the process of the creation of this website(s), but it was a challenging project.  You can see a working version of the website here.  I have disabled the login and the submission form.

I wasn’t involved in the creation of the logo, but I did help suggest the colors to be used. I suggested the brick color because this group helps people in financial distress hold onto their homes.  The sand color is representative of the beaches that are found in these communities.

My main contribution was the creation of the website.  I wanted to take elements from the logo and have that carry through the site.  The jagged edge along the “roof” of the logo is seen on many of the edges and buttons on the pages. I found the different photos on a stock photo site.

There have been some rumors of upcoming logo changes.  Hopefully this change won’t be too severe.  But one way or the other, there will probably be some changes to the website.  

This year, there were far fewer tickets than in years past. Because of this, there was a pre-sale to the early buyers from last year. I set up a Constant Contact email newsletter account and emailed those who had bought tickets early last year. I set up the Constant Contact, as well as the Boomerfest website so that each recipient had an individual username and password for the pre-sale.

This didn’t have to be a complex website, it just needed an area for people to buy tickets. The other draw to the site is the photos from past games. Each year I spend a couple of hours re-configuring the PayPal settings (Red Sox ticket prices are constantly going up) and uploading the new photos that people send in. It’s not meant to look like a professional website due to the nature of the event. A bunch of friends getting together for a few beers and a Red Sox game.The Boomerfest logo is based on the Red Sox font, and the site overall uses the Red Sox colors of red and navy.