Creative Brief: A ground-up redesign of the Shere Khan A Cappella website – new navigation, new member features and a fresh design.
The old design; too blog-like for a musical group.
One of the group’s best features is, well, them. The photo rotator that I built for the first site was just too small. The new rotator, built with jQuery and updated automatically from a file directory that they can easily maintain, is much more dynamic and appealing, as well as a more significant part of the design.
A fresh look for the tiger
I went back to the drawing board for this one, allowing what I know about the group to inform more of the design choices I made. Shere Khan has been a Princeton institution since 1993, so I thought it appropriate to build a design that had a vintage and slightly wealthier kind of feel to it. The rich red leather of the logo and the buttons remind me of this old chair my grandfather had, which always makes me think of age and money.
I also wanted to reorganize the information flow of the site, after gaining a better understanding of the priorities of the group. The most important stuff (Upcoming Events, Listen to Clips, Watch videos, Have you met) now sits at the bottom of every page, making it much more accessible to a first-time visitor.
Since this was a pro-bono project (my little brother is in the group, and their previous website was simply unacceptable for a member of my family to be featured on) I had to save time wherever I could. A fantastic tutorial for building a textured website header in Photoshop gave me the idea for a wall-papered background, and I implemented a very close version of it for the final design. I’ll post the link if I can ever find it again.
The new image slider is randomized; you never see the same show twice.
I did extensive testing with Internet Explorer 6, as well as people that are browsing without JavaScript enabled. The site looks and functions perfectly under almost all circumstances.
The big back-end switch
The original site was built on the Joomla! platform, which I no longer use. On aesthetics, function and template customization, WordPress just wipes the floor with its open-source cousin. And since I was redesigning the site anyway, it just made sense to transition over to a WordPress install.
The management systems for the members, news posts, tours and photo galleries needed to be much easier to use than the ones offered by Joomla! The built-in category systems WordPress uses allowed me to design an intuitive back-end experience for the group without sacrificing front-end design aesthetics.
A fresh login
Instead of having the login form appear on every page, which is kind of amateurish, I took the opportunity to utilize one of my favorite WordPress plugins; BM Custom Login. This allowed a reinforcement of the new branding, which I will get to in a moment.
Simplified logo, reinforcing the brand.
New branding
It’s a bit misleading to say “new” branding, which implies that the group had a solid logo in the first place. Since I wasn’t able to devote any time to creating a logo, I went with the most direct option available to me; the letters “SK.” I know that the group refers to themselves as SK in conversation, so I figured I may as well go with what the people know.
To match the overall classic feel of the new design, I included the EST date of the group to lend it an air of authenticity, as if this is what the logo had always been.
Member features
The group wanted a more robust section for the Shere Khan alumni. With a few simple plugins, such as Page Restriction and SimpleForum, it was easy to implement. I’m interested to see what problems arise with these systems, since I know that not everyone in the group is as tech-savvy as the others.
