NelaDunato.com website rebrand case study

Published by Nela Dunato on at 07:26 in Branding, Graphic design

There is a term in the online business worlds called “website shame”. Many of us are very familiar with it.

Perhaps you too have felt ashamed over how woefully inadequate your website was. Perhaps you cringed every time you gave the link to a potential client, because you were afraid it will ruin the great first impression they just had with you.

You wouldn’t believe it, but designers can feel the same way. I certainly felt like my website was not doing a good enough job of presenting my work for a loooong time.

It wasn’t just that I was bored with my design (although having a fresh, new look sure boosts my enthusiasm for blogging).

I found new faults in it every day, and I knew if I wanted to feel fully confident in front of my growing audience and expand my reach, this was the first stumbling block I needed to get out of the way.

NelaDunato.com website rebrand case study

The old design

I’d like to take a minute to celebrate the old design that went into the archives, since I did a lot of things well. Even though it was a bit outdated, it was coherent, because I was consistent with applying the same branding to every medium.

My old business cards, newsletter template and social media graphics were all a part of the same brand story. Not only were the people delighted with the look of those graphics, they were also primed to feel familiarity when they came to my website that shared the same color scheme, fonts and patterns.

In case you haven't been around before, or need a little reminder, here's a screenshot of my homepage before the redesign:

NelaDunato.com website old homepage
Click to open larger image

This has been the third variation of the homepage since the original design, and you can see the first two here.

Plenty of things worked, but some didn’t, and here’s a brief overview of my redesign process and the reasoning behind it.

Why I decided to redesign NelaDunato.com

As I published my website in November 2012, the "flat design" trend was already getting big, but I was always the one to rebel against trends, so my design was very "old school".

As the time went by and screen-wide graphics on the web became the norm, my website with modest sized photos looked a bit underwhelming in comparison.

I finally had a bigger canvas to play with – the one I’ve been waiting for for over 15 years! – but I wasn't using it.

There are a number of problems I wanted to solve at the moment when I finally realized I needed a redesign:

  • The entire design was a bit stuffy and constricting, and I felt my brand needed to be more expansive and lighter, to align with the changes I was going through (personally and in my business).
  • The burgundy background was interfering with my art and designs
  • The red buttons weren’t standing out on the burgundy background, which is a conversion nightmare.
  • Too much space was wasted on things that didn't matter (like category links in portfolio), and I wanted to use this space for bigger thumbnails instead.
  • I was getting increasingly annoyed with the beige blog background, and having to match my blog graphic colors to it.
  • Last but not least, I felt ready to raise my prices, and I wanted a brand that communicates the value I provide that’s more aligned with these prices.

After I realized all the things that were bugging me, I got to imagining my new design.

The story behind the new design

What I see as my "special sauce" as a design professional is that I'm also an artist that can actually draw. Many designers can't draw, so they rely on stock graphics to give more appeal to their work, and I'm all for custom and unique.

