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 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.

The original premise for this project was to give new Dunkin’ Donuts Franchisees a packet of information welcoming them to the Dunkin’ Donuts fold and giving them the general information that they would need to start up a handful of locations. The pages would be pre-printed and blank so that the department in charge of Franchisees (sorry, I don’t remember the name of this department anymore) could personalize the sheets to each Franchisee.

It’s surprising that this turned out good because it was designed COMPLETELY BACKWARDS. Due to time constraints, the first wave of these info packs were going to go out in a 3 ring binder. The first thing that was designed was the inside pages. I had some ideas about how the entire package was going to look, but initially we were only presenting the internal pages. Because the client didn’t get to see the entire project, they initially rejected my page layouts. Standing on their own, the pages might have seemed a little strange, but in the context of the entire package, it was going to look good. They weren’t buying this, so it was back to the Mac for me.

I had to tone it down and hope that some semblance of design would make it through to the final pages. As with any Dunkin’ Donuts project, I kept to the brand standard colors and used a lot of rounded-corner shapes. Since there were to be two separate pre-printed pages, I needed to come up with a layout that would work for both the introduction letter, as well as all of the interior pages. I was planning on using bolder Dunkin’ Donuts colors for the later parts of this piece. Luckily, I was able to use the Dunkin’ Donuts mustard color for these pages.

The next stage of the project was to create tabs for the three different sections of the package. The hardest part about these tabs was that they needed to work in two different forms. Initially the tabs needed to be visible on the left of the pages. The tabs also needed to work when they were viewed in a 3 ring binder. I decided to use the DD cup logo at an angle so that it would look okay when it was upright or upside down (depending on how you look at the pages.) For these tabs, I used the other three colors from the America Runs On Dunkin’ logo.

After printing up the internal sheets and the tabs, I then formatted the information packet so that the proper people at Dunkin’ Donuts could customize their Word document and print it on the sheets. For the initial group, there wasn’t enough time to create the pocket folder that would hold all of this information. That first group received a 3 ring binder with the sheets and tabs.

After this I began working on the pocket folder. I needed to keep it somewhat simple so that it fit with the previously printed sheets and tabs. I knew everything was going to be flat color created in Illustrator. We presented three different looks to the client. They picked their favorite one and we went to print. For the design that they chose, I added a slew of diagonal lines. These were reflected in the diagonal DD cup logo on the tabs, as well as the outside walls on new Dunkin’ Donuts locations. The folder needed two pockets on the inside. It was possible that there could be dozens of sheets in here, so we went with a box fold for the right side pocket.

Once the pocket folder was filled with the internal sheets and the divider tabs, you wouldn’t have guessed that each of the three steps were designed at different times.

This department was great to work with. It’s a rare day when you show some artwork and they just pick one. Often the client helps to work a design to where it works best for their mission, but it was a nice change of pace for someone to look at a design and say, “That’s the one. Go with it.” (I don’t know if that was the exact quote, but that’s how I pictured it in my head.)

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

After spending 2 1/2 years working at Twins Enterprise (now Twins ’47) as a sports headwear designer, I had the great advantage of spending a lot of time working with sports logos, especially those of Major League Baseball teams. 

The Lowell Spinners is a little different than the MLB teams, in that their primary target are families and young children. Our task was to replace the current cap logo (seen here) with something that would appeal to everyone and tie in a little closer to their wordmark seen here). 

Myself and another designer were let loose to see what we could come up with.  I initially went in a direction that I thought would increase merchandise sales.  Years ago I realized that the best selling baseball caps feature logos that not only represent a team, but they also represent the city in which the team plays.  The Boston “B”, the Yankees “NY”, the Cubs “C”, the Cardinals “StL”, the Dodgers “LA”, etc, etc. You don’t necessarily have to be a Dodgers fan to wear the familiar royal blue cap with the white interlocking “LA”, you might just like Los Angeles the city.  So, I started working with a logo that featured the letter “L” for Lowell.  

