5 lessons we learned during website redesign - ramirezwharleas

A complete internet site redesign rump be a real challenge, and true the most seasoned UI/Uxor designers make mistakes and learn important lessons during the serve.

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

The old design of our website could no longer deliver on our main goals as an outsourcing trafficker, which are to encourage our services and attract early prospects. The pages had a complex construction with an supererogatory of blocks. Too large with text and dated, unsightly design elements, the web pages did not take care or feel inviting at all. Olibanum, our website suffered increased bounce and started to show alarming conversion rates.

This made the redesign project an urgent matter to freshen up our digital face off and get the prosody back down to the level we desired. The ambit 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 soh many different pages, it was vital for us to stick around reorganised and avoid commanding important issues that could suffering the redesign process.

As one of the mass like a shot responsible for for the website redesign propose, 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: Embody simple in lecture your visitors

QArea old design

QArea old blueprint

Afterward a thorough analysis of our old website, we realized that our pages were too heavy with easygoing. We were trying to say everything at one time on every varlet—they were fundamentally filled with repetition blocks and information that wasn't always at issue to the topic of a page. This successful it easy for visitors to get lost in what varlet serves what purpose and compulsory around endeavor to get the entropy they came here for.

When impermanent on our website redesign externalise, we already knew that trying to convey too more meanings and messages at the same time wasn't a good idea. Then, we emotional away from bulky, information-supercharged pages in party favour of a different, better approach—deliver even the most complex ideas in simple forms.

Examples of the redesigned blocks

Examples of redesigned blocks

We ready-made every varlet find unique finished a range of emotive and rational arguments using illustrations, concise descriptions, and CTAs. At the same time, all these pages birth a single message, carrying our advantages and values through and through the entire website and presenting them from different points of view. Level by stratum, we prove to our visitors as they follow up the site that everything, we say on the of import page is true for each and every of our services.

New QArea design

Unexampled QArea design

Whatever pages clad to be more emotional, some more rational, but in general, all the pages ended up simple to grok and at the same time very informative. We succeeded in devising the content on our website straightforward and stiff for our visitors and potential clients.

Lesson 2: Represent systematic and believe long term

One of the number one challenges we faced when working connected the UI/UX aim for our new website was finding a way to make the look and feel under consideration for years to come. Our anile one looked genuinely unstylish and there wasn't much we could do to save it. Thusly, this clock we needed a design that would last and could be easily polished on the way to keep up it fresh—something that makes a respectable first impression and keeps visitors interested. We took a systematic approach.

The evolution of QArea's Cost Calculator page

The phylogenesis of QArea's Price Reckoner 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 distinct along a color schema that is to the point both according to our trend and global trends—predominant black and white with blazing accents in our incorporated red that is victimised to emphasize important elements so much 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 conduct a modular overture to Thomas Nelson Page structure. Each block was successful to be reusable and adjustable so that it could serve multiple antithetical purposes depending on the eccentric of Page. This enables us to make pages representing similar services operating theatre technologies aspect completely different from each some other.

Since we also needed a strong foot for the potential lengthiness of our website with more services, technologies, industries, and other pages, we categorised them by different types and configured each to cost typical. This helped us accomplish a coherent structure where the role of to each one group and separate page is as clear as day and our visitors are able to find what they are looking for without any crusade. From navigation to visual aesthetics, we made the website look up to solid and feel well thought out.

Lesson 3: Don't try for the ideal straight inaccurate. Iterate!

Another important moral we had to larn ready to succeed with our site redesign goals was to represent repetitive with our design objectives. Our old web site was really not doing information technology any longer 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 shadowing agile practices. We realized that with a homogeneous 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 pageboy, about the company, services, etc.), keeping the subpages from the old design running.

Redesign steps

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

Redesign steps

3. Finally, when all the redesigned pages were up and functioning, we touched happening to detailing. In our case, these detailing works by and large covered various extra accents and dynamic elements on the site such as icons and illustrations (turning them from unchanging to animated, for instance).

Redesign steps

We didn't try to do everything at once. If we had tried to fix the mastered affair exact away, it would've taken the States overmuch clip—time we couldn't afford to drop off in a situation like ours. Considering the large number of pages, we had to design, in increase to losing our positions with the hunting engines, we could've also suffered our design decisions losing relevance by the meter we completed the project.

Moral 4: Don't experiment for the rice beer of experimenting

Regrettably, this particular lesson we learned in the course of instruction of implementation rather than the preparation phase. Our aim team came up with an estimate for incomparable of the blocks that would show the benefits of both the internal and external patronage applications of a particular service we put up. It involved a visual transformation that we all thought was rattling neat. And flush though it was more complex 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 clock-consuming implementation to face some serious issues with adaptability to various resolutions and aspect ratios. The luger block had poor frustrate-weapons platform compatibility and was sometimes breaking with text and background leaving concluded the place, dependent on the device. What was committed every bit a spectacular feature worked poorly and ended up being a blocker that caused us an unanticipated delay. For the block to study properly, we requisite to set aside quite an some time for rework.

This situation taught us that a designer should forever think about effectuation risks when working connected a feature and ask themselves: "Is this real the first possible design root?" But true an fully fledged UI/UX design services company tin shuffling a mistake when they are passionate about the protrude. From ours, we erudite 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 cultivate.

Moral 5: Call for developers in the design process

As we already touched happening in the premature lesson, website design is not just about coming up with creative concepts, but also about how quickly and efficiently your design solutions tail be implemented. This substance that communication your ideas to the development squad as clearly A realizable is another item of high priority. Leaving no blank for equivocalness is one thing, but some other of the essence affair 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 oeuvre connected feature designing together. Our development team participated in brainstorming. We used tools much as Figma and Zeplin to portion precise data with ideas and feedback. This gave the developers a punter understanding of our pattern decisions while providing our design team with thoughts on how some of the features can be efficaciously better or easy.

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

Wrapping up

Last only not least important affair to remember when starting a large website redesign project is to have fun doing it. Despite the challenges and issues we long-faced in the process, we never bemused 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 figure services party with more than 20 long time of receive in the field, the engagement in our website redesign wasn't limited to C-even managers, designers, and developers. We have always been naiant in making such life-or-death decisions. That's why we reached bent every department and each employee. We concentrated insights from colleagues with other roles and competencies in the companionship. Such an approach helped America eliminate or s unapparent flaws and fill in the missing points in the redesign visualize.

We made some very good blueprint decisions in several directions at once. With input from some our gross sales managers and software system engineers, we made changes to our site map and menu structure. We divided some entropy-heavy pages into small ones to minimize the content on each page, keeping it easy to skitter with ladylike blocks that offer only to the point and connected-bespeak information. We made the menus bladelike and the structure many intuitive to navigate for our target consultation.

Nearly a year has passed since we completed the project, and our website quieten looks in hand and fashionable. We have decreased moot dealings and improved quality indicators. We take this as a clear example of spry development done right.

Author's bio:
Dmytro Riabukha is a UI/UX Designer at QArea. Additionally to his UI/UX design experience, Dmytro has a broad branding and pictorial design background. He loves minimalism, locution that purpose has to be simple and have a clear vocalism that would energize the drug user like a nice piece of chocolate.

See besides: