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.
Article Continues Below
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.
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.
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.