(This used to drive my ex boss mad, because I'd spend the entire day drawing original icons for a project, when we could have saved time and money if we just bought them.)

What was once perceived by my employers as a weakness, I wanted to highlight as my strength.

Yes, I draw things by hand. Yes, it takes more time and costs more, but the results are beyond the ready-made generic stuff – completely unique designs.

That's how I roll.

The only logical thing was to highlight this artistic and hand-crafted approach in my own website design and make it feel more organic. The previous version felt “too digital”, even though there were icons and details I drew by hand.

I was a bit reluctant to use watercolor textures, since that also seems to be the trend now... But I can't help it – I always had a thing for organic textures (even in my very early inObscuro days), and in the recent years my art has evolved to include more and more of it.

Watercolor washes and ink strokes are what I live and breathe.

If that's what a lot of people use (and some of them way more famous than me), so be it. I knew I could pull it off in my unique style.

Starting the design on paper

I already wrote why I start all my designs on paper, and it’s especially important if I’m going for a traditional, organic look. So I took out my sketchbook, watercolor palette and pens, and got to sketching some ideas and graphics that I would later use in my design.

NelaDunato.com website redesign ink sketches

I used my favorite drawing tools, the Pentel Kanji Fude brush pen and Sakura watercolor field sketch set (refferal links) to paint the textures, icons and other elements. (You can read more details about my sketching kit in this post.)

NelaDunato.com website redesign watercolor sketches

I then combined these elements in Photoshop to create the graphics you can now see on this website.

Before and after

In general, I added more light surfaces to the design, and used black and burgundy to make certain areas pop out.

I kept some of the burgundy and beige colors from the previous design, ditched others, and expanded the palette with a range of violets.

NelaDunato.com website redesign color palette

In addition to the serif Alegreya font which I’ve been using since the beginning, I introduced the sans-serif Lato as a secondary font. I’m more pleased with the typography now, as it adds more contrast between paragraphs and headings.

I allowed the layout to widen for up to 1200px for higher resolutions, so this gave me the chance the space the elements wider (that’s something I’ve been meaning to on the old design too, I just never made the time to do it).

Logo design

I realized halfway through my website design process that something is off, but it was hard for me to say what it was. I had so much resistance about changing my logo, that I didn't want to see all the signs that kept pointing at it.

Redesigning the logo meant I had to put my website redesign on hold, and as difficult as that was, I knew it was the right decision. Following through with the website design just to have to change the logo later wouldn’t be as good.

In the end, I came up with a logo that I’m so pleased with, I can’t imagine I ever wanted to stick with the old one.

Here are the old and new logo next to each other:

Nela Dunato Art & Design logo - before and after

If you want to read about my logo design process in more detail, I wrote about the whole logo redesign journey in a separate post.

Home page

The home page endured the most layout changes in this entire process, and it was what was driving my design decisions.

Here are side-by-side before and after screenshots (click to open a larger image in a new window).

NelaDunato.com website redesign before and after - home page

The biggest difference is that the old homepage had no mention of my services. Don’t ask me why I ever thought it would be a good idea to remove them completely (I had them at the very beginning, and then they got lost in the shuffle).

So I added a big, prominent services section right under the header.

The old homepage didn’t have a proper header image for the last year, because I replaced it with portfolio thumbnails. In the new design, portfolio samples are toward the bottom.

I was agonizing the most about the header photo.

Should I paint something specific for this page? Should I use a slider of my projects? One featured project? There were so many different options.

In the end I settled for a photo of my sketchbook spread, and I’m open to switching this image in the future if I create something I like even better.

The old website has a prominent opt-in box and it was doing just fine, but since I wanted the services to be front and center, I didn’t want to do the same thing here and push services below.

As I was pretty happy with my Authentic Promotion Guidebook landing page and how it was converting, I decided to drive more people to it through the smaller call to action element. We’ll see how this goes and if it turns out it’s not working as well as I hoped, I’ll try out something different.

I wanted to break apart the services and blog entries with something decorative, and it occurred to me this would be a good place for a featured testimonial. (I also had testimonials removed from the homepage right when I removed the services too).

With all these priorities, the blog entries ended up just above the footer. We’ll see if this was a brilliant or a terrible decision.

And then, the footer.

This mammoth is over 750 pixels high. I went all in with the opt-in box since, surprisingly, even the old small footer opt-in box performed decently. People were signing up through it on the pages that didn’t have a box toward the top (gallery pages, for example) so I wanted to make it extra compelling.

I brought back the social media buttons now that I had enough space to put them, and I just made the bottom strip a bit fancier with a proper footer menu.

Services pages

The main services page didn’t change a lot, except that I used new graphics (from the homepage).

I made several main changes to each of the individual services pages, and I’ll show them on the example of the Branding & Logo Design page, because the others are very similar.

NelaDunato.com website redesign before and after - services page

One thing I did on all the landing pages was narrowing the layout for more comfortable reading. If I happen to add more graphics to them later, I might bring back the wide layout, but right now this is what it is.

I already had two service packages on the old page, but I made them more prominent by adding graphics.

I replaced the portfolio thumbnails that take the visitor away from this page with an image slider so that people can check out examples without leaving the page.

I rewrote and redesigned the boring, uninspiring process explanation into an illustrated process.

Even though this part of page is now several times longer than before, I expect more people to actually go through it because it’s easier to scan, and you can get the gist of it just by looking at the pictures.

Blog post and blog archive pages

The biggest difference about the blog posts and archive is that as I allowed the layout to widen for up to 1200px for higher resolutions, the columns became wider.

Now the blog content area is up to 750px wide, the sidebar widens up to 263px, and I also get a nice 97px gap between the columns so your eyes don’t slide off left to right uncontrollably.

NelaDunato.com website redesign before and after - blog post page

I made the opt-in box at the bottom of the post blend in with the background, because I’ve heard from another blog that they saw an increase in conversions when they made their opt-ins look like a part of the post. It was a counter-intuitive yet an interesting idea, so I’m trying it out.

I rearranged bits around the sidebar a bit more. I replaced the long list of featured posts with a huge banner that points you to my new “best of” page sorted by categories.

I also added the banner for my services page and a banner to my Interview me page (I introduced the latter a few months ago).

Gallery and artwork view pages

I wanted to remove the sidebar from the gallery page so I could expand the thumbnails and make them larger. I moved medium and category filters to the top. Here's the example of the illustration gallery.

NelaDunato.com website redesign before and after - portfolio page

The artwork page hasn’t changed that much.

NelaDunato.com website redesign before and after - artwork page

Other pages remained more or less the same so I’m not featuring them here, but feel free to browse around!

The tech geeky bits

I decided to use Bootstrap for responsive layout, instead of my custom code that I had before.

While my former responsive design was fully functional, the code wasn’t very elegant, so my stylesheet was bloated. Now I rely on the default Bootstrap grid most of the time, and created only a few exceptions where I felt they weren’t precise enough.

I also used a mobile-first approach for more richly designed elements, so that people on data networks wouldn’t have to load heavy images.

(This had the unfortunate consequence of people on Internet Explorer 8 and lower seeing the mobile version, since they don’t support screen size @media queries – however, that’s less than 1% of my visitors and they get served a nice polite message to update their browser already.)

I’m still not happy with retina support, because I have a very large number of images on the website, and just didn’t want to bother creating the double-sized versions for all of them. I did address it where I was able to do it with minimal effort. Since I have nowhere to test retina screens at the moment, it’s probably going to remain buggy for a while.

(If you’re viewing this site on a retina screen and notice a very glaring error, and you know how to easily fix it, please write in the comments or drop me an email.)

Another difference between this design process and my former ones was that I went from designing the website style guide and the homepage directly to coding the HTML/CSS template, which saved a lot of development time. I’d love to use this approach with my clients as well.

The story continues...

I see websites as ever evolving, so I’ll be tweaking things along the way, just as I did with the old design. I already have a few ideas I’d like to implement, but I didn’t want to postpone the launch because of that.

I still expect that the overall design will serve me for a long time, because I made it so open and flexible.

Now my next step is to create a fully functional Croatian version of my website for local clients.

My client base is split roughly 50-50% for domestic and foreign clients, and I’d love to see this change in favor of foreign even more. However, I get a lot of inquiries through referrals, so I want to make a site that will help inform them and qualify them for working with me.

I hope you enjoyed this case study and that it helped spark some ideas on what you can improve on your own websites!

If you’d like me to evaluate your current website design and create a brand new solution that will attract more of your ideal clients to you, check out my freshly redesigned website design services and contact me for a quote!

Nela
Nela Dunato

About Nela Dunato

I run a boutique design consultancy that helps creative businesses evolve into premium brands and connect with their dream clients, by crafting extraordinary visual experiences.

On this blog I write about art, design, creativity, business, productivity and marketing, and share my creative process and tips. Read more about me...



Your comments

  • Jennifer Kennedy

    Jennifer Kennedy
    2015-08-13 at 17:37

    Wow!! Your new design is absolutely beautiful. I love the brightness and colors.

    I completely understand how you felt before the redesign -- I've been going back and forth about whether or not to redo my website too. I get a lot of compliments, so I'm sticking with it right now. But, it still doesn't grab my attention.

    I love your story about hand drawing your designs. I had a recent meeting with a graphic designer and she mentioned the same thing.

    Looking good, Nela!! Woohoo.

  • Tara

    Tara
    2015-08-13 at 18:55

    Nela it's fantastic! And so interesting to see behind the scenes of how you pulled it together and thinking behind the various aspects. Brilliant.

  • Alistair Gill

    Alistair Gill
    2015-08-13 at 19:34

    Nela, the new design looks awesome. I really like how you walked us through your process. I'm viewing this on a retina display and can't see any glaring issues either

  • Lindsay

    Lindsay
    2015-08-13 at 20:46

    Love this-- such a great, detailed case study (and your sketches, holy moly!)

  • Katie Allred

    Katie Allred
    2015-08-13 at 20:57

    Love the new design! Looks great!

  • Yari

    Yari
    2015-08-14 at 02:57

    The next look is great, lighter and more artistic. Love the thought process and before and after explanations. Great work

  • Carmia Cronjé

    Carmia Cronjé
    2015-08-14 at 10:12

    Beautiful! I love your attention to detail and the fact that your website looks so unique. I love watercolours and your social media icons are so cute. Great job, Nela!

  • Jamie

    Jamie
    2015-08-14 at 15:47

    I'm very impressed, Nela! Your logo refresh is just enough to look updated, but not so much to muddle your existing brand. I think the new color palette and site design are a beautifully logical step forward for your brand and I can't wait to see where your business goes from here. Big congrats to you!

  • Nela

    Nela
    2015-08-14 at 16:25

    Thank you so much, everyone! I'm positively overwhelmed with your kind words and praise. I haven't even dreamed of getting so much wonderful feedback all around!

    @Jennifer: Thank you, I'm so glad that you like it :)
    I think as we go through some business shifts and growth, we usually get the itch to change our websites because a site that was just fine for one stage of our business may not be the best for the next one... so it's not that the site itself is not good, it just feels like an old pair of pants we no longer fit in.
    Make note of all the positive things your visitors and clients say and write it down! So when you decide to make a change, you still keep all the good things in place :)
    Oh, I'd love to be able to meet this designer and geek out on this topic!
    Feel free to drop her link, so I can stalk her on Twitter haha :)

    @Tara: Thank you, glad you enjoyed the post!
    I was plotting and planning this redesign for half a year, and I will say that seeing your new gorgeous illustrated design gave me another kick in the pants to do mine already!

    @Alistair: Thank you! And I'm so thrilled to hear that it also looks good on a retina :) I was afraid some of the images will turn out blurry.

    @Lindsay: Thanks dear, it's a huge compliment coming from a great designer like you! :)

    @Katie: Thank youu, much appreciated!

    @Yari: Thanks a lot! I'm glad you get the vibe I was going for :)

    @Carmia: I'm flattered, thank you so much!

    @Jamie: Thank you for your kind comment and encouragement, I'm honored to hear that coming from you! :)

  • Madeleine

    Madeleine
    2015-08-20 at 17:59

    This is gorgeous, super comprehensive and very impressive. Well done!

  • Nela

    Nela
    2015-08-22 at 13:34

    Thank you so much, Madeleine! :)

  • Nat, Website Superhero

    Nat, Website Superhero
    2015-09-17 at 22:14

    Wow, girlfriend, that is DETAILED! Love the upgrade :D

  • Nela

    Nela
    2015-09-17 at 22:24

    Thank you, Nat! So glad you like it! :D
    I noticed we did some similar changes to the homepage, ie. more calls to action and highlighting the services :)

Leave a comment