5 lessons we learned during website redesign

A complete website redesign can be a real challenge, and even the most experienced UI/UX designers make mistakes and learn important lessons during the process.

Nearly a year has passed since our UI/UX design services company finished on the journey of a complete redesign of our own website. The journey we were all so eagerly anticipating back when it started, and the one that taught us many lessons when it finally came to conclusion.

The old design of our website could no longer deliver on our main goals as an outsourcing vendor, which are to promote our services and attract new prospects. The pages had a complex structure with an excess of blocks. Too heavy with text and dated, unsightly design elements, the web pages did not look or feel inviting at all. Thus, our website suffered increased bounce and started to show terrible conversion rates.

This made the redesign project an urgent matter to freshen up our digital face and get the metrics back to the level we wanted. The scope included creating design solutions for all kinds of the various services and technologies we provide, industries we serve, and collaboration models we offer. Dealing with so many different pages, it was vital for us to stay organized and avoid overlooking important issues that could hurt the redesign process.

As one of the people directly responsible for the website redesign project, I’d like to share what our team learned in the process of planning, creating, and implementing the design of our own new website.

Lesson 1: Be simple in talking to your visitors

QArea old design

After a thorough analysis of our old website, we realized that our pages were too heavy with content. We were trying to say everything at once on every page—they were basically filled with repeating blocks and information that wasn’t always relevant to the topic of a page. This made it easy for visitors to get lost in what page serves what purpose and required some effort to get the information they came here for.

When working on our website redesign project, we already knew that trying to convey too many meanings and messages at the same time wasn’t a good idea. So, we moved away from bulky, information-supercharged pages in favor of a different, better approach—deliver even the most complex ideas in simple forms.

Examples of redesigned blocks

We made every page feel unique through a range of emotional and rational arguments using illustrations, concise descriptions, and CTAs. At the same time, all these pages deliver a single message, carrying our advantages and values through the entire website and presenting them from different points of view. Layer by layer, we prove to our visitors as they go through the site that everything, we say on the main page is true for each and every of our services.

New QArea design

Some pages turned out to be more emotional, some more rational, but in general, all the pages ended up simple to comprehend and at the same time very informative. We succeeded in making the content on our website straightforward and effective for our visitors and potential clients.

Lesson 2: Be systematic and think long term

One of the first challenges we faced when working on the UI/UX design for our new website was finding a way to make the look and feel relevant for years to come. Our old one looked really dated and there wasn’t much we could do to save it. So, this time we needed a design that would last and could be easily polished along the way to keep it fresh—something that makes a good first impression and keeps visitors interested. We took a systematic approach.

The evolution of QArea’s Cost Calculator page

In preparation for the redesign, we first carried out a comprehensive research of design trends and patterns that would suit our goals best when combined with our corporate style. We decided on a color scheme that is relevant both according to our style and global trends—predominant black and white with bright accents in our corporate red that is used to emphasize important elements such as buttons, links, and CTA blocks. Accordingly, a general feel was complemented with relevant illustrations, photos, and icons that reflect the purpose of each page and help carry a specific message.

QArea design approach

In order to improve the efficiency of our redesign efforts, we decided to take a modular approach to page structure. Each block was made to be reusable and adjustable so that it could serve multiple different purposes depending on the type of page. This enables us to make pages representing similar services or technologies look completely different from each other.

Since we also needed a strong foundation for the potential extension of our website with more services, technologies, industries, and other pages, we categorized them by different types and designed each to be distinctive. This helped us achieve a coherent structure where the purpose of each group and separate page is as clear as day and our visitors are able to find what they are looking for without any effort. From navigation to visual aesthetics, we made the website look solid and feel well thought out.

Lesson 3: Don’t go for the ideal straight away. Iterate!

Another important lesson we had to learn in order to succeed with our website redesign goals was to be iterative with our design objectives. Our old website was really not doing it anymore and we started losing our ground in the SEO game. We didn’t have time for chasing the perfect, so we decided to take it one step at a time.

We took the path of flexibility in design and development following agile practices. We realized that with a solid design concept we could break down its implementation into stages and milestones.
1. We first launched the barebones redesigns of the main pages of our website (home page, about the company, services, etc.), keeping the subpages from the old design running.

