Nick Finck

Notes about the redesign
Feb 22nd, 2009

As you may have noticed I had my personal website redesigned recently.  I though I would share with you some of the things that I learned along the way along with some of the things I did during the process to make sure that the end result was of high quality.  Lets dive in, shall we?

Design

The project, to me, started about 3 years ago.  I had my own personal website that I designed in 2001, but the design was getting old and stale.  It didn’t reflect me as a person very well and also didn’t do a great job at communicating who I am and what I do.  I knew it needed a redesign badly so over the past three years I tried to redesigning it about 20 times.  Each with a different look and feel and approach to organizing the content.  None of which I was really that happy about or cared for.  None of which ever saw the light of day.  Then it occurred to me that we are our own harshest critic.  Sometimes we find ourselves leading a project that we are simply too close to the material itself.  Sometimes it needs an outside perspective to get back on the right track.  I also realized that web design really wasn’t my specialty, I can do design for sure (anyone can right?) but I knew there were others out there who could do it far better than me.  I might be able to rearchitect the most impossible and complex websites but when it came to design I felt it was better left in the hands of others.  So with that I began to look for a web designer to help me out.

This path lead me to one individual in the Seattle, Washington area by the name of Matt Brown who has a small freelance web design company called thingsthatarebrown llc.  So why Matt? What was it about his work that I decided he was the web designer I should use?  Why him out of the hundreds of freelance web designers I know?  Why him when I, as a co-owner of a web design agency, have a few web designer resources that I could use?  Well, as you know it would be naive to assume that based on a designer’s portfolio that is the _only_ style of design they can produce.  It’s true that any skilled web designer will be able to produce just about any given style needed given the proper direction.  With Matt, however, his natural style was the style I liked the most.  What I mean by this is that the style he tends to produce when he has little to no direction tended to be the style I was aiming for.  So while it’s true that any designer can produce any style possible, there are some styles specific designers just seem to naturally excel at.  You may disagree with me here, and that’s fine and understandable, but in my mind this is what I firmly believe.

Matt’s specific approach to the use of white space and simplicity in his design is what appealed to me the most.  The mostly strict adherence to a solid grid structure yet allowing elements in his design to breath and not feel cluttered by other elements on the page were aspects that appealed to me the most.  I also admired his focus on typography more so than others, he didn’t over do it but it was clear that he really put though into his typographic selection in his designs.  My vision for my new site’s design was to have it focused on the content but not be overwhelming, to have a simplistic layout and structure.  I didn’t want to have too much information on the page where elements would compete against each other.  It was clear I would have to do a lot of work on the content to achieve this effect regardless of the design itself.

Content

Knowing that I am a pretty shitty writer I knew I needed a good editor.  Don’t laugh, you all know this is true… you have all seen my grammatical errors and typos by now.  No only did I need a good editor, I also needed someone who could do creative writing as I wanted the voice of my website to be somewhat relaxed and creative.  This would certainly be a challenge as I wanted to come off professional in tone yet not so uptight that I couldn’t freely blog whatever may be on my mind even if it’s a little tongue in cheek.  Naturally the content maven herself, Meryl K. Evans, came to mind.  I have known Meryl for quite some time now and she’s always been a good go to person when it comes to content.  In fact, she helped my company, Blue Flavor, put together the initial content when we first launched our website.

Among the content on the website was also my professional biography.  I noticed that this too was getting stale and needed a little bit of cleaning up to keep it both current and to also more clearly articulate what it is I do.  While I knew Meryl is pretty familiar with what I do as a web professional I wanted to get an outsider perspective of how others see me and describe what it is I do.  So with that I did a series of brief surveys asking friends, colleagues, family members, and acquaintances whom I briefly met about what it is I do and how they would describe that.  The results were used to help craft what I would describe as my mantra, if you will, it’s what you see in big bold letters on the home page.  Meryl and I went through series of changes on this as the designs were being worked on. 

Another important aspect of the redesign was to help promote my company’s services.  I didn’t want this to get in the way of the user experience on my site but actually add to it.  I didn’t want the tone to be too salesman-esk, I wanted to be welcoming and friendly.  I wanted to explain to reader why I was recommending Blue Flavor and establish that association with those who may not know I am a co-founding partner there.  Because I wanted to keep this content in line with the Blue Flavor brand and tone I asked for assistance from Tiffani Jones on crafting this part of the content.  Tiffani works for Blue Flavor and has worked hand in hand with Keith Robinson on our brand and tone.  From there I worked with Meryl to refine it and clean it up while adding a little bit of my personal site’s tone to the mix.