The team stated that they were commonly known as “The Spinners.”  Hardly anyone actually referred to them as the Lowell Spinners.  So, I was to focus on using an “S” if I was looking to incorporate a letter into the logo.

The other goal I had for my designs were that I wanted something cool enough for a Red Sox fan to trade in his “B” cap and pick up a Spinners cap.  I’m sure most of you are aware that in New England, everyone is a die-hard Red Sox fan.  And since Lowell is not that far from Boston, a lot of the people go to Spinners games simply due to the fact that they’re seeing future Red Sox players (that, plus Spinners tickets are A LOT cheaper than Red Sox tickets.)  

My attempts at a “cool” logo weren’t well received, so I went about simplifying the current spindle and trying to incorporate the letter “S”.  The spindle, as well as the team name originates from the fact that Lowell was best known as a textile mill town.

At the top of the page, you can see the logo that they chose for the cap. I opted to use a really strong shadow along the right side of the spindle and bat to give the illusion of depth. Shadows under the areas where the “S” crosses the spindle, as well as the little twist lines also help to re-enforce the depth.

Their secondary goal of the Spinners was to have a new patch that would go on the sleeve of the players’ uniforms. This logo to the left is based on a logo that my coworker came up with.  I just cleaned up and reworked the design. 

One design that was rejected for the cap logo was the smiley-face logo (or, as I called it, the “Spinney the Spinning Spinner” logo.) This wouldn’t have worked on the caps of professional baseball players.  But, it is something that kids could potentially gravitate towards.  It was decided that not only could this be used in other merchandise, but it would eventually be made into a new mascot.  Hopefully they come up with a better name.

The last part of the process was to update the jersey script.  Since most baseball teams follow the pattern of home jersey has the team name, and the road jersey has the city name, I ended up creating two different scripts.  For the home jersey, I kept the existing letters and updated the “I” using the spindle. Also, since the team is commonly known as the Spinners, we were able to remove the “Lowell” from the script. 

The road jersey used the previously established elements from the new home jersey. On both of these scripts, I put little triangles along the tail to give it a little more depth. Also, you’ll notice that as the thread comes out towards the viewer, the line on the bottom gets thicker. Another element used to create the illusion of depth.

Overall, this was a really fun project.  It allowed me to play in my old backyard of baseball logos.  I don’t think I’ll trade in my Red Sox cap, but it will be cool to see the future members of the Boston Red Sox wearing a design that I crafted.

Edit: Here’s the link to the story on MiLB.com

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.  

The minute that this project was mentioned, this logo popped into my head. I was fortunate enough to find a picture of Homer. Anybody that knows The Simpsons (AKA everyone) knows that this is Homer’s expression when he’s enjoying (or thinking about enjoying) some delicious food. The angle of his head almost perfectly matches the angle of the coffee cup in the Dunkin’ logo. On the bottom of the logo, I bumped the text around to show the bumbling nature of Homer.

This logo presented an interesting debate: Should designers show work that didn’t go forward? Since it would be practically impossible to use this logo for another project, it was determined that there would be no harm in showing this logo. I’ve decided to file pieces like this under “Scrap Heap.” Every designer knows that many of the “best” ideas never make it to be seen by the outside world. These pieces will either be projects that a client rejected or proposals for potential clients that didn’t move forward.

Most of the time, I don’t recycle ideas, so I don’t have to worry about showing something on here that I would use for someone else down the line.

The top of this logo is the actual Lowell Five logo. They have other established brands that all reflect back to the main logo, either in typeface or the use of the L5 colors, green and purple. I tried to keep this logo in line with the previous brand logos.

This logo is a manipulated version of the font Bernhardt. Avenir was used for the “Keep It Local” part. The tricky part of the Lowell Five logo is that it doesn’t actually say that it’s a bank. By adding in the “$” at the end of Rewards, it helps to reinforce that this is some sort of money earning program. This logo works well because it not only establishes the basics of the program (that the customer get rewarded by keeping their money local) but it also tells you who is organizing the promotion (Lowell Five, of course.)