Navigation

Happy Cog’s Redesign of VisitPhilly.com:
An Exemplary Modern Website

Resources, Web Design | Feb 22, 2010

In January, Jason Santa Maria sent out a tweet announcing that visitphilly.com had been redesigned by world-renowned design studio Happy Cog. My interest was piqued, and I couldn’t help but take a look.

I can honestly say that I’ve never been more impressed with a website redesign than I was with this one.

That Happy Cog was able to turn such a large website into a beautiful, accessible, functional and inviting user experience testifies to the talent of the team at Happy Cog.

By no means am I in a position to offer a critique that does justice to the planning, design and development that must have gone into this project.

But I thought it would be useful to point out why this redesign epitomizes a beautiful and effective website design for today’s market.

visitphilly.com redesigned

 

A Clear Purpose

The domain name, eye-catching logo, clear drop-down menus, beautiful photography: all of this and more play key roles in communicating the website’s distinct purpose (to encourage users to visit the city of Philadelphia) and in inviting users to explore via the website what is (rather surprisingly) a beautiful American city.

The first navigation items that the user notices are the mega drop-down menu links and the large text links that overlay the main rotating image.

The screenshot below highlights these links, namely “Things to Do” (which is shown active), “Plan Your Trip,” “Philly Now” and the image overlay “Power Lunch.”

visitphilly.com drop-down menus

These items were obviously meant to be noticed immediately. In the shot below, I’ve mapped the most likely eye path of a user scanning the home page.

Visual path

After noting (and possibly exploring) one or more of the drop-down menus, the user would scan the text related to the active image, and then naturally move down to the section labeled “What’s New,” finally coming back almost full circle to the header near the search box.

The content is organized so that the user can take an informative and visually memorable trek across the most important sections of the page in a matter of seconds.

The user would not likely be delayed, confused or overwhelmed, despite so much content being available to explore.

 

A Minimum of Primary Links

As mentioned, one of the most prominent areas is the drop-down menu. The decision to stick to a minimum number of primary links here is the right one.

Having only three links allows the items to be displayed in a larger font, thus holding the user’s attention and demonstrating the website’s focused structure.

Main Navigation

The minimal navigation bar is one of the major changes in the redesign and brings great benefits. Compare it to the header section in the old design, which is not as focused:

Old Website Header

Although the old header is not poorly designed or unusable, it is not as focused and not nearly as beautiful as the new one. Another weakness is the lack of drop-down menu indicators, which on the new website are clear and attractive.

When a user arrives at a website such as this one (often through a Google search), more often than not they will want to do one of two things: see what the city of Philadelphia has to offer or plan their trip.

The stripped-down navigation in the header helps the user accomplish these goals quickly and efficiently.

 

Beautiful Typography

Would we expect anything less from Happy Cog? I absolutely love the font used for the “Philadelphia and the Countryside” logo.

It has a subtly western feel but is still modern and dignified. To keep the branding consistent, the font is reused for many headings throughout the website, some of which are highlighted in the screenshot below.

Branding via typography

Most of the text on the rest of the website is in Georgia font, with the occasional use of Arial, but done quite elegantly. The website’s diverse mix of headings, body copy, captions and other descriptive elements is extremely readable and tastefully presented.

Despite the amount of content, even on internal pages, the user rarely if ever feels overwhelmed, unlike the experience on the old website.

 

Increased Performance and Perceived Speed

A website with so much content and so many images inevitably takes a hit in performance. The developers were conscious of this and took great care to ensure that any delayed-loading content would not be distracting or cause visitors to give up and look to another Pennsylvanian city.

As shown below, when the user visits the home page, the last item to load is one of the most important elements in the new layout: the main rotating image. But the actual slowness is mitigated by the content-loading indicator (the spinning animated graphic):

Content-Loading Indicator

This usability enhancement is not restricted to large images either. Because of the diversity of content in the drop-down menus, a similar content-loading graphic is displayed as the menu content loads via Ajax:

