On February 3, 2000 I had a cushy corporate IT job at a Fortune 500 company, a couple of toddlers at home, and the first dot-com bubble was just peaking. On a whim one day I checked for the availability of my last name - Boyink - as a domain and found it available. I bought it mainly because I thought it would be cool for my family to have personal email addresses of our first name at boyink dot com—especially my kids as they got older. What I did not know is that a couple years later the site would become the platform for a new business and a whole new way of life. Since becoming a business site Boyink.com has had at least 4 different visual designs, and I’m very proud to have launched the 5th yesterday.
Why Redesign?
While this may seem like an obvious question in the web design world where often sites get redone just because “it’s time” - there were some more significant issues at play for Boyink.com.
Yes - the previous design was showing its age. I don’t keep detailed records but near as I can tell using the WayBack Machine the previous design went live in early February, 2007. For some reason I was thinking it was older than that - but a 3 year old design as a web developer is a bit old. The photos of me, especially, were ones I had taken in 2002 when I first started the business so were quite out of date.
V4 was also a personal experiment with fluid-width designs. There was a time when I thought they were going to save the internet so I took it upon myself to do my own site with one. But while academically fluid-width designs make a lot of sense, I never felt at home in it and ultimately I think it started affecting my urge to want to post new content to the site.
More importantly, my business had shifted. When I launched V4 I was trying to be a one-man soup to nuts web shop, doing strategy & information architecture, design, coding, and implementation. Since then I’ve gotten more focused and smarter, I think, about the way I work and what I focus on with web development projects. I now engage with other freelancers for design and coding. Not only do I get better results this way (because these people are just more skilled in these areas than I ever was), doing so lets me focus on the parts of the project I enjoy more and feel I’m stronger at.
The other major shift that happened in that time was the conception and launch of Train-ee. Train-ee has been incredibly successful and has significantly changed what I spend time working on day to day, my plans for what to do next, as well as our income model as a business. As a brand - Train-ee had eclipsed Boyink in terms of traffic and visibility and I wanted to capitalize that success and draw a tighter connection to it from Boyink.com.
So - in February 2009, I began the efforts to redesign. But - where to start? Between finding the time and looking at yourself and your own business objectively, being your own client is tough to do.
Branding
I started where I would have recommended a client start in this situation - by doing some branding research to find out what the perceptions of the Boyink brand were currently vs. where I wanted them to be.
I used - and highly recommend - fellow ExpressionEngine ProNetworker Lea Alcantara’s Art of Self Branding work. I took the advice she gave in Part One and sent emails to past and current clients and peers asking them to describe Michael Boyink and Boyink Interactive in 3 adjectives.
The responses were quite humbling and inspirational. Now that I had a better idea of my perceived brand I could think about where I wanted the brand to be, and then know what role the updated design and brand needed to play to get me there. I used this research as the basis for a Redesign Brief - with the goal of being able to hand it off to a designer (even one that hadn’t known me before) and have it paint a clear picture of:
Branding
- What/Who is Boyink Interactive?
- How I see myself
- How others see me
Clients
- Type
- Role Performed
- How They Found Me
Redesign
- Goals
- Page Types
- Content Outline
You can download the Redesign Brief here: Boyink_Redesign_Brief_V2.pdf.
I’ll warn you that it gets a bit personal and it’s not highly formatted—but if you find yourself in the position of needing to rebrand yourself maybe you’ll find it helpful.
Design
The most significant design decision this time around was that I wasn’t going to do it. Since I’ve let go of design work for clients I felt free to outsource my own design. I had worked with Andy Van Solkema of Visual Hero on the AmercianSeating site and Andy had expressed interest in the Boyink.com project. Andy’s approach to design felt like a natural fit for the project at hand, so I sent him the Design Brief, and we chiseled out time from our busy schedules to meet at a whiteboard for a couple hours and see what my research and his thinking might translate into as a design direction. While often the output of this process might be more formalized wireframes, in this case we just took some photos of the whiteboard sketches as Andy felt they - along with the Redesign Brief - were enough to work with.
It was interesting to be on the client side of this process for a change. But Andy and his crew pretty much nailed it on the first try - the site you are seeing now is the first and only design they showed me. I think the only changes we made were the structure of the blog pages - due to constraints provided by existing content - and I removed an “About” section from the main nav because the home page pretty much tells the entire story.
From a structural view the Teach page is new - and designed to make the Boyink/Train-ee connection stronger.
The Work page is a redesigned and greatly simplified version of my past Portfolio. The past design was quite detailed around each project with a number of screencaptures/descriptions etc. It was tedious to update and looking at my web stats very few people ever looked at the detail anyway.
Write is just the previous weblog renamed.
The previous Hobbies became Fun - which some might feel is inappropriate for what is ultimately a business site but I can’t count the number of times a potential client has mentioned looking at content in this section of the site.
From there it’s the standard Contact page.
Illustrations
This design goes back to a simpler footer featuring the illustrations from Scott Thigpen - which were actually done before any web design work was done. Adding the rollover quotes was a nice design touch from Andy. The illustrations maintain the pogo stick design element (or “pogo schtick” as a friend dubbed it) and are also on my business cards. The hope for the illustrations was to add some whimsy to the site to reflect the playful nature of my last name.
Photos
The main photos used were done by local Holland photographer Rob Walcott, taken at the City Flats Hotel, our main venue for the Train-ee ExpressionEngine classes. Other photos on the site are from Andy Van Solkema and MsBoyink.
Coding
For coding I turned to the second Andy in my arsenal - Andy Ford of Aloe Studios. Andy has been my go-to guy for getting designs sliced for a couple years now and I’ve always enjoyed working with him. He’s detail oriented, responsive, and keeps up to date on current implementation approaches. Andy recommended a “progressive enrichment” approach wherein some design elements like rounded corners, box shadows, and text shadows would be applied using CSS3 rather than graphics - and older or more incapable browsers would just be a bit less finessed looking. Andy also worked out the @FontFace approach to some of the header fonts to replace the sIFR approach we had initially planned on.
Implementation
I knew I would do the site implementation myself, and it would be on ExpressionEngine. The big question was - would it be on EE 1.6.x or EE2? For a while it looked as if the timelines were going to match up such that Boyink.com would be my first EE2 site, but ultimately I decided to keep it on 1.6x for the time being. It’s just more important to me to have the site’s front end be consistent and reliable than it is to have the backend running on EE2. Since EE2 is still beta I prefer to be more experimental in my use of it.
The most significant implementation change is the URL structure. At some point it occurred to me that Boyink.com was a pretty short domain name - and seeming shorter all the time. I decided that this version of the site I’d take that short domain and use it as an anchor for a simplified URL structure - so took pains to code EE templates such that I didn’t have “comments” templates and did the necessary .htaccess work to get rid of EE’s index.php. Adding those efforts to a forced removal of “www” and the end result is quite nice.
Where I used to have a blog single entry url of:
http://www.boyink.com/splaat/weblog-comments/back-from-the-netherlands/
I now have:
http://boyink.com/write/back-from-the-netherlands/
I need to give a hat-tip to Ryan Masuga and his MD Detect Page Type plugin for easing the process of coding smarter index templates for nicer URLs.
During the implementation it also occurred to me that single blog post pages often end up looking odd because the sidebar content is longer than the post itself. This leads to a large area of whitespace under the main post. It seemed to me that a sidebar should be able to look at the length of the main article and adapt itself, but a quick search turned up no existing EE plugins to do the trick. A “gee I wish there was” type tweet led to a nice gift in my inbox from a certain former EE CTO. I’m still playing with the specifics but I’m now able to have shorter sidebars on shorter articles and longer ones on longer articles.
The only other interesting thing from an EE-implementation perspective is the use of Michael Bystrom’s Pagination Extension which allowed me to get EE to spit out the HTML for pagination that matched the code that Andy Ford wrote.
Other than that it’s a very straightforward implementation of EE. The process I took to build the new site in EE while the previous version also existed in EE was the one I detailed in this forum thread.
Thanks!
The response to the site launch on Twitter has been great - thanks so much for all the positive comments. I mainly wrote this (lengthy) post to document the process (as much for myself as anyone) and to make sure credit is applied to where it’s due. I feel like I played a pretty minor role overall - and if the site is successful it’s because I was fortunate to be able to partner with some people who are just danged good at what they do.
So again, to anyone that had a hand in birthing this baby - thank you.
18 people have started a comment party - join it!
Jon on December 05, 2009
Boyink (Author) on December 05, 2009
Michael Hessling on December 05, 2009
Steven Grant on December 05, 2009
Brian on December 05, 2009
Cliff on December 05, 2009
Erwin Heiser on December 05, 2009
Boyink (Author) on December 05, 2009
John Faulds on December 05, 2009
Boyink (Author) on December 06, 2009
Lea on December 06, 2009
Boyink (Author) on December 06, 2009
Larry on December 08, 2009
Boyink (Author) on December 08, 2009
Rob on December 08, 2009
Boyink (Author) on December 08, 2009
Ryan Battles on December 08, 2009
Boyink (Author) on December 09, 2009