Codibly

Goals and objectives of implementation

Codibly is a Krakow-based IT company. It creates dedicated software services for clients in various industries (e.g. insurance, healthcare), and has the greatest expertise and project experience in the energy & utilities industry.

‍

The previous website was made on a template with very low technical factors such as : optimization, indexing status in Google, or performance (speed and html code construction). Additional problem was very unfriendly implemented CMS Wordpress system causing problems in site administration.

The basic premise for the implementation of the new site was :

• Implementation of the site that gives the possibility of intuitive and efficient operation from the admin panel,
• technically and SEO optimized
• reflecting fully the company's services and offerings, which unfortunately the old site did not provide

‍

Our role

The task before us was simple : build the site from scratch based on data from the current site, analysis and discussions with the Codibly team (learning about problems and needs).

Increase site convrsion, improve user experience.

Perform SEO research and analysis of TOP10 Google pages.

Analysis of the competition in terms of the construction of the offer and the style adopted.

Development of information architecture and new offerings.

‍

Implementation stages

‍

Why, what and how ?

Questions about knowledge

In order to be able to ask questions one should at least more or less know what to ask. That's why we went to read the current Codibly website and industry sites to learn as much as possible about energy&utilities topics. This allowed us to propose :

• Ask questions to the team and form thoughts on the new presentation of offerings and services
• Propose new solutions from the reorganization of the menu structure including offerings and services.

‍

Audit of current site

Heatmaps and Google Analytics

The current site during the audit and after analysis with heat maps (hotjar.com and mouseflow.com) and user flow in Google Analytics was not living up to its potential. Most users :

• did not reach subpages further than the main subpages of the offer,
• Use of the giant form on the home page was at a very low level of about: 0-2%,
• About 50% of people scrolled the page only halfway on mobile devices,
• enters the career subpage,
• The form button, although highlighted, also failed to do its job (very low click-through rate)

‍

To achieve the goal, we worked on building a new and analyzing the current offerings and services with the Codibly team in the form of remote hangovers. Over the course of several iterations of Q&A and data consolidation, a new site structure and reorganization of the industry and services sub-page offerings was developed.

On the basis of Google Analytics and heat maps, we were also able to determine that the most clicked menu item and the one generating interest was Careers. The least clickable, on the other hand, was the one that was most important to the company (Energy&Utilities). The level of nesting of the sub-page in the menu made it difficult for users to reach it. After talking with the team, we learned that the company has been recruiting a lot recently, which explained the results obtained by our analysis.

‍

‍

‍

‍

‍

Performance of SEO research and analysis of TOP10 Google pages.

‍

We then moved on to serp analysis (Google TOP10 results). The main task was to determine the pages that Google premiumizes and average the data. To do this, we had to analyze the pages in terms of onsite SEO factors ie :

• The volume of content - the length of the paragraphs and the total for the content,
• saturation with main and side key phrases and the use of dependent words and questions,
• internal linking,
• The use of h1-h4 headings, alt tags,
• The percentage of placement of main and side key phrases with infinitives and where they are placed,

‍

A competitor analysis was also performed in terms of the construction of the offer and the style adopted.

‍

‍

Arcihtecture of information

Development of information architecture and execution of user flow presentation and sub-page content.

The information architecture was prepared based on :

• all the data collected so far from analytics programs, auditing and from the team,
• competitive analysis conducted,

‍

It is worth mentioning the implementation of UX prototypes and UI designs in figma.com. Thanks to figma, everything we worked on was in one project. The client had an overview of the progress of the work and was able to leave comments in figma for each element of the project at any time.

‍

The result of the work on the new site architecture was :

• Reducing the number of subpages, their reduction and consolidation,
• Eliminate thincontent subpages i.e. those that give little value or are very short,
• depletion of the sub-menu items of the Industries offering to the main industries only, i.e: Energy&Utilities / Insurance / Healthcare,
• Reducing the number of subpages from the services menu and consolidating their content into the new structure,
• separation of the 'technology expertise' sub-page into a separate new item in the main menu (the previous version of the site contained this information in different sub-pages and a separate technology stack sub-page)

‍

New offer

A big challenge was to prepare a new offer and Industry and Services subpages containing the company's main services. These items were ultimately pulled out as main menu items expanding only one level. The previous version of the website contained a third-level submenu from which the user could select an interesting issue.

‍

User analysis

After the analyses, we distinguished two groups of users:

• an aware user entering the website in search of specific product groups,
• user looking for a service according to industries who will be interested in the industries menu item and will find a place to find information there,

‍

UX/UI design

After three iterations of UX prototyping and conversations with the team (where new menu structure concepts were presented), we were able to move on to building UX mockups.

The primary goal of this stage was:

• presenting the concepts and views of the Services and Industries subpages, combining them with case studies, the home page and with each other. Individual services (solutions) were included in the appropriate categories of the Industries subpage. The Energy&Utilities item available from the Industries menu contains in the second section solutions thematically related to the Energy&Utilities industry,
• structuring views on subpages and supplementing them with content.

‍

‍

Navigation bar

An additional navigation bar has been designed for the Solutions and Services subpages, which, after scrolling, remains below the main menu. It allows the user to efficiently navigate through the sections within a given subpage.

‍

‍

The UX prototyping stage allowed for:

• Designing space and content on mock-ups
• Assessment of content interpretation by users (space planned for the text creation stage)
• Organize key information and set priorities and sections for subpages
• Showing elements from the navigation, interactive for the user

‍

UI design

UI

Designing the visual layer and interactions was very creative. The developed style refers to the company's brand. The company's brand colors, individual icons and photos from the available Codibly database were used.

Interaction

Some of the subpages of individual solutions are equipped with interactive sections that respond to clicking or change their content as the subpage is scrolled.

‍

‍

Style guide

The nested structure and the multitude of navigation and interactive elements resulted in the need to implement rules and systematize all graphic elements in the form of a Style Guide document. Style Guide is a document describing the elements used in the project, i.e. their size, distance, states of active elements (e.g. color) of each element on the page, such as: header, button, paragraph or text sections and form elements.

The document is useful in larger projects where it is particularly important to maintain one style of elements within the rules adopted for them.

‍

‍

Development

The website was implemented:

• in the Front-end layer: individual html, css, js code written by us in the foundation framework compiled via gulp. All coding was done through the Gitlab development platform,
• in the Back-end layer: implementation and original integration of CMS Wordpress using dynamic ACFpro fields, giving the possibility of using predefined modules to independently create subsequent sections by the administrator,

‍

Additionally, Google Tag Manager scripts were implemented, which has the advantage of:

• asynchronous tag easing, which means the page loads faster
• any and independent ability to easily manage and implement various additional scripts (e.g. connecting Google Ads, salesmanago, salesforce, heat maps, etc.), which was important for the company's marketing department,

‍

‍