How to do a Redesign

Redesigns happen everywhere, either you or your client has the desire to make it all new. But redesign isn’t just about design. Re-launches/designs always involves a new content strategy, design patterns, architecture, you name it. Here is how to start all over.

Martin Muzatko Written by Martin Muzatko
on

Why do Redesigns happen? Most of the time, redesigns happen because there was barely any strategy (or worse: none at all) in place yet. Like for this little blog of mine *cough*.

1. Take inventory

Think which parts of the old website you want to keep, list them in your own personal content-listing file. Keep in mind which new content has to be released, we aren’t organizing content into categories yet, just listing in a hirarchy-like style. I use sublime text/atom for this, so I can organize my items in a tabbed hirarchy.

Begin by giving each piece of content a name or title if it has none yet.

Content
	Ready to reuse
		Riot
			Cheatsheet
		A couple of articles

	To write
		Riot
			Tutorials
			Examples
				Loop
				Events
				Modularity
				Routing
		Processwire
		Content Management

Resources

About me

Call to Action (subscribe opt-in)

Featured (AKA home page):

	Tutorial Line
		in News form (ordered by date desc)
	Recommended Reads

Well, for this blog, there is not that much content in place (un)fortunately, so this is an easy task for me. Depending on complexity, you want to focus on the most important content first. Mostly whats already shown on the website, or if statistics/analytics are existing: which pages gets the most views, which does not always equal to important or qualitative, you could have mislead them for a while before they could find top quality content. Your personal opinion on what is important to the user is needed here too.

If you need a couple of minutes to figure out the importance of each content, don’t worry. This usually is something companies do for days and weeks, so they employ their own content strategists.

This does not always mean pages, but pieces of content depending on layout. Like the call to action (subscribe opt in) I place after every article, the about-me blurb etc. They are not one page, but they are part of it.

2. See the patterns and reorganize

Thinking about atomic design in terms of content pieces.

  • Text
  • Code
  • Images
  • Videos
  • Numbers
  • Charts

Now, looking on your previous collected data, see which content pieces use which kind of elements. Most of the time, you can just go with the html elements (h1,h2,h3,..) but you have to put a little more effort into that task to really get crispy clear reusable UI components.

Again, here is what it may look like. Some of these elements appear on almost every website (title, subtitle).

Content Elements
	Atom
		Text
			Title
			Subtitle
			Blurb/Teaser
			Chapter
				Name
				Number
		Code
			Preview
			Actual Code
			Explanation (Text)
		Image
		Video

We are not done there yet, we can ask a lot more about each individual part of your website to really get a clear understanding of what’s going on. We are getting into this in the next step.

3. The purpose, relation of every element and their context

Some elements on the old website of your project don’t even have a name yet. Find which parts are similar. For example: is the little preview on an article listing the same as the blurb on a cart item? Not just in terms of design but also (especially) it’s meaning. Think of the function of EVERY content element you run across.

What is a title? It is a short name of the current piece of document the user is.
What is a subtitle? It is an extension of the title to give away a bit more information.
What is a blurb? The little preview on an article/product/item to give the user enough information to get into the full article.
What is a chapter? Divides a long exhausting tutorial/article into many smaller parts that don’t necessarily get published at the same time and/or date.
What is a date? It gives the user information about when the last time something has been created and/or modified.

Even if the function of some elements seem so obviousI know what a title is, duh! – take note of the purpose of every single little element on your website. The first 5~10 times you do this is hard work, but keep in mind that this will help you to grasp the current situation of your project. We are so focused on design, shiny transitions and other frontend tasks, that we forget about the importance of this very step.

Now, after taking inventory and thinking about the purpose of every item on your list, we’ll have a look on how to sew it all together into their respective UI parts.

Content Elements
	Molecules/Organisms
		Code
			Code (HTML/CSS/JS/PHP)
			Preview
			Explanation

		Pagination
			Numbered (1,2,3....18,19,20)
			Chaptered (previous tutorial, first, index, next tutorial)

		Tutorial Line
			Language/Tool
			Chapter
			Goal 
				(kinda like blurb, but it is not only a description
				but also: in this tutorial you know how to achieve this!)

		Recommended Reads
			Title

		Latest Articles
			Title
			Blurb
			Date

Why is there no date on the recommended reads section?
Some of the most successful websites omit their date on recent content. Why? Because activity does not always mean quality and you can show that with minimalism (e.g. omit the date). So it is not always wise to display all the available information on a reference to something. To get your users to the full-length articles/products/whatever you need to think about some kind of navigation that leads them where they think they’ll find what they look for. We’ll learn about that in the next step.

4. Building the navigation

Got your list of content elements, their meaning, their context (where they belong to) and the list of the actual pieces of content ready? Good.

Most times, the homepage contains only references to other pieces of content on your website. So the entire homepage should be not more than a navigation. In some rare minimalistic cases, where there is only little content, you don’t have to create a navigation and display your content as-is.

Now you can grab your favorite layout/sketching tool to create a rough layout (not design). Which in my case, is balsamiq mockups.

You already know which content is the most important, what kind of content is declared as which element – so lets get down to business.

I came to the following conclusion: My blog consists of article/lesson only. So I have to go with a very minimalistic approach. I display a big preview of the most recent article or lesson, but users can decide to show lessons or articles only. Thats the entire navigation to find the most recent information. Navigation does not always mean a bar of items with dropdowns. If you know how to fill your homepage with referneces, but still keep it dynamic (most recent news) you can make the recent articles display part of your navigation. Keep that in mind.

2 links to an archive, which will open a list of categories for the lessons and a list of recommended articles + all other articles for the articles page.

In conclusion, what did you learn in this article?
With a clear set of content elements in mind, you know exactly what layouts fit your content.
Depending on your content and it’s importance, you can flexibly extend the layout everytime, as much or often you want without getting stuck into a organizing dilemma.
By extending your list of content elements you always have a quick overview and you can easily move around pieces of content as needed.

Stay tuned for more articles about content management and the way from loose content to an organized content management.
Are you excited about your next redesign/relaunch yet? Show your co-workers that just a little planning can already boost your productivity for redesign processes.

Further Reading
http://www.thinkingwithtype.com/contents/text/#Project:_Hierarchy

Do you need inspiration how to solve those tricky issues? Issues that when resolved once and for all, would ease a lot of daily user interface interaction.

Get on my list! You are invited to reply to any email with your important questions and get a hand-crafted reply with hands-on guides. You will learn how to solve your individual use-cases. Fill in your name below and get in touch today :) . It is about a nice conversation from developer to developer after all.

See other articles

Check username and email availability without a page refresh

Learn how to implement asynchronous form validation for your projects. This allows feedback before tedious forms are completed

Using noUiSlider as range slider to filter between two numbers

Do you know these fancy range sliders that can filter items with the blink of an eye? You move around a handle and get the desired results right away. In this article, you are going to learn how to implement a range slider to filter your data.

How to group together filter inputs to obtain and combine their values

When you want to filter a set of products or other lists, naturally you have to think how you could wire together the variety of filters. With this article, you will learn how you can retrieve the data and combine the values to filter your items in real-time.

Becoming a zombie

Do you find yourself losing track of time again? Without really knowing, a year passed. As day for day you continue your work, you had some random bursts of motivation, but you know that these kind of motivation spikes won't get you anywhere in the long term.

See all Articles