Content-Loading Indicator

For this menu, the enhancement is imperative, because drop-down menus are normally not delayed when triggered.

No loading indicator would have caused confusion, possibly making the user mouse away and then mouse back, wondering why the functionality is stuck.

So, although the page does not actually load any faster, the perceived speed is increased. This is a lesson to all designers and developers to think not only of actual speed but of perceived speed.

 

User-Oriented Features

One of the most important features of the new website is the way the transition to the new design has been done, which ensures that returning visitors are not shocked by the drastic changes.

When you first visit the website, you notice a large red banner at the top of the page, informing you that the website has been redesigned and is still in beta. You are given the option to browse the website using the old interface.

Old Site Banner

Giving visitors who are accustomed to the old layout and structure the option to go back to it is critical, because it ensures they don’t become frustrated trying to find familiar content.

On such a large website, especially one redesigned by a company known for its user-focused designs, such major architectural changes and enhancements are bound to throw off visitors who were used to the old style.

The message in the red banner, then, prevents any confusion or frustration on the part of visitors.

I didn’t spend a lot of time comparing the old website to the new one, so I can’t confirm how similar the contents and architectures are, but because we are given the option to visit the old website, the contents must be similar enough if we are able to access current events and other regularly updated items in both versions.

One common element is the link that appears above the search box, soliciting feedback on the new design by inviting users to fill out a “beta survey.” This feature shows that the owners are concerned about how users experience and perceive the website.

Beta Survey

 

Fully Accessible Content

Many of the members of the Happy Cog team are well known online for their advocacy of web standards and accessible content, so it’s no surprise that this website is fully accessible to virtually any user on any platform.

With JavaScript disabled, the user’s experience of the website is very similar, even though many enhancements are no longer available.

The CSS text-indent property is used to replace the text in the headings with images showing the custom font. This ensures that the pages stay semantic, SEO-friendly and visible to all users.

The image below shows a heading on an internal page, on the left with the style disabled, on the right with it enabled.

We can see how the headings are enhanced by images without losing their semantic value and without the designers resorting to unnecessarily complex font-replacement methods.

Headers with styles disabled

Another key accessibility feature is how the JavaScript enhancements are implemented. The home page has two tabbed content switchers, one called “Book Online,” and the other connecting to visitphilly.com’s social networks:

Headers with styles disabled

When JavaScript is disabled, all of the content in both tabbed boxes is displayed. Many websites with tabbed widgets display only one of the boxes when JavaScript is disabled, but that is generally not best practice.

This technique is used consistently throughout the website for a number of features, ensuring that the behavioural layer (i.e. the Ajax and JavaScript) is an enhancement, not a necessity.

This makes the content accessible not only to users who are browsing without JavaScript but to search engine spiders such as Googlebot.

 

Any Weaknesses in the Design?

Again, I am in no position to fairly critique a design done by a company such as Happy Cog. But I will point out (cautiously) two minor weaknesses in the new design and structure.

First, I find the wording of the third link in the primary navigation menu a bit vague (“Philly Now”).

I didn’t know right away what that meant. I had assumed it meant current events, but it’s apparently a combination of events, weather and current photos. I’m still uncertain how to describe it, and I get the feeling the link will rarely be clicked.

The other weakness is the right-pointing triangles in the secondary navigation menu on internal pages:

Secondary Nav

I assumed that those triangles indicated fly-out menus, but there are no fly-outs. The triangles are just pointers to draw the user’s attention to the content area. Right-pointing triangles are best reserved for standalone links and fly-out menus, not vertical navigation such as this.

We find the same thing on the home page, but it’s not as bad there because the arrows are part of a JavaScript-driven content switcher.

Neither of these “weaknesses” harms the user experience much. And the fact that I can find only two weaknesses shows how great a redesign this really is.

 

Worthy of Examination and Imitation

