Table of Contents
Do you want to do a website redesign like a Pro? You are on the right place! Today, you will learn about information architecture, what not to do, what is it the “why” of IA and some basics. Next, you will learn about wireframes, what are they and what are the 8 benefits of using them. Finally, you will learn about 4 tips for working with wireframes.
The Website Redesign Process – How to Redesign Like a Pro part 1.
The Website Redesign Process – How to Redesign Like a Pro part 2.
The Website Redesign Process – How to Redesign Like a Pro part 3.
The Website Redesign Process – How to Redesign Like a Pro part 5.
Start with information architecture
Before we dive into the subject of information architecture, let me tell you a short story. It is a story about one young man, who decided to become a freelance web designer. One more thing. This is NOT a work of fiction. The main character of the story is NOT a product of my imagination or used in a fictitious manner. It is a story based on real events.
A short story about what not to do
When I started out as a freelance web designer, I had no idea about what information architecture was. And, as you may have already guessed, I skipped this part. This doesn’t apply just to redesign project, but all projects I worked on. Back then, my design, as well as redesign, process was usually following. I would talk with my client and other stakeholders about their wants, wishes and expectations.
After that, I would look on the current website, in case of a redesign. Otherwise, I would start browsing various web design galleries and look for interesting examples. You know, the usual suspects such as Dribbble, Behance, awwwards and so on. Then, I would use these examples not only for inspiration, but also to decide about the structure, layout, patterns and so on.
Next, I would create a number of designs based on the structure, layout and patterns I extracted from those examples, as well as other resources, and I would send these mockups to my clients. If client accepted the design, I would move to code. If not, I would make corrections and sent new batch of designs. This would repeat until client would accept my designs.
Fortunately, the majority of my designs looked good, even very good. Good thing being a perfectionist. So, clients accepted them, I wrote the code and got paid. Since we are already in fourth part, and you know a lot, you may ask some questions. For example, how usable were these websites? How user-friendly were they? Did they meet the project goals? Answer? I don’t know.
Let’s be more specific. Usability? Back then, I never really thought about it. I just followed layouts, structures and patterns on examples I found. User-friendly? The same thing. I assumed a design will be user-friendly because someone else used it. Project goals? Back then, I had no idea that setting project goals and metrics was part of design or redesign process.
The why of information architecture
As you can already see, it was a mess. I don’t know what was that, but it was definitely not a website design nor redesign process, especially not professional one. Why am I saying you this? For one thing, I know that there are many web designers who are doing either the same mistake or something similar. Second, I also know how dangerous this mistake can be.
Information architecture is part of website design and redesign process for a reason. Well, three reasons. First, it helps us identify and define the right type of content and functionality of the website. Second, it helps us outline the organization, structure of the website and naming conventions. Third, it helps us define the relationships between a site’s content and functionality.
An overview of information architecture
Let’s take a look at the main parts of information architecture. We can talk about four. First, there is something we can call a content inventory. This part is about exploring the current website and looking for any existing content. Second is a content audit. This is about examining the usefulness, accuracy, tone of voice and effectiveness of the content.
The third part is taxonomy development, or information grouping. This part focuses on creating relationships between content, its pieces, from the perspective of the user. We divide similar types of content or pieces of information into groups based on what the user may think is related, not what we think is related. Remember that the most important person in redesign process is in 80% of cases the user.
When it comes to taxonomy development. We have to keep in mind two things. First, there might be one or more appropriate taxonomies for the website. Second, we are working with mental models of our target audience. This brings us back to assumptions and expectations users have. A simple scenario. Let’s say we are working on a redesign for a clothing store.
In the case of its product offering, there are few taxonomies we can consider. One can be based on the type of fabric. Another one can be based on clothing item. It can also be based on color. As a result, we could end with end with a shirt made from cotton, in V shape, that is red. Three taxonomies or tags usable for filtering all products. Now, when there is a user who needs a new shirt, she could easily find this red, cotton shirt.
Fourth part is “labeling”. What we do here is deciding how individual sections of the website might be called. We want to ensure that the structure of the website, its page hierarchy and navigation, uses correct labels. In this part, we have to always consider what the user expects to see. We also have to consider what content our client wants to present.
If we do this right, it will help us increase usability of the website, make it more user-friendly. It will be easier for users to find the information they are looking for. Let’s consider this scenario. Our client wants to include a short section with FAQ on her Help page. Sounds reasonable. However, is this really the best place for this type of content?
Is help page the place where users will expect to see it? What if users expect to find FAQ somewhere else? What if users expect to find this content on a page dedicated to products or services our client provides? This is something we have to consider and a decision we have to make. There might be situations when there will be benefits to both.
Or, there might even be a third variant. What if we try this alternative. We may putting both the section with FAQ and the content for Help page right on the page with products. Will this work? Can this make the website more usable and friendlier for users? Will this help us achieve the goals for the redesign project, client’s goals? Every decision has pros and cons.
These and many more are the decision we have to make when it comes to information architecture. And, step by step, by making one decision after another, we will create the structure for the rest of the website. When we are done with this part of redesign process we will have a site map for the website. This site map show the hierarchy of content across the website.
This is enough for a brief introduction to information architecture. This is a topic that can is very deep and complex. As such, it would deserve its own article. Unfortunately, we don’t have the time and space right now. So, for anyone wants to learn more about it I highly recommend this article about information architecture for optimal user experiences. Another great resource is Information Architecture: For the Web and Beyond by Louis Rosenfeld.
Use wireframes
When it comes to wireframes, there are sometimes mixed reactions. Some web designers like to use them some not. Back then, when I started as a freelance web designer I used to skip them. My assumption was that wireframing was a waste of time. I thought that my work will be faster if I skip this and move right into design. I can’t tell you how wrong I was.
It is hard to say how slower my work became after I made the decision to skip wireframes. However, based on my current design and redesign process, it was noticeably slower. Nowadays, I can move between individual steps of my design and redesign process and iterate much faster. It takes less time to go from the idea to first prototype.
In a brief, what is a wireframe? A wireframe is basically a very simple visual guide that represents parts or pages of the website. It shows the layout and structure of the page including individual elements. These elements are usually presented as basic shapes and representations, without any details such as typographic styles, graphics or colors.
The level of detail depends on the fidelity of wireframes. A wireframe can be either low-, with only basic shapes and structure of the layout, or high-fidelity, with more details more closely matching the design. However, it still lacks any typographic styles, graphics or colors and it is still far from the design. For more, check out perfectionist guide on Smashing magazine.
Eight benefits of wireframes
What is so special on wireframes? Why can something such as this be helpful? There are few reasons. First, wireframes can help us maintain flexibility while our ideas are getting shape. Wireframes are only simple representations. They don’t limit our options or creativity. The opposite is true. They are fluid and we can change them quickly and experiment.
Second, wireframes can help us spot major problems before we spent any time creating the design. It is less likely to happen that we will stumble on some problem while we work on the first design if we took the time and worked with wireframes. Yes, they are simple representations. However, they provide an inside into how the design, the website, should look and work.
Third, wireframes help us establish the structure and hierarchy first. This is the benefit on their simplicity. There are no details that could divert our attention. There is no text. There is no reason to worry about choosing the right typeface, adjusting leading, tracking, kerning. The same is applies to images. No need to worry about choosing the right images.
Fourth, wireframes help us keep our client and other stakeholders pay attention to the right place, where we want. When we want to discuss structure and hierarchy client can’t meander to “bad” images, “wrong” content, “ugly” colors, etc. There are no images. There is no content. And, there are no colors. Client’s focus is, therefore, where we want it to be.
Fifth, wireframes allow us to focus solely on the functionality of the website. There are details to worry about. No images, no text, no content. Only basic representations of these elements. Again, there is nothing that could divert our attention.
Sixth, each wireframe is a stepping stone towards the final design. When our clients and other stakeholders accept the wireframe, it becomes a blueprint. It is a map of elements, with exact positions and dimensions we all agreed on it, we will use to create the final design. What’s more, we don’t have to go from low-fidelity wireframes, lacking any details, to design.
Instead, we can slowly and gradually add more and more details and slowly transition from low-fidelity to high-fidelity wireframes to design. Since wireframes are flexible, we can always refine the elements and their structure during this transition. We don’t have to always start from scratch. Instead, we refine and iterate.
Seventh, they save time and money. Wireframes are easy to change. This is true for any stage of design and redesign process. When client doesn’t like something, we can refine it, theoretically, on the spot and show her the result of that change. This leads to a faster feedback loop between us and our clients and less time needed to complete the redesign. Client will then also become more active participant in the redesign process.
Finally, believe it or not, wireframes can be fun. They allow us experiment with different ideas and create more examples for our clients in less time. As a result, we and our client will have a wider range of options to work with. Can we say the same about creating a pixel-perfect design for every idea? Probably not. So, don’t skip wireframes.
Four tips for working with wireframes
Before we close this part, let’s take a look at three quick tips for working with wireframes. First, tool doesn’t matter. Don’t look for the best or right tool available. You can create amazing useful wireframes with any graphic editor. Or, you can use a basic pen and paper. This is my favorite “toolkit”. Just try different tools and find what works for you.
Second, keep your wireframes simple and start with low-fidelity wireframes. Keep the details low, just basic shapes and representations. Polish the structure and hierarchy with client and stakeholders and then transition to high-fidelity wireframes and more details. And, before you realize it, you are finally getting into the design.
Third, annotate your wireframes. Your client and other stakeholders, or team members as well, usually read wireframes and pay attention to them. So, make sure you add annotation when it is necessary to explain something or provide more information. Just keep it short and to the point.
Fourth, encourage everyone to participate. Let your client, stakeholders and everyone in the team comment on your wireframes and give you a feedback. This can significantly improve the results of the redesign process. And, as such, it will also increase the chance the redesign project will be successful, i.e. meet client’s goals. And, it will probably improve client’s thinking about your cooperation.
Closing thoughts on website redesign
We are on the end of part 4 of The Website Redesign Process mini series. Today, we started with information architecture, what not to do and the why of information architecture. Then, we briefly discussed some basics of this topic. After that, we switched our attention and focus on another part of redesign, and design, process, the wireframes.
We talked about what are wireframes and why we should use them. We also discussed eight main benefits of wireframes along with four tips for working with them. I hope you enjoyed this part and learned something you can use in your own redesign projects and process. Now, it is the time for the last question. What’s next?
In the next and final part we will close this series. We will focus on mood boards, mockups, prototyping, user testing and finally delivering all assets to our client. With that, our redesign process will be complete! Until then, thank you for your time and have a great day!
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
