Redesign your portfolio site in 10 easy steps

Our portfolio can break or break us, which is often why creating a unique, well crafted site that showcases our work is one of the toughest tasks we undertake as designers.

Before you even create that first pixel though, it's important to determine if a redesign is even needed. 'Incessant redesigning' has been the trend for some years; you get bored of your site, you redesign and three months later the process begins again. These redesigns are often only concerned with the superficial and do little to address the overall user experience and most importantly, how well your portfolio converts visitors to clients.

It's worth reading Cameron Moll's brilliant 'redesign versus realign' article on A List Apart if you're thinking of redesigning.

If however a major overhaul is essential, then it's imperative you plan thoroughly for each stage of the project, in order to make the process seamless.

Here are 10 vital steps you need to take to pave the way for a successful redesign.

1. Evaluate your current site

If you want your redesigned portfolio to be a success (both visually and financially), you first have to do your homework and find out as much as possible about the state of your current site.

Although you may have an idea of what is and isn't working, you need to drill down to specifics. One of the best ways to do this is to utilise Google Analytics, which will provide you with a wealth of information. You will have a clear indication of where your users are entering and leaving, how they navigate the site, which pages (and content) are most popular, how and where they find you and more. Even if you don't have all of the modules set up, it will give you a useful overview of how well your current site is performing. This will provide you with the information on what areas need the most work.

Be honest and ask yourself questions that address the successes and shortcomings of your current site, such as 'Who are my target users?' or 'What will make users want to come back?'. It’s often these questions that will help you envision the site architecture and aid you in setting the goals and expectations for your redesign.

Tip: Use a tool such as the five second test to quickly measure your current sites' effectiveness.

2. Define your goals

Redesigning your site based purely on aesthetics means you're simply 'papering over the cracks' and not tackling the real issues with your current design. If you design on a whim you may even find you actually alienate your most frequent users. Without setting goals, you have nothing to strive for and nothing to measure the site’s success by.

It's imperative that your redesign should be aligned with measurable business goals, if it's to be a success, and your design decisions should support these business goals.

You should have a mixture of both short term and long term goals. For example you may want your redesigned site to drive an increase in enquiries, as your overall goal. This can then be broken down into smaller goals, such as; increasing traffic, maximising conversions, crafting better calls to action and optimising your contact form. These goals will directly inform how you approach the design, so identifying them is essential.

Tip: Your goals should be focused on the results you want to achieve, not how you want the site to look.

3. Character and personality

You may be thinking this is an aspect of the redesign that should come further into the project, however developing the character and personality of your site will define both the content and design, so it's a key step not to be overlooked. Injecting personality into your design and content is also one of the easiest ways to stand out from your competition.

There's a reason Personality has the word Person in it; if you want potential clients to connect with (and hire) you, it's imperative you showcase yourself as much as your work!

Using your own personality as the basis to create a persona that embodies the personality of your new site. This can help create consistency between the design and content and be a useful aid in communicating your personality in a meaningful way.

Elements of the visual language such as colour, texture and typography also play a pivotal role in defining your sites' character and personality.

Tip: Your interests, humour, creativity and passion should shine through in every aspect of your portfolio.

4. Rethink your content

While a beautiful, accessible site is important, content is still king, so it's an important consideration. A site redesign is not just a visual overhaul, it's also the best time to completely rethink your content. If your site is currently underperforming, it's more than likely your content is contributing to this as much as your design.

The most effective and efficient method of re-organising your content is through a content audit. This will give you a clear overview of the strengths and weaknesses of the quality of your current content, refocus your effort on key areas of improvement and ensure your redesigned site is not only beautiful but also relevant. With a content audit you'll be able to clearly evaluate the gaps between your current website content and the information architecture that will improve readability and showcase your portfolio, and most importantly of all, that will best serve your users.

By analysing all of your content you will be able to create a structured flow of content which will help to establish your overall goals for the redesign.

Tip: Think about the clients you currently attract and the kind you want to attract throughout the content preparation.

5. Develop a sitemap

So just how do you go about organising all that new content? One way is by creating a visual sitemap, which will help clarify the structure and flow of information on your new site. It's not essential to know every single page, but having a clear idea of the information and navigation hierarchy will help you understand the relationship between each page.

You want to give visitors to your portfolio the most logical path to the key areas of the site, taking them directly to where they're most likely to go. A sitemap will help optimise this, so it takes the fewest steps possible to reach the key goals (for example, funnelling visitors to the 'Hire Me' page).

While there is a wealth of tools available to create visual sitemaps, now is the perfect time to get sketching, and freely draw the hierarchical structure of the site, before you begin thinking about the layout.

Tip: Don't make your users think about how they'll get there, make it seamless.

6. Analog before digital