Much more could be said about the effectiveness of the design and the code of visitphilly.com, beyond the scope of this article.

In addition to what we’ve discussed here, I could point out the valid and well-commented code, the effective use of white space, the visual hierarchy, the excellent color choices, the virtually identical experience in IE6 and more.

I hope this analysis gives a decent overview of some of the key features of this new design and how it epitomizes modern web design in the industry.

 

Further Reading


This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

Do you like the new visitphilly.com? Do any other features of the design, layout or architecture improve the user experience? Please offer your comments below.


Share this post
Comments (no login required)
  • http://hamroawaaz.com Web Guru

    The website looks quite good to me. I can’t see any mistakes or flaws in it.

    Just too good.

  • rickdelux

    I’m not the biggest fan of Happy Cog’s work but this is a truly refreshing online experience. There are minor details that I may have issues with but those are just personal preferences. Recently, I pitched a similar idea to a client only to have that white space filled in by marketing folks who don’t value it and thus bastardized the design. I guess I could have fought harder to keep the white space but it would have been a losing battle.

    Anyway, I just hope the imitators give it justice.

  • http://www.thedesigncontainer.com ManuelN

    I see this page before, i think this is an amazing design work, the objective is clear and direct, and all the layout, images, compositions, all are really perfect!

    Nice work, worth of inspiration.

  • http://devisefunction.com Matthew Heidenreich

    thought this was a great rundown on the changes made. Great post.

  • http://www.happycog.com Kevin M. Hoffman

    Thanks for your kind words, Louis!

    • http://www.impressivewebs.com Louis

      No problem, Kevin, it was fun to review.

      If anyone on the Happy Cog team would like to tell us the name of the font used in the logo, that would be great. I searched for, it seems, an eternity, to find the font, without finding an exact match. It almost seems to be a modified version of an existing font. Maybe this one:

      http://bit.ly/b6WiLr

      Or this one:

      http://bit.ly/d5MjOx

      Thanks.

  • http://mikesh.ch mikesh

    Very nice work. i like it.

    The only thing it seams has some loading issues? It might be all right for the users who actually look for something in particular, but for those who just want too brows a little it might be too slow.

  • Quinn

    Some decidedly barackobama.com-ish elements here. Also would like to have seen a more creative rollover for the Philadelphia home link — the plain blue-to-white gradient feels like it was an afterthought. (Would’ve been forgivable if it didn’t take up so much real estate.) I’d probably slow down the transition a bit, too.

  • http://www.what-a-geek.com Adit Gupta

    The website is so good that it will make you book tickets for philly. Awesome work by Happy Cog. And an excellent article too :)

  • http://designinformer.com Design Informer

    Excellent and detailed write-up Louis! It’s really nice to read about the actual design, etc. What would also be nice is if you would have been able to interview the actual designers/developers. That would add even more to the article.

    Great job!

  • Joel Kidd

    I guess the one thing that is bothering me is when the images switch on the homepage and throughout the site the dark blue, transparent background behind the main navigation goes away. On some of the images this works but on others the main navigation is hard to read. I would suggest that the dark blue, transparent background always stay behind the main navigation to ensure that it is always visible. Other than that it seems like the site is very well put together. I wouldn’t expect anything less from Happy Cog!

  • http://www.visitphilly.com Caroline – Philly Tourism

    Thank you for the review of our site – we are super proud of it. If you’d like, I can send along some information giving context to the website change that shows some of the research we did going into the redesign. It was great working with Happy Cog as well.

  • http://www.aledesign.it aledesign.it

    I like this post some points are important…by the site I like the header. Use a good font.

  • http://www.cancelbubble.com cancel bubble

    The drop down menus are horribly slow. They should be lazy-loading those at the very end, as it is now, they’re only loaded on mouseover. It’d be nice if they pre-loaded in the background while you might be exploring the rest of the page that way they might be ready to go immediately when you do mouseover them. This would be very nice on secondary pages as you’re probably engaged in reading content before navigating elsewhere.

    They look to have designed the content width for 1024 resolution but on a sample secondary page I went to (museums), the page header isn’t even visible on the screen, you have to scroll down to get to the content. Not a big fan of that.

  • http://www.sozlerfilmler.com film izle

    hmm goood,On some of the images this works but on others the main navigation is hard to read

  • http://sexidesign.com Melody

    Hey, I’m in philly! It’s been awhile since I visited that site but it looks great. And there are always beautiful photography from around the city on it. Nice job :)

  • Sean

    All those ads are so distracting on this blog, good article though

  • Stuart

    Well, as I have a slower connection at home, I tend to browse with images switched off. Unfortunately, this means that I can’t see some of the headings…

    Well, I don’t really, but I just have a problem with the text-indent method of hiding text – plain images with alt attributes would be better here, I think (or if you really, REALLY MUST use image replacement, and you have a single-colour background like visitphilly.com, why not use an extra span in there and position it absolutely over the text.)

    Not that I want to sound TOO negative, though, ‘cos it’s a really nice looking piece of work!

  • http://www.sleepyhero.com eli

    I like posts like this. Well done Louis, it was a good read. I think Happy Cog is establishing themselves as one of the most sought-after design studios around.

  • http://www.rizwanjavaid.com Rizwan Javaid

    Overall the site is great. It is simple, clean and colorful. The images make you want to be there right now. Great Job.

    One thing I would suggest though is to link the Images and Titles of the Featured listings on the home page.

  • http://quityourdayjob.com.au Lee

    I certainly see what you’re saying regarding the “Philly Now” link but I disagree that it won’t be clicked often.

    Even though it is not immediately clear what the link pertains to it definitely hints towards it and I think the target audience might enjoy ‘exploring’ the site a little as they discover why they might want to visit.

    Of course this is only my personal feeling and more than likely way off :)

  • http://ejhansel.com Eric

    I completely agree with you about this being a beautifully designed site. I’m also probably not one that should complain or comment on design, but I’ve been doing it /design my whole life so why not.
    I think you’re a little too close to the design style. I look at sites like http://carsonified.com/ and I’m blown away. I really couldn’t imagine how you’d change the design or make it better, but someone that’s not into that style would come along and rip it apart.
    I know this site’s still in beta so I won’t complain to much on the long/slow load time.

    I love the big header image, and the text in the header is done very well, but when you really look at the main menu it seems a little cramped. The homepage isn’t so bad, because of the margin on the top, but when it’s forced to the top it’s definitely a bit much. My eye bounces around and I just want to move on. Almost completely ignoring the search bar, which is usually my main source of search on any page. I think the “HAVE FEEDBACK?” and “BETA” might be taking away some of the white space around the search bar and logo. Once that’s gone I may have a different opinion. I’m willing to bet the designer has already considered that. Definitely the “Have Feedback” portion.

    I’m not sure how much time you’ve spent on the homepage, but now that i’m looking and writing I’d say the images fade out to quickly. That’s just my preference, but when their not fading in and out, I’m much more relaxed.

    Besides that I love the home page. The canoe image is awesome. I don’t agree with you on the arrow for the home page. It indicates new content, not a drop-down menu. It’s apparent once you click on one of the list elements.

    The problem comes in when you get to a page that doesn’t use the same convention. Same arrow, different action. That’s a problem. It’s no longer familiar and to some users it could be confusing.

    I love the way some pages break the grid. Like the Museum page. But I’m not sold on the 3 column design. It’s ok at first, but as I scroll down the page it gets more busy and a bit confusing. You have a huge image in the headed, why not continue that with a huge image slide show, links on the left, images on the right. Then below , split it into a 3-column design. Right now it’s a cluster followed by cramped content. I’ve clicked on Museums! Why force “Hot Spots” on me? Come on, I clicked on Museums and you show me “Hot Spots”? Maybe, but probably not my style. Even if those hot spots show me other museums, the header alone turns me away.
    I’m not trying to be a jerk or anything, I love the design, I’ll probably rip it off at some point. But all design can be improved. I wish someone would rip apart every design i’ve ever done. Especially someone like the person that created this amassing site. I’d be a much better designer.

  • http://vlastimilsvoboda.cz Vlastimil Svoboda

    Well done. It is simple and clean. I like it.
    What may be better? I think, the drop down menu. Whole line should be active link, not only text. It would be more usable.

  • http://styleone.pl hostessy

    This article is great. Thanks for it.

  • http://www.2dforever.com Tom

    Interesting. Was there any reason as to why you chose to give an in-depth review of this site in particular? In m opinion it’s nice, but I’m unsure what makes it worthy of such an in-depth review?

    • http://www.impressivewebs.com Louis

      First and foremost, it’s designed by what is probably the most well-known web design agency in the world.

      On top of that (even thought that’s probably enough reason to analyze it), I felt it had characteristics that were very much in line with some of the more recent trends in web design. And when I say “trends”, I’m not talking about fluffy jQuery tricks and other superficial elements; I’m referring to best practices accessibility, user-centric features, simplicity of architecture, etc., most of which I discussed in the article.

  • http://www.4w.co.uk Dan Broughton

    Right on the money – don’t know why they would label it “Beta” though – its a destination resource for would-be travellers, not a 2.0 company.

  • http://www.ravi.uxdsign.com Ravikumar V.

    in my concern this site looks good but not a best one to examinate or imitate.

  • http://www.dailygrind.it Sergio

    Code doesn’t look excellent to me, but I understand that it’s almost impossibile to reach perfection on such sites. Great work as usual for HappyCog.

  • http://www.en.yourinspirationweb.com sarah

    Good design, good typography, good at all :)
    Thanks for sharing this.

  • http://www.vda2.com hdennison

    BIG issue:

    The URL never changes, you can’t bookmark o quick link any section/subsection because always points to the root.

    It’s “easy” to fix it using something like swfaddress / jsaddress, and it will be a HUGE improvement.

    Nice work anyway ;)

  • http://Ansh.THISISITONLINE.INFO NJ Web Designs

    well written article.

  • http://www.visitphilly.com Caroline – Philly Tourism

    All – thanks for your insights. Our web team here at Philadelphia Tourism is continually tweaking the site to make improvements, so I am sure they will be interested to hear your expert opinions.

    Dan – the site is beta because of the sheer volume of pages on the site. We have SO much content that we needed to migrate over from our old site (gophila.com) and we have so many partners all over the Philadelphia region that deserve attention on the site, that we needed people to be aware that we are still in the process of building up all the content.

    Thanks again!

  • http://www.loveishs.com/ tanya

    This website looks really good. I m really impressed by the look of it.

  • http://www.whatwasithinking.co.uk Alex

    Very nice site, I agree with Dan, its not a good idea to label a destination site such as this one as “beta”, after all the purpose of the site is to display information about the destination, be it places to see, things to do or accommodation options.

    Nice design though, and relatively speedy loading times!

  • http://www.creativebubbles.net Max

    This article is great. ;)

  • carlos

    I do enjoy the new look but for me, having AJAX dropdowns are a bit much. Pretty slow and possibly not even needed. There are many other ways to put multimedia in dropdowns that load fast. Especially if the dropdowns are just text. I know a lot of users won’t wait for a dropdown to load and possibly leave. And I am viewing on one of the highest bandwidth connections on the market. If it takes this long to load, WOW.

    I enjoy the large image headers but think they could have brought the content a bit higher on the page into the header so that the scrolling wouldn’t be so cumbersome. But thing are changing in the design world.

    I actually have never heard of Happy Cog before this article. I have seen their sites like AIGA, their blogger templates, A-List, WordPress. I am not hugely impressed with some of their work, although I do have to say they must be doing something right if they are getting clients such as WB, the Today Show (NBC), etc.

    I am not the greatest if UI designers, but I have seen work that can easily rival Happy Cog’s work. I am not them or with them so I must not have the knowledge base they have or the know how they have. Or the marketing skills and ability to sell and idea either.

    All in all, they did a pretty good job on the new site. Some load issues, good imagery (might need to be optimized to improve load times), but all in all, decent layout, but like Eric stated earlier, a bit cluttered at the bottom. Tried to shove a lot of content in small amount of space and the eye does jump around a bit.

    • http://www.impressivewebs.com Louis

      Carlos,

      My guess is that they’re using Ajax to load the drop-downs for two reasons:

      1) They don’t want that content loading unnecessarily if it’s not needed. As pointed out, the home page takes about 13+ seconds to completely load. Adding the drop-downs to that would be overkill; and

      2) The content in the drop-downs is being updated by the client through a content management system, so it can’t just be a normal part of the page, it has to be in include files, which are easily integrated into an Ajax-driven application.

      Regarding the content being too low on the page, you have to take into consideration the purpose of the site: Have you ever thought of Philadelphia as being a beautiful American city? I haven’t. In fact, from the footage on the Rocky movies, it looks pretty ugly to me. But after seeing the imagery on this site, that notion, at least for me, has changed. I think the imagery is integral to overcoming any preconceived ideas about Philly, and any harm (by the images) to the user experience is negligible.

      And you’re absolutely right, Happy Cog does not make the most beautiful websites in the world &151; because beauty is not the most important thing in web design. Usability and focus/architecture of content are much more important factors, which I think they do better than anyone.

      Anyhow, thanks for your thoughts on this.

  • http://www.iskimpixels.com/ damian

    there are so many lovely details on it… i really like it…

  • Drew

    I’ve said it elsewhere and I’ll say it here… love this site. Great typography, large imagery, lots of whitespace. This is the kind of site I aspire to design.

    (And being from Philly, it’s nice to see we have such a stunning web presence)

  • RoaldA

    Love the excelent use of photography! Just outstanding!

  • http://www.zachrodimel.com Zach

    So cool. Great design elements all working together to make something that seems to flow very smoothly. Great disection of the site!

  • jay

    I love your site! You always have such interesting articles!!
    This redesign is quite beautiful, thank you for sharing!

  • http://www.webdesigner-michigan.com Kevin Mist

    Thanks for this article. It is exactly the type of article that catches my eye and I inevitably end up reading. I am a little tired of “10 great widgets” and “50 funky whatsits” blog posts that basically fill up space. The amount of time and thought that you put into posts like this is verily appreciated. Keep up the good work. You just earned a new subscriber :D

    Kevin

  • http://www.ongobee.com OnGoBee

    Wow, you make it look so easy. That tells me you’re really good. Thanks for the info and inspiration. Maybe someday I’ll be able to afford your talents.

    Frank

  • http://www.bigtunainteractive.com Adam Hermsdorfer

    I’m a fan of Happy Cog, especially after the parties that they hosted at SXSW. VisitPhilly is a site that I’m sure will win plenty of Webby’s. I was also initially confused by the “Philly Now” nav descriptor. I think it would be really cool if they would pull the sports teams scores (Phillies, 76′ers and Eagles) in the mega drop down. But, I’m sure that would slow page loads even further.

  • http://www.izlerken.net erotik film izle

    there are so many lovely details on it… i really like it…3

  • http://www.esenyurtguncel.com esenyurt

    So cool. Great design elements all working together to make something that seems to flow very smoothly. Great disection of the site!

  • http://www.webdesign-gm.co.uk website design bristol

    I really like the honesty in this piece too , good content

  • http://www.direkdizifilm.net direk izle

    there are so many lovely details on it… i really like it… <3

  • http://www.alessandromingione.com Alessandro Mingione

    The typeface is Ziggurat from H&FJ