So, you are on the threshold of an important event – the redesign of your site.
The task is not easy: 301 redirect, texts, code, A / B testing, site maps, planning! And these are just some of the mandatory items.
Last summer CoSchedule started redesigning their site. And although the research and study of other people’s experience was very useful, in general the resources of the team were very limited. But they managed to cope with this difficult task.
In today’s article, we will tell you about the experience of CoSchedule and the lessons they learned in the redesign of their site.
Here’s how two people were able to create a website from a sketch for 4 months.
1. Conduct a brainstorming session
During the week, with the help of brainstorming team created 3 very different storylines with the application of design in Photoshop. Their task was to write a story, make a design and present the idea to management.
They began to generate a variety of ideas, getting rid of the most controversial, to make room for inspiration. From the comic strip with super heroes to the small robots accompanying the marketers on their way, every idea was another step towards the final story.
2. Create a site map
Name each page of the site. The map should not be too complicated, it can take no more than an hour to create it. Having a similar scheme of the site before your eyes, you can build effective ways to convert and fascinating storytelling.
3. Write the text before creating the design
Before you start creating a design, write the texts for each page. Pay special attention to catching headings for all important points. This can take up to a month of work.
- Write a minimum of 25 headings for each topic (if possible) and test them among your team members.
- Before you write a single word, ask yourself: “Why do customers want to read it?”. The answer should be a real benefit or a reason why your blog, page, email will be of interest to users.
4. Prepare the outline
The sketches are the skeleton of the future design, they are necessary for further work. Creating them is quite simple: it is a schematic representation of the page layout. Based on the outline, the design will be much simpler.
5. Start with Photoshop, then work on the code
Create a detailed design for each page. You need to do this before writing the code. This stage helps to get rid of the need to imagine future pages and all of their elements.
6. Spend A / B testing
Start testing assumptions in the early stages. After creating the text and design in Photoshop, start testing some of your ideas on the existing site (pay attention to elements such as headers, logos, images).
Instructions for conducting A / B testing:
- Formulate the hypothesis . Based on the effectiveness of the existing site and the specific elements that you want to test, formulate hypotheses for future tests.
- Test . Create a hypothesis variant (for example, a page with video) and test it in comparison with the original page. Determine the duration of the test, taking into account the number of monthly visitors, the real conversion rate, and the expected change in conversion.
- Analyze the results . Analyze the results and determine which option was more effective. If the winner is obvious, implement the hypothesis in the design of the new site. If the results are controversial, review the hypothesis and continue testing.
The CoSchedule team tested several headlines and added a video to the home page. This provided them with an increase in conversion for the new site by 6%.
7. Proceed to the development of
Doing the code, stick to the plan. Concentrate on writing the code and editing it. In addition to correcting the main mistakes, try to avoid significant restructuring.
8. Check the code
Here you can check the functionality of the design. For the quality confirmation stage, you can use Meistertask. Such tools simplify the editing process and help to quickly test the site. Also, you can define different phases (in the process, review, ready) and use Skitch to create visual elements (the designers will be delighted with this.)
9. Highlight the time to correct errors
Errors will be, so select the correct time for their correction. Ask your team members to test the site and try to find errors and flaws. In the same phase, test the UX. Attract for this friend or colleague who does not participate in the project. Take notes and be ready to make changes. Remember, a good design works simply, if a user has to think about something, then you are doing something wrong.
10. Take a deep breath and imagine your creation to the world!
10+. Continue A / B testing
After the launch of the new site, the work does not end. Everything is just beginning.
Create a list of items you can test: colors, images, text, videos, etc. Then create a schedule for testing these ideas in a couple of weeks after the launch of the site.
Remember, your site has one goal – to convert visitors to customers. And if you want to increase conversion rates, A / B testing will help you determine what works and what does not.
Write texts in the words of clients
The best way to sell something is to use the phrases and words of your existing customers. How to do it?
Before you write the texts, study the polls and testimonials of clients on different sites. Also an important part of the process should be interviews, which can be conducted, for example, via Skype or by phone.
It is difficult to do without meetings during the implementation of the project, but we must not forget about the goals of these events, so as not to spend too much precious time on useless discussions.
Daily coordination with all team members helps increase productivity and move forward faster. Define one or two problems for each meeting and talk only about them, omitting extraneous discussions. Respect your time and the time of your colleagues.
First dream, then focus
At the very beginning of the design process, highlight 5 days for brainstorming. This process looks like this:
- Point out ideas and gather information
- Draw a sketch of design and story lines
- Select and focus on 2-3 ideas
- Create detailed models on the basis of ideas
- Test a new story on the other team members
To begin with, it is necessary, without limiting imagination, to collect as many ideas as possible. To make sure that the idea is worthwhile, ask yourself the following questions:
- What is the main goal of the project? (Conversion, traffic)
- What assumptions do you make? What do you expect from this redesign?
- Analyzing the data, determine what works effectively on the existing site? (And what not)
- What do you like / dislike about the current design? Why?
- If the time for work was not limited, what did your design look like?
Answers to these questions will help you objectively evaluate new ideas and find something really unique.
High speed for better design
The best results are obtained as a result of quick work. In our nature, there is a predisposition to find problems and be cautious. If you act fast, fear will not have time to appear.
So, try to make quick decisions, give up everything unnecessary and focus only on what results.
Avoid reworking at the initial stage of design creation. Very often, first the basic idea is created, then the “alternative options” appear: the background changes, in the new place the image appears, the color of the element changes, but the concept remains the same.
To avoid this mistake, get used to the kind of “clean board” and be ready to make changes after an objective assessment. Trying to bring the design to perfection, you risk switching to a completely different idea.
Website redesign is not an easy task. Given the many elements, managers and options, you can quickly get confused. Do not try to create the perfect process. It’s simply impossible.
Take from the CoSchedule experience what you like, leave the rest and create your own unique process that will lead you to success.