As of 2008, I’d owned my own company, Lealea Design, for three years. I was aware of the need to show peers (often a source of referrals and speaking invitations) and potential clients that I was proficient in the very latest developments and trends in the industry. I had also realized that my site, at three years old, no longer reflected my personal brand or showcased my design services, my capabilities, or myself. Since self-branding is one of my specialties, this was inexcusable.
Still, a redesign felt like a Sisyphean undertaking, and since my original design had received acclaim and garnered business I thought, “If it ain’t broke, don’t fix it.” Denial was a comfortable out.
The epiphany arrived a year ago. Business was great, but the slowing economy brought home the fact that, fond as I was of my site’s current incarnation, I’m a one-person show and my website is my main act. I couldn’t risk letting it stagnate.
Designing for your worst client: yourself#section2
Redesigning a freelance website is an exercise in masochism. There are no colleagues or an umbrella corporation to share the pain: It’s just you. As the designer who wrote (and still speaks on) The Art of Self-Branding, I knew my site had to be just right. People were bound to scrutinize any update to the site, and I didn’t want to damage my credibility.
When I design for a client, we discuss scope and timeline, a design brief, budget, and certain constraints. Brand, content, IA, and user experience get attention from the start. When I redesigned for myself, the only thing I really considered was timeline: “I want this launched by this-and-this date.” I thought I could just jump right in, open up Photoshop, and play.
I was wrong.
Starting the redesign#section3
I opened up Photoshop and promptly froze. It wasn’t the computer or the software stalling, it was me, fingers clutching the mouse and eyes staring blankly at a 1024 x 768 canvas.
I filled the screen with color. I wiggled the mouse around. Nothing happened.
No, it still wasn’t the computer or the software stalling.
It was me.
I had to rethink my approach.
Restarting the redesign#section4
To get my redesign on track, I returned to the starting place I use with clients, to the tie that binds every element of a business and a website: the brand.
Cameron Moll’s Great Designers Realign burned the importance of design with purpose into the industry’s psyche. It’s tricky to keep your site design fresh and remain true to the brand you’ve taken years to establish. Rather than start from scratch, I needed to build on what I already had and refine, strengthen, and refresh rather than create something unrecognizable to clients and visitors. I had to realign.
Fig.1. Lealea.net before the redesign.
Start with the brand#section5
For a year, I grappled with design and content for Lealea.net during scraps of free time. At each point of the process, I always paused to ask: Does this reflect who I am and the experience I want people to have when they interact with me? How does this affect and reflect my brand?
My original design rested on the brand discovery process I outline in The Art of Self-Branding. That process clarified how I wanted to be portrayed—sassy, smart, and passionate—and compared it to how people perceived me. My new site needed to reflect those original, still-relevant choices. Immediately, I knew that my logo, headline typeface, and signature rouge color—some of my original design choices—needed to anchor the new site.
Fig.2. Target Book “whimsical G” in header.
I chose the typeface Target Book because of its dual nature. Initially, it seems like any other round sans-serif, but then BAM—that whimsical “g” hits you. It sits firmly on the edge between professional and quirky, exactly what my brand portrays and what clients and peers expect of me. The same factors played into my choice of pink—a decision I discuss in detail in Why Pink? These choices are meant to evoke an emotional response; when people see my site and then view something similar in the future, I want them to recognize it as “Lea.”
Fig.3. Rouge colors.
Consistency is the most important aspect of brand expression, so this perception needed to be reinforced throughout the site. I made sure that the content’s voice (warm, fun) matched the design, and that the text focused more on helping my clients be successful than on what was “great” about me, while still emphasizing my passion for design.
Fig.4. Header on homepage.
Along the way, I got valuable feedback from trusted design friends. To streamline the process, I spoke primarily to only two, and I urged them to put personal taste aside in favor of objective design analysis. Most importantly, I didn’t want to design in a vacuum. As I experimented with some dark images, one friend said, “Too dark, not you.” When I chose flowers, they said, “Yes, that’s you.” Trusted colleagues can remind you of the outside perspective of your brand: how you view yourself is not necessarily how others view you.
Fig.5. “Too dark” version.
Update how you represent your professional skills#section6
Branding yourself is also about aligning with other powerful brands and reputations. Sometimes, the technologies and techniques used to present your design are equally as important as the visual itself. This was why I kept (but upgraded) my use of sIFR, SlideShowPro, and ExpressionEngine. I also updated some JavaScript animations and effects, such as keeping items fixed when scrolling, and smooth scrolling during article navigation. This informs peers and clients that I’m up to date with industry standards. (Using web standards was a given.) New clients often point to a specific feature on my site and request it for theirs. Peers, too, often go out of their way to ask how and why I chose a certain technique. By aligning myself with certain technologies, I become known as an expert in those technologies, which is a selling point for potential clients.
Fig.6. Portfolio with sIFR, SSP.
Refine details and fix design foibles#section7
While the original Lealea.net incarnation worked very well for years, I was well aware of its faults. Information architecture and flow suffered in the constrictive, 800×600-optimized design. I needed to address readability problems. I also wanted to add stylish design details that weren’t in my previous, almost purely typographical design—details that would better reflect who I am and what I pay attention to when designing for clients. I needed my portfolio to be easy to view and to update. Finally, the old design looked too much like a stereototypical Web 2.0 site.
Fig.7. Old design with grid lines.
Fig.8. New design with grid lines.
To tackle the layout issues, I worked with a 960 grid. I used Cameron Moll’s 960 grid PNG to help me get started, but it actually felt _too_ wide, especially since I had decided to keep a two-column layout. My “Aha!” moment occurred when I realized I didn’t have to conform to his specific grid, despite all its advantages. I still had the perfect grid and proportions, but the more I narrowed the content width, the more intimate the design felt. This taught me that 960 grid guidelines were just that: guidelines. The questions, “Does this feel visually comfortable to me, as a designer, and does this align appropriately for this project?” were more important as I assessed the grid.
To tackle readability, I replaced Verdana with Trebuchet MS for my main body copy and increased overall type size. Trebuchet’s serifs are soft and mimick some of the headlines. It’s also attractive in larger sizes, something Verdana was not in this design. Additionally, it’s an uncommon typeface for body copy and another way to differentiate myself.
Fig.9. Different typefaces from version 1 and version 2.
Next, I deepened the pink to an almost-purple for better contrast with the text. I kept the general colour scheme I’d always had and deepened some of the choices to reflect a more mature quality.
Fig.10. Custom avatar adds personality.
Just like fashion, design also ages. I had to dump the gradient and replace it with something new. I kept the design’s clean look and made subtle changes to enhance the imagery, by adding more texture and a fixed flower background. I commissioned Anton Peck to create a caricature of me that adds personality, lends a casual, whimsical aesthetic, and most importantly, emphasizes who the site belongs to.
The finishing touches#section8
When I had finally finished all the major Photoshop comps, I still wasn’t completely happy with it, but I was eager to launch. To kick-start things, I hired Shaun Andrews to slice up a couple of the initial pages. I brought in outside help for two reasons:
- It forced me to invest money, motivating me to finish the site.
- It expedited the process: after Shaun completed the base, I only had to code the rest of the site in ExpressionEngine.
I launched Lealea Design v2 when it was about 90% complete, in January 2009—almost an entire year since my epiphany. It was time to get it out the door.
Fig.11. Final redesigned home page.
Was it successful?#section9
Feedback from peers through social media, a design podcast, and CSS galleries was very positive. I received a slew of new Twitter followers, blog subscribers, favorable comments from clients, and many more site visitors. My project inquiries increased by 150%, confirming that the redesign paid off.
Client sites are children you give to adoptive parents to raise. When it’s your own site, you have only yourself to take the credit or the blame for how things work out. You have the luxury to find and fix and agonize and obsess, but it’s also hard to know when to stop. I knew I’d achieved my personal goal for the redesign when another designer said that it didn’t feel like a complete departure from my old design, but a natural maturation and evolution.
First of all, I have to say I love the illustration for this one. I’ve been saving costs on haircuts lately by cutting my own hair and that guy really looks like me. I think it’s a brilliant analogy.
I recently redesigned my personal site as well. I freelance, but I have a bit of a strange structure to my company/business operations. I tend to move by word of mouth, but I built my website to look for full-time jobs specifically.
What I like about this article is that you basically described the design process that most smaller companies will use to design for _established_ clients. That is, you took and existing brand and made it stronger and more complete.
The Art of Self Branding, or the “_Introspection Phase_” as I like to call it, that I think most people go through during their personal redesign, this time around seemed to be more seamless and integrated into the process for you, since you’d already done that field work. But I know for me, I had to really think long and hard about who I was, and where I wanted to go. Maybe because it was the first time I’ve “redesigned” in over 5 years.
Thanks!
I’ve been thinking about redesigning my personal freelance site recently too and you’ve provided some angles to consider that I hadn’t really thought of up until now.
Like the new look too btw. 🙂
I love this article. I am in the process of getting ready to launch my own website redesign and after reading this it has made me good back and look at the design and think about whether its just me that will like it or whether others will. I always struggle with my own designs forgetting that its not just me that has to like it. I could design a site and love it but if nobody visiting the site loves it then what’s the point?
I have asked other designers for feedback on my own work, but I think after reading this that I will start asking people that are not designers their opinions.
Having never worked with the grid system, and reading your comments about it being a guideline is a good point and one that I will keep in mind on my next project.
Also I love Trebuchet MS for the body font. I use that font myself when appropriate and love it!
Great job on the new design as well.
T
It’s about the time my own site design is getting stale, so this reminder couldn’t be more timely. Thank you for documenting your redesign journey, Lea, and for giving me the impetus to begin my own.
One thing I would recommend as well is forming a “board of directors” for your redesign. Most companies do this to define the strategy and make good decisions with the steps their business is taking. Even something as simple as forming a Google Group of close friends and colleagues to review your ideas and concepts and offer opinions, it’s best to get feedback early and often from people you respect that understand your strengths, weaknesses, opportunities, and threats.
Thanks for your comments everyone. 🙂 Glad it resonated.
I just wanted to add to Chris’s statement about a “board of directors.” I think this is absolutely important though I would also be careful about who you let in this “trusted circle.” I personally limited my circle to only 2 designers that are not only good friends, and thus know me personally, but are also unafraid to be blunt and honest about design choices.
I also would limit the number of items you show. Just like with clients, you don’t show every iteration to them. Only the ones you think are ready for prime time. It’s great to get feedback early and often, but you don’t want to get bogged down in a cycle of endless revisions or nitpicking — often a stalling tactic at the heart of it.
_@Samantha_ Great questions! While I also despair when some awesome fellow designers don’t nurture their own sites, I can also relate. I think the answer is two-fold: one, a lot of designers don’t think in business-terms, and try to think that their work “speaks for themselves” or that “marketing is evil.” Therefore, it’s easy to dismiss the importance of branding. Next, it’s incredibly intimidating because designers are an extremely self-critical, perfectionist bunch. So, we decide to do nothing because doing nothing means you don’t fail and you’re not open to criticism.
In short, to get over the hurdle is to have a shift in perspectives. First, to realize that their number one client is themselves. For example, would you hire a personal trainer who was overweight? No. Neither would a client or peer appreciate a designer who didn’t keep their site “fit.” Design is visual and if there’s nothing to see, there’s… nothing to see. 🙂
As for perfectionism, this is still an uphill battle. I purposely mentioned in the article that I launched the site 90% complete. I think setting real deadlines for yourself helps get over this. Sometimes a do or die approach works. And like I mention in my article, I invested some of my own money so it became more of an urgent priority.
Regarding the pink choice: yes, absolutely, especially since it’s an overwhelming part of my design. However, branding is not just about attracting the right people, it’s also filtering who you work with. There are definitely pre-conceived notions about pink, but those who fixate on that aren’t clients I want to work with. To me, it means they aren’t seeing the big picture nor are they open minded. It hasn’t harmed my business one bit. The majority of my clients are _men_, in the 40-50 range. 🙂 They work with me because they receive quality work and _like_ me, pink site and all.
This post couldn’t have come at a better time. While designing and writing for my personal Blog site http://ruthlessmind.com I’ve found that deviating from who really are is always a mistake. Successfully creating a brand/look/message that fits who we are is so difficult precisely because it takes time to understand one’s self.
For example, what are the characteristics that draw people to you? We can always aspire to be something more (or different), but if we lead with our values—as an individual—then at least we start in the right place. It’s all to easy to loose yourself in the image you’re trying to project. But everything we do in life still comes down to relationships. We’re loyal to the brands and personalities that align with ours. And if some don’t align, that’s okay too. There’s room for everyone.
And that’s the point. If “you” were easy to summarize on a Web site, then you wouldn’t be a very interesting person. So enjoy the struggle! It means you have something different worth sharing.
Boy, I couldn’t agree more with your article.
I think the first design, when you’re at the beginning, is the easiest. It gets harder with each redesign, as you evolve in your design skills and you always want something new and different. And of course, better then before. 🙂
This article has really given me perspective on the idea of making a user experience, from the designer’s perspective, more personal. I am currently trying to redesign, and have been for a few weeks. Thank you for the inspiration.
In my eyes this article points out very well the most important aspect of redesigning: maintaining some characteristics of the old website that identify the brand. You cannot simply restart from the beginning, but you have to make the redesign the obvious continuation of what existed before. I think this is an issue that many designers ignore. For instance, the SourceForge.net site undergoes many complete redesigns and every time it causes me to feel uncomfortable for a while.
This is how redesign addiction begins.
I find it hard to be able to stick with any particular design on one of my own sites for the same reasons as above. You become your own worst critic and every time you perfect a new technique on a client’s web site you start to wonder if you should incorporate it into your own.
I’m surprised nobody comments about strategy/concept/guidelines/testing.
I feel the main issue on redesigning your own web site as a designer (as I am) is to focus which informations are important/strategic for THE CLIENT and not for yourself. As you know your own business very well, you’re not objective about it, so you should have a panel of testers.
I am currently redesigning my own site and I’m following an approach I feel being very effective.
1. First of all I’ve set up my communication goals (they’ve changed since my actual site design).
2. I’ve challenged them with some people that work in close-to-design-fields.
3. I’ve decided (but not designed) the overall look&feel;/concept of the new graphic design.
4. Than I roughly sketched the main pages prototypes on paper to define the elements density and the main grid.
5. I’ve asked for a feedback to people on stage 2.
6. I’ve designed in Photoshop all the website pages as high-definition wireframes including real labels, texts, and icons.
7. I’ve put online a quick&dirty; html prototype of the wireframed site and tested it with a panel of about 20 persons of different ages and profiles. I’ve received many feedbacks about labelling, message clarity etc. I’ve made modifications and resent for new feedbaks 1/2 more times. It was great and surprising! At this step your communication quality raises up dramatically.
8. Finally I’ve started graphic design. Following the main idea I’ve decided at the beginning, I’ve tested different design versions, always testing them on several people, decreasing in number .
That means I’ve answered to people having some negative feedbacks and proposing them new solutions (1 issue for 1 tester) but integrating all the feedbacks at the same time.
‘Layout Changes each Tester sees’ = N*(issue*Tester)
Surprisingly, once an issue is fixed with one Tester, it is (almost always) OK for all the others.
By the way during the graphic design phase I’ve reduced the columns from 9 (in the wireframe) to 8 and changed the Navigation Menu position, but it annoyed nobody as the concept and structure were coherent.
9. now I’m designing in Photoshop all the pages to create then pixel perfect html+Jquery templates to be transformed in php (not by me).
AND SO WHAT? aka THE SUMMARY
1. A designer can’t be objective about her/himself and her/his work.
2. She/he needs a panel of testers (they can be friends, friend’s parents, colleagues etc.). The statistical error decreases quickly with number (N) of testers. 6 is an acceptable number; 9 is a good number; 20 is an excellent number!
3. As a Freelance portfolio is a commercial/marketing tool, the contents must be defined and tested Before the graphic design.
4.Of course the risk is to follow into a conforming consensus.
5.Beware of feedback afterwords (“People on twitter say they like my new website”). People avoid negative comments if they feel isn’t useful. And on an already finished site is USELESS.
The inquiries can grow because we have a simple “activation effect” caused by the change itself. Human neuronal system activates on state-change detection. The famous “Buzz effect” activates the neuronal system too. Both combined can drive to curiosity (approaching) or repulsion (escaping). It is the base of advertising.
I do not judge Lea’s graphic design. I do not really mind about that.
Only one remark : she says “the old design looked too much like a stereotypical Web 2.0 site.”; I feel her new web site to be better than the older one, but stereotypical as well ( I should say Worpress!)
I love #13’s point about redesign addiction. It is a serious problem for designers. As new uses of CSS and JQuery are showing up all over the place, it is tempting to implement them as soon as you can.
How do you know that you REALLY need to redesign your site? Who knows! I think one of the most important steps is to not be stubborn. If you have put a ton of work into a design and it isn’t working, you need to be honest with yourself and decide when you start over.
I wrote an “article”:http://christophermeeks.com/archives/391 about how to decide when to switch things up, it has gotten some pretty positive feedback as well.
This is like a déja-vu, i’m planning this myself for a few months and have drawn sketches but i have a really difficult client, me! I guess this situation will be familiar to every designer who redesigns his or her own site, pure horror sometimes.
Like your new design and thanks for the article, this is a great support !
Sometimes I feel like ALA practically reads my mind at times. After seeing this article pop up in my RSS feed, I am more than convinced.
After the small design firm I worked for closed in April due to the owner’s illness, I found myself looking for work again, yet making sure I keep my design skills sharp. I started taking on more freelance work, when one of my friends asked me why I hadn’t considered working towards getting my own site back up and running again.
After half a notebook worth of notes and many cups of coffee later, I too realized that I am my worst client. After reading this article, I actually think I can now get a better handle of getting the proverbial ball rolling. I should have thought about going to some of my peers before now, but I just sent out a few feelers to see if I can get some insight from those who know me best.
Great job on reading my mind. And your redesign is outstanding!
Thanks for a great article. It’s funny how common it is that freelancers and even agencies neglect their own site. It’s easy to do since that particular client, yourself, doesn’t pay or the work. It’s a long term investment.
BTW: I love the artwork at the top of the article. Kudos to the illustrator!
Thanks for this article, very enjoyable, and an awful lot of it rang true.
It’s very tempting as a website builder to keep fiddling with your own personal site, but to some extent you must trust yourself to leave alone for a while and let it bed down properly.
Also, before a redesign, have a look at your analytics data over a period of time to see which pages are working and which are not.
I agree wholeheartedly with your article, so true. I will say that I’ve never been happy with any design I made for my own sites, it just never seems to be enough – even if I get a bunch of compliments on it. Anyway, thanks for sharing that sentiment – I’m glad I’m not alone 🙂
I’ve been agonizing over my own re-design for three months. I have a killer design but I get so sick of looking at it and now I want something different – before I’ve even launched it! – Tim Piele
Just joined ALA and browsing through Articles. It caught my attention which means its time for me to go back and re-visualize what I really wanted to show. Having a template based portfolio is not that bad when you are starting out. But when you start growing – you’re right!, it is better to showcase what you have learned and show that you are on top of things. Great Post and glad to be here.
I too found this timely (even though I just got around to reading it!) I have been struggling with a redesign of my own website for a couple of months. The article made me wonder why I do not follow the process that I give to my clients when undertaking a redesign project. Thanks for the eye-opener.
I am currently trying to redesign my own site and this article has really given me perspective on the idea of making a more user friendly site.
Thanks the inspiration.
I recently re-designed my portfolio website, and I must say I carried out of the project with the intention of keeping it simple with a white background etc. As I developed the site I found it easier to implement new design ideas into the layouts without getting too hung up on the overall look and feel of the site. Sometimes I think you can try too hard! Keep it simple!
I was giggling all the time reading through your article, to my mind it’s written rather good…and funny-))
I’d like to say that we (designers) should always live in “NOW” which means we should provide to our clients up-to-date techniques/design and…DO NOT FORGET ABOUT OURSELVES! For ex. – do little changes every month. Edit your logo – make it animated or smting like that-)
I’m also a freelance web designer up in New York and I agree that redesigning a website for yourself can be the most challenging thing you can ever do.Many times we take tons of time learning what our customers businesses are about and what their target market is. They tell us what type of design they prefer and how much time and money they want to spend. Ourselves on the other hand; we are many times perfectionist who won’t launch until we have a perfect design and marketing strategy. And seeing that we’re doing the work ourselves we don’t need to worry about budget. We can take as long as we want and build our site as fancy as we want.
But like mentioned. Our site might be stellar and impressive but if our target audience doesn’t think so or plain hates it, the site is a failure. My site is outdated also and lately I’ve been too much of a perfectionist. I guess it’s time to just redesign and take it from there.
Designing your own site with the user in mind has always worked for me. We designed our page thinking about the user experience… now it’s not perfect by any means but we’ve kept it simple and clean… we have some content issues at the moment but are working through this.
Well, I can say is that your article is very good and reminds a lot about me and how I feel sometimes when I need to redesign my website…
It was fun reading it 🙂
Amazing article ! It gives a lot of ideas about how can change your website layout in a simple and intelligible way. Normally I’ve use themes created by other designers but I think I must change this type of vision.
I will try to make my own website look with this inspirational article in mind.
Really good article and couldn’t agree more!
So hard to stick to a design when every few days you come across an incredible new site that just does things a little differently
For me, redesigning a website is all about planning. I need to lay everything out, put it all in steps and then execute. If there’s something that doesn’t fit, back to the drawing board.
redesigning you website is sometimes needed, but don’t forget to catch the old web url’s with a 301 redirect! And get a custom 404 error page with webanalytics installed on it… you’ll learn alot when checking your webstatistics of that errorpage …
Very interesting and helpful article on the process of redesigning. We find it the hardest thing to redesign our own website. The design is never good enough and we have the highest expectations from ourselves. We did around four-five designs in order to decide on the best take.
Loved this article, and you have some great suggestions that I will be following. I am just about to start our sites re-design so yeah, thanks! very useful article.