2. Then, we gradually added all the barebones versions of the subpages with room for improvement in the next iterations.

3. Finally, when all the redesigned pages were up and running, we moved on to detailing. In our case, these detailing works mostly covered various additional accents and dynamic elements on the site such as icons and illustrations (turning them from static to animated, for example).

We didn’t try to do everything at once. If we had tried to make the perfect thing right away, it would’ve taken us too much time—time we couldn’t afford to lose in a situation like ours. Considering the large number of pages, we had to design, in addition to losing our positions with the search engines, we could’ve also suffered our design decisions losing relevance by the time we completed the project.

Lesson 4: Don’t experiment for the sake of experimenting

Unfortunately, this particular lesson we learned in the course of implementation rather than the planning phase. Our design team came up with an idea for one of the blocks that would show the benefits of both the internal and external business applications of a particular service we provide. It involved a visual transformation that we all thought was really neat. And even though it was more complicated to implement than the rest of the blocks, we still decided to go with it.

QArea’s bugged slider block

What we didn’t expect is for the already time-consuming implementation to face some serious issues with adaptability to various resolutions and aspect ratios. The slider block had poor cross-platform compatibility and was sometimes breaking with text and background going all over the place, depending on the device. What was intended as a spectacular feature worked poorly and ended up being a blocker that caused us an unforeseen delay. For the block to work properly, we needed to set aside quite some time for rework.

This situation taught us that a designer should always think about implementation risks when working on a feature and ask themselves: “Is this really the best possible design solution?” But even an experienced UI/UX design services company can make a mistake when they are passionate about the project. From ours, we learned that you shouldn’t try to impress your visitors with some features designed merely for the sake of looking cool. When you want to cause an effect, rely on solutions that work.

Lesson 5: Involve developers in the design process

As we already touched on in the previous lesson, website design is not just about coming up with creative concepts, but also about how quickly and efficiently your design solutions can be implemented. This means that communicating your ideas to the development team as clearly as possible is another item of high priority. Leaving no space for ambiguity is one thing, but another important thing is making sure that your design and development teams aren’t only concerned with their own piece of work.

What we did to feed two birds with one seed was we paired our designers and developers to work on feature design together. Our development team participated in brainstorming. We used tools such as Figma and Zeplin to share precise data with ideas and feedback. This gave the developers a better understanding of our design decisions while providing our design team with thoughts on how some of the features can be effectively improved or simplified.

This way of aligning the design and implementation processes enabled us to improve communication and boost the efficiency of both teams. Through seamless teamwork and taking collective ownership over the website redesign project, we even managed to achieve the desired result a little sooner than we expected.

Wrapping up

Last but not least important thing to remember when starting a large website redesign project is to have fun doing it. Despite the challenges and issues we faced in the process, we never lost a positive attitude or fell victim to doubt. If we did, we would’ve probably failed to meet the goals and expectations we ourselves have set for the project.

Even though we are a UI/UX design services company with more than 20 years of experience in the field, the participation in our website redesign wasn’t limited to C-level managers, designers, and developers. We have always been horizontal in making such important decisions. That’s why we reached out to every department and each employee. We gathered insights from colleagues with other roles and competencies in the company. Such an approach helped us eliminate some unapparent flaws and fill in the missing points in the redesign project.

We made some very good design decisions in several directions at once. With input from both our sales managers and software engineers, we made changes to our site map and menu structure. We divided some information-heavy pages into smaller ones to minimize the content on each page, keeping it easy to skim with refined blocks that provide only relevant and on-point information. We made the menus simple and the structure more intuitive to navigate for our target audience.

Nearly a year has passed since we completed the project, and our website still looks relevant and trendy. We have decreased irrelevant traffic and improved quality indicators. We take this as a clear example of agile development done right.

Author’s bio:
Dmytro Riabukha is a UI/UX Designer at QArea. In addition to his UI/UX design experience, Dmytro has a broad branding and graphic design background. He loves minimalism, saying that design has to be simple and have a clear voice that would energize the user like a nice piece of chocolate.