A web site is a dynamic part of your business that should grow and change along with the business itself. Using some old screen shots and mockups, I’ve put together a chronology of the web site design and redesign process for one of our clients. You’ll see how the design evolved and changed over the course of six years, based on web design trends and the growth of the client’s business. But along with these changes, there was always consistency in the core identity to maintain a recognizable brand for the company.
Our case study: wellfitinc.com
We’ve been working with Well-Fit Triathlon & Training for about 8 years. We’ve designed their brand identity from their logo, to the web site, to ads, uniforms, promotional materials, etc. We’ve watched, and helped, the business grow from a one-person coaching model to a business with multiple coaches, classes, and a training facility. Like many of our graphic design clients who have gone through this type of growth, their web site needed to change as their business did.
I was first introduced to Sharone Aharon, the owner, when he was making the decision to move from a one-person personal-training type of business model, to a larger, triathlon-focused business. It was 2003 and he had been working as a personal training and triathlon coach, but was ready to expand and start offering classes and a more focused approach on triathletes.
After designing his logo, Visible Logic got to work on his web site. At this time, only a few classes and his own triathlon coaching services were offered.
Original web site design (2003)
The home page of the original Well-Fit web site.
Interior page of original web site design.
A few notes about the original web site design: Well-Fit was entering the Chicago market and wanted to be seen as a high-end, very accomplished, and serious coaching company. Sharone, the owner, had this experience but needed to transfer that perception to his company (named Well-Fit) and build the company’s brand image. Therefore, building a highly recognizable brand identity was critical. Pricing was going to be high, but consumers will accept that with the right brand image. Also the customers were going to demand a lot of information to rationalize their purchase, and the imagery needed to appear serious in order to appeal to accomplished athletes.
When I look back at this design, there is so much that we do differently now. Web design as a general field has changed so much in that time, and here at Visible Logic our own web design skills are much more proficient. A few of the items that really stand out to me are: the use of graphic elements for the navigation; a lot of wasted space at the top with the centered logo; too much text; design choices that are very detail-oriented, but hard to update; and the text in the navigation is hard to read. But I also see how were were able to create a compelling visual position for Well-Fit that launched them quickly into being the premiere triathlon coaching company in Chicago. His blue and green color palette is unique, and the design of the web site mirrored Sharone’s attention to detail.
Web site design, version 2 (2005)
As Well-Fit grew, the number of classes and clinics increased, group training programs were launched, and additional coaches and teachers were added to the staff. We now had two types of web site visitors. The first who wanted to spend a lot of time and learn more about Well-Fit before making a purchase and returning visitors who wanted to quickly register for a class or training session.
Home page design, version 2.
Design of an interior web page from the site, version 2.
In our redesign we added a lot “quick links” to the home page. We also moved to a horizontal version of the logo to better use the top area of the site. On the interior pages, we re-worked the side, sub-navigation to be be able to handle more items and sub-menus. We improved the readability of text in the navigation bar (although they were still images). And more photos were available of actual clients. The client worked on editing and reducing content to make pages more readable.
We also got rid of the “resources” page and “online store.” The site had been e-commerce enabled since the start, but ideas for these two areas were no longer a focus for Well-Fit. This is a common phenomenon for entrepreneurs and new business owners. You may not know what parts of your site will be valuable to you and your visitors. More importantly, you may not know which parts of your businesses are most profitable and therefore grow, and which need to be let go so that you can better focus.
A few critical items worth noting. As I mentioned, the site was e-commerce enabled from the start and we used Miva Merchant to handle the class registrations and other purchases. However, the site did not have a content management system in place. When we launched the site in 2003, Well-Fit was small and so it was easy for Visible Logic to make web site updates on a regular basis. Also, at that time there was not the free and low-cost CMS platforms available that are so common today. It made financial sense at the time to have us handle the web site updates, but the writing was on the wall: Well-Fit would soon need a content management system of their own.
Web site design, version 3 (2007)
The third version of Well-Fit’s web site design was spurred by the continued growth of the company. Well-Fit was ready for a content management system so that they could easily update their own web site. As we completed this third redesign, we continued to work within the brand identity we had built for Well-Fit.
Home page, redesign 3
As their offerings continued to grow and change, the navigational items were adjusted so that visitors could quickly find what they were looking for. We changed the navigational items to true text so they were searchable by Google and updateable in the new CMS. Well-Fit also started working with business partners and sponsors who needed to be featured on the site.
This version of the site is actually a bit of a painful memory for me. In an unusual move we decided to work with a developer who had been selected by our client. Generally we do our own development work (by either using our internal resources or partnering with an outside developer of our choice). But for various reasons, we agreed to work with a web developer who had been recommended to our client. Neither of us really knew him or his work. The site was developed in Dot Net Nuke and the whole thing, quite honestly, was fairly disastrous.
This was the first time I had been forced to make significant concessions in my design to fit into the limitations of a CMS. I still don’t know if it was the tool or the operator, but it took a lot of wrangling to get the design to look even close to the mockups that the client had approved. Worse yet, was the problem that the CMS was so not-user-friendly that my client ended up turning over at least half of the web updates to us. So, instead of saving on the costs of web updates (but investing it in a CMS) he had paid dearly for a web site that didn’t look right and was too hard for him and his staff to use.
Web site design, version 4 (launched in 2009, currently live)
In 2008, Well-Fit decided they were going to open their own training facility. Up to this point, they were juggling their classes in numerous private gyms and university pools. There was no unified, physical place to host the classes and training. This was a huge capital investment and a real change to the business model.
The web site had to updated to include this offering. However, as I described above, we had just been burned by a poor choice of CMS and web developer. As expensive and painful as it was, we had to rebuild the site in a better platform.
Design of web site home page, version 4
Interior page from the fourth web site design.
As you can see, the design continued to evolve. We did away with the green background altogether to make text easier to read and so that logos could be placed on the white background. The company experienced a legal name change and the logo was adjusted accordingly. The quick links on the side became very open-ended so they could be about a class, a training program, or any type of announcement. The new CMS (SiteFinity) works really well: the design is not compromised and the editing tool is easy to use.
Planning a successful web site redesign
As you can see, a web site is a live and growing thing. On the small scale this means updating content with current news and events. On a larger scale, it means redesigning and redeveloping your entire site.
- If you have a small, but growing company, you need to expect to redesign your site as your business grows. Some people think of web site design as once and done. Others think that with the right content management tool, you’ll never pay for professional web design or web development help again. But that is not realistic.
- As your business grows, the content on your site will change. Obvious additions will be increased staff and changing products or services. It is not always enough to just add or delete pages, eventually you will need to reorganize content. This generally means working with your web designer. As an example, when you are essentially a one-person firm, your “about us” page may be nothing more than the founder’s bio. But as your firm grows, you may want to separate company history from your own biography. Once you add enough staff, sub-navigational systems may need to be developed.
- A change to how you organize content should not necessarily mean a re-branding. You may be sick of your web site, but there are many customers or potential customers who are just getting to know you. As part of any web design changes, you’ll want to maintain some design elements so that you continue to increase, not dilute, your brand identity. It can be tempting to re-do everything when all you need to do is focus on improving your navigation, for example. Also, if you jump around from one web developer to another it can be difficult to maintain the brand experience.
- Do use web site redesigns as an opportunity to improve the design. Web standards change, and web trends change. When you go in to make a functional change, it is a good time to make adjustments to the web look and feel as well. Just remember that web design and development changes are not brand identity changes.
As you can see from the evolution of the Well-Fit web site design, specific design elements can change and functionality can change, but brand identity should remain steady. That doesn’t mean nothing in the look and feel changes, but there is a always a consistency in your visual position. In fact, new functionality or business offerings are often highlighted by a change in design (even if the two are unrelated), but there are threads that weave through all the design iterations that build a strong brand identity for your business, product or service.
Like us on Facebook
Follow @visiblelogic