In addition to this content one of the other things I wanted to make sure the new site did was integrate the other content out there that I was producing.  This included the photos I was uploading to Flickr, the links I was adding to Delicious and my postings to Twitter.  In addition I wanted to make sure things like my Facebook and LinkedIn profiles were mentioned and my presentation slides on SlideShare were linked in for all of the past presentations I had done.  This meant not only did I need to make sure all the content was properly prepared but there would be several technical integration concerns that needed to be addressed within the CMS.

CMS Integration

For the CMS I decided to go with ExpressionEngine a year go and had already switched my existing site design over to running off EE.  I did this mostly because the ease of use and short learning curve I discovered when setting up up the CMS.  I had tried a series of other CMSs to a great extent and felt most comfortable updating content and templates in ExpressionEngine than any other CMS I had used.  In addition I felt it was really easy for me to download, install and configure various modules, plug-ins and extensions for ExpressionEngine.  While I could have gone with something else I decided to go with one I was familiar with and had the least difficulties using and updating.

Now, while I could have build the site in EE on my on from scratch using various plug-ins out there that would pull in the various content from other sites that I was creating I realized there would be some challenges and it may involve more of time commitment on my part than I was willing to dedicate to it.  Since I was aiming to have the site up and live by March for both my birthday and SXSW Interactive I decided to bring in some help for setting up ExpressionEngine and integrating with all the various APIs.  I chose to have Kenny Meyers, who is our Web Developer at Blue Flavor, do all the technical integration and CMS setup.  Kenny knows ExpressionEngine really well and I was confident he would be able to integrate the functionality needed without compromising the design.  Kenny would be responsible for pulling in all of the static templates that Matt Brown created and integrating them using the ExpressionEngine templating language.  Kenny was able to complete the integration and setup of the site within a record breaking 24 hours or so which allowed me to polish the site.

Testing

If there is one of the things that I always encourage people to spend more time on it is testing. I wanted to ensure that when this site launched that it was well-tested and polished as much as it could be.  What we did to ensure this would happen is we setup a special sandbox space for the new site that we would build the entire site from the ground up and test every aspect of it that we reasonably could.  This meant testing in the most common and modern browsers, checking for typos or missing content, even fixing little details like making sure all links to more detailed information were in initial caps.  Naturally there were a few things that we couldn’t test for in this environment and some stuff we could only test after we had hundreds of people visiting the site in a small window of time, but for the most part we were able to fix any initial issues with the code, design, and content prior to launch.

Technical Background

For those who want to know some of the technical details about the redesign here are some of the basics.  The site itself lives on a MediaTemple sever. I chose MediaTemple because Jason McVearry and his team have always been very supportive of my projects and available should I have any questions.  I still highly recommend MediaTemple to anyone who is looking for a dedicated and reliable hosting service.  As I mentioned, the site runs off of ExpressionEngine which is PHP and MySQL based.  Plugins used include eeFlickr, Twit-ee and Magpie.  The interactions were built in jQuery with plugins like Tooltip and Cycle.  Matt used the 960 Grid System framework for the layout.  The markup is XHTML 1.0 Strict with CSS 2.1.  For tracking usage of the feed we are using Feedburner and for website usage we are using Google Analytics.  We used two different Basecamp accounts to manage the entire project, edit the content, and exchange files.  Jason Fried and everyone at 37Signals has been very supportive of my projects and good listeners to their customer’s needs.

Conclusion

I hope you like the new site and I hope you come back and read the blog on a regular basis.  If you see any technical issues, typos, or something that needs to be fixed please let me know.  Also, if you have any questions that were not answered in this post please let me know, I’d be more than happy to answer them for you in a follow up post.  I am thinking I may do an additional post to cover some of the process itself but it all depends on how much time I have to do so prior to SXSW Interactive.  If you are going to be in Austin for SXSW Interactive please check out my session on Wireframes for the Wicked and as always, come to our party, we’ll get you drunk!  After SXSW I will be at the IA Summit in Memphis.  Be sure to say hello!