So you've done all the prep, planning and research, the next step is to start planning the layout of your site, using wireframes. Wireframing is an important part of the design process that allows for rapid prototyping and helps to pinpoint any potential problems. It provides you with a visual representation of content, hierarchy and layout.

Wireframing will force you to focus on the functionality, usability and information design first, crafting a great user experience, free of any potentially distracting design elements.

Grab a notebook and pencil (or better yet download one of the many Wireframe Templates available) and start sketching, as it will allow you to brainstorm quickly and convey as many ideas as possible with the least amount of effort. If you decide to go high fidelity, then there are numerous apps and services available to enable you to wireframe in the way that best suits you.

Which ever method you choose, taking the time to do the legwork up front will almost certainly pay dividends further into the redesign.

Tip: When working on wireframes keep in mind that one of the main reasons the website is being redesigned is to increase conversion rates: that means turning visitors to clients.

7. Make it memorable

Discussing crafting the actual design would take an article by itself. However, there is an aspect of design that often gets overlooked: memorability. Having a portfolio that is memorable is key. Your site should stick in the mind of the user, leaving a lasting impression.

Three key areas will help you craft a memorable portfolio:

1. Dare to be different While it sounds obvious, if you want to stand out from your competition, sometimes you have to take a risk and be daring. You're unique and that should show through in your portfolio.

2. Compelling content Use compelling language that piques your visitors’ interest and clearly emphasises your differences from the thousands of other designers. Your visitors are likely to only read a small percentage of text on your site, so make it count.

3. Be bold Now is not the time to be meek. Go for something punchy and quirky that speaks volumes about who you are and what you do. Experiment with colour, texture and typography, and be original.

How you present the content has a significant impact on memorability. Using techniques such as Content Chunking will make reading copy easy and efficient for visitors to consume. Taking this a step further and presenting content in a creative way will also help create a memorable experience.

Tip: Focus on the entire site experience for your visitors, make it memorable and enjoyable and they'll want to come back.

8. Aim to futureproof

Trends and technologies are ever changing on the web, so while you can't guess what you future will hold, you can build your site with a view to futureproofing it.

CSS is the obvious starting point, the aim being to craft clean, semantic, standards-compliant code that’s both portable and reusable but most importantly flexible, allowing for progressive enhancement. This means focusing on the content, establishing a base level of functionality and support and then applying styles progressively, based on the user’s system capabilities.

Ensure your site is scalable and build in flexibility, allowing your portfolio to grow as you do. By incorporating new technologies and addressing the mobile market (for example by using Media Queries), your site stands a greater chance of staying contemporary.

Another aspect you should take into account when aiming to futureproof your site is which CMS you will use, and it's important to define your requirements and weigh up the options. The Content Management System you choose will have a significant bearing on how well your site stands up to the test of time.

Tip: If possible utilise a grid structure which streamlines development and allows for content to be added or removed without the need for an unnecessary major redesign.

9. Check and test

Checking and testing implies more than simply browser testing, it means checking everything from performance to SEO.

All your hard work getting to this point could potentially be ruined if you overlook some of the basic checks necessary before launching.

Nothing turns visitors off faster than poor spelling, so checking your content for correct spelling, grammar and punctuation is of the utmost importance. However, copy is just one of a number of important things to look for when giving your site its pre-launch testing. BoxUK has an excellent downloadable checklist that covers most areas.

Tip: Once your site has launched, it's important to monitor closely things like speed and search engine rankings.

10. Listen to feedback

Your site has now been launched into the world. However, the next few weeks will be critical to its success, as you listen carefully to the feedback from your users.

You can test thoroughly and solicit feedback from your peers. However, the actual users of your site will be the most vocal about the changes and it's how you react and respond to this feedback that could determine how successful the redesign is. Their feedback can be invaluable in improving the user experience.

While there are numerous apps and services designed to help you solicit feedback, it's just as important to react to your users’ actions. This is because what users say and what they do can be completely different! Using heatmaps and clickstreams, for example, can help you build up a picture of where people are clicking and what's hot and what's not on your new site. Enabling you to change and refine where needed and determine if the findings measure up to your goals.

Tip: This doesn't necessarily mean listening blindly to everything your users tell you, but instead look for consistent patterns in the feedback.

A closing thought

You may notice the actual design isn't even mentioned until Step 7. The harsh reality is that redesigns are often poorly executed because not enough time was spent planning, which means they don't produce the results expected. Redesigning based purely on cosmetic changes means you overlook other crucial areas such as content, user experience, information hierarchy and navigation.

While you may not choose to follow these steps to the letter when it comes to your redesign, it's worth noting Winston Churchill's quote: "He who fails to plan is planning to fail."

Best of luck in your redesign!