Custom Software Platform Developed for a Company Based in Ukraine
The objective
Meet another Webnauts project — IOD (Intellectual Outstaffing & Development), which provides outstaffing and outsourcing services. And which badly needed a modern and user friendly platform.
- What for? To sell the services of IT specialists.
- Who for? For Western companies that want to quickly hire the right specialist and make the right choice.
By answering these questions, we managed to create a convenient and practical website that qualitatively presents (and therefore sells) the IT team and solves the problems of customers.
How did we do it? More details in our case.
Interface design
The main treasure of an outstaffing company is its team, and if the team comes from Ukraine, this is the dream of any Western client. It’s no secret that Ukrainian IT specialists are one of the most sought-after specialists due to their high professionalism and low level of claims for payment, which cannot be said about their colleagues from the USA and Europe. Due to Russian aggression, the Ukrainian IT sector found itself in difficult conditions, but it has not ceased to arouse interest and attract even more attention from the world. Therefore, the main task of the designers was to introduce the site’s guests to the team of potential performers from the first screen: IT professionals from Ukraine.
Call to Action (CTA)
Another important advantage of outstaffing is saving the client’s time in finding the perfect employee. On the site, the slogan speaks about this, the button shouts and the gallery with candidates calls for viewing, and it all from the first screen. At the same time, the design is not overloaded at all: there is a lot of air here and everything is clear even for those who do not understand anything about outstaff and outsourcing.
Mega menu for navigation
The second screen offers more opportunities for searching for an employee both by a separate direction («Profession»), and by a specific technology («Technology»). And all thanks to clear search navigation in the form of a mega menu with two sections. So, we presented a block with IT areas in the form of a small plate of 4 points, each of which is tied to a gallery of specialists.
The list of technologies is much wider, so we abandoned a bulky vertical list and placed the categories line by line, adding the «See more» button. This technique is much more efficient in terms of appearance and ease of navigation:
Site search filter
Clicking on the «See all» button or on any of the technologies takes the user to the «Specialists» page, where the possibilities of finding an employee are even wider due to additional filters, such as «Specialization», «Experience», «English level» and «Available» in slider:
Drop-down list
The next block introduces site visitors to the company’s services. We designed it in the form of a concise drop-down list with preview arrows. This technique simplifies the interface, focusing on the important, but if desired, allows you to easily access information and reveal additional information in one click:
Company page
The «About us» block allows you to learn more about IOD. Here the text is supported by a photograph and large numbers in the best traditions of Swiss typography. The big button encourages you to get to know the company even closer and takes the user to a separate page of the same name:
It is not only about UX
The next screen is more about UI, not UX, and is a bright and logical continuation of the «About us» block. If earlier the white color played the main role on the site, forming «air» between the elements, and blue only gave an accent, here the blue color sets the tone for the entire composition. It is associated with reliability, safety and trust, which perfectly characterizes the company. In addition, for a clear reason, the blue color is dear to every member of the team, and together with the «Glory to Ukraine» ticker, once again emphasizes the company’s belonging to Ukraine:
List in a table
The «Outstaffing benefits» block in the form of a concise table reveals the benefits of outstaffing using the example of cooperation with IOD:
Applying for a team
The following block offers clients to hire a ready-made team for a project: be it a website, a mobile application, an individual design or a comprehensive promotion. The client can get a proven team in just one click:
Grid in design
The site design is based on a non-standard 16-column grid with two guides, according to which all blocks and interface elements are located. All content is divided into 2 halves (on the left is the heading, and on the right is the main text), making it much easier to perceive information. The composition also has a rhythm due to the alternation of headings (either on the left or in the center), which gives the interface a kind of dynamics:
This is how the designers brought clarity to the outstaffing model with the help of a visual language and reduced a rather complex form of labor relations to a simple and attractive service.
Text content of the site
Having talked about the visual language, we cannot but mention the textual content. After all, if the task of good design is to convince the user to stay on the site, then the task of high-quality content is to convince them to buy. Anyway, a potential client will eventually move from scanning the site to studying it.
Webnauts copywriters tried to make the site of the outstaffing company not only easy to use, but also understandable. Getting acquainted with the platform, the user can first pay attention to well-aimed headings and thus understand the navigation, and then move on to concise and simple texts.
The accessible content of each page allows the user to quickly understand the subject of the site, easily understand the conditions and benefits, increase confidence in the company and use outstaffing services.
Interface coding
Where design ends, front-end development begins.
HTML, CSS and JavaScript are the three pillars of the front-end on which the user interface stands. With the help of these languages, we have turned design layouts into a tangible web product.
In order to simplify and structure the code, we used a kind of CSS extension — the Sass preprocessor scripting language and its SCSS syntax. And to insure the code from errors and make the site work properly, we were helped by the Git (Global Information Tracker) version control system.
However, this is not all. The front-end development was based on the Vue.js JavaScript framework, as well as the Nuxt.js Vue.js framework. These technologies allow you to create powerful web applications for Vue.js, including Alibaba, GitLab, 9Gag, and now the IOD website.
In addition, in the development of the client part of the platform, we used such libraries as:
- Vuex — for managing the state and storing site data.
- Vue router — to sync the site URL with the rendered web page.
- vuejs-paginate — for paginating the site.
- vue-click-outside — to respond to clicks outside the interface element (in our case, this is a dialog box with an application form):
- nuxt/i18n — to adapt the application to the user’s language.
- cookie-universal-nuxt — for setting, receiving and deleting cookies.
- nuxtjs/svg-sprite — for uploading SVG files to site pages on Nuxt.js.
- nuxt-ssr-screen-size — to control the screen size between responsive and desktop versions.
- v-scroll-lock — to block the scrolling of the site page when the modal window is open:
- Swiper — to implement a touch slider.
Thanks to the Nuxt Sitemap module, we have created a sitemap, an important document in terms of SEO. It contains a list of all web pages and helps search bots crawl the site.
Animation
Animation continues to be one of the top trends in web development. In our works we use unobtrusive effects, but in this project we have relied on a special dimensionality.
The minimalistic cursor and the smooth appearance of each element when scrolling slowly guides the user through the pages to properly introduce the team, conditions and benefits. Such animation, as if grabbing the sleeve, allows the client to avoid mistakes and make the right choice, thereby arousing interest and trust. In addition, the use of animation confirms the innovativeness of the service and the fact that the visitor is dealing with an IT company.
To create animations, we used the GSAP (GreenSock Animation Platform) JavaScript library, in particular, and for the smooth appearance of blocks and lines separating content:
Animation Cursor
The sliding decorative cursor in the form of an outline circle enlarges and changes color when hovering over links. This effect was implemented using JavaScript and a linear interpolation function:
Animation on hover
The color change effect on hover increases user engagement and allows them to focus on the content inside the cards:
Slider effect
When you hover over a photo, a slider effect appears and calls up a card with brief information about the specialist, and when clicking on it, the user goes to a separate page with a detailed resume. We implemented this effect using CSS:
Ticker effect
We have already talked about this graphic technique that has been attracting the attention of users since the good old 90s. And again, the ticker broke not only into web design trends, but also into our new IOD project. We implemented the ticker effect using the vue-marquee-text-component library and thus increased the interactivity of the site:
Responsiveness
We have completely taken control of the design and adapted the layouts so that the site looks organic on the screen of any type of device. Sometimes adaptivity requires simplification or even cutting off secondary blocks or animations. However, in this project, we managed to keep all the elements and animation effects.
As a result, we rebuilt the blocks in such a way as to correctly convey the meaning and not violate the logic of the site. In addition, each item is large and clickable, and along with the competent placement of elements, it allows you to effortlessly switch between items and conveniently explore all the content, whatever the size of the display.
A harmonious design responsive to mobile devices is a must have for any commercial site, because more than half of the world’s users access web services from smartphones.
Site functionality
Each block and element on the site must obey the user and properly perform its function. Our back-end developer worked hard on this task.
Website admin panel
The admin panel of the site is provided by Laravel Nova from Laravel developers. It has an attractive and understandable panel with convenient content management due to customization:
Laravel Nova Packages
Laravel Nova has a huge number of plugins that extend its functionality. So, in this project we used the following packages:
- laravel/telescope — for debugging the Laravel framework and monitoring site performance.
- protonemedia/laravel-cross-eloquent-search — for searching across multiple site models.
- classic-o/nova-media-library — to manage media files.
- digitalcloud/multilingual-nova — to switch the site language.
- dillingham/nova-attach-many — for easy editing of linked models.
eminiarts/nova-tabs – for grouping parts and relationships into tabs. - optimistdigital/nova-multiselect-field — to add multiselect to the arsenal of Nova fields.
- optimistdigital/nova-sortable — for reordering models using drag and drop.
- whitecube/nova-flexible-content — for flexible generation of content blocks.
- wehaa/inline-boolean-field-update — for filling and updating checkbox fields online.
waynestate/nova-ckeditor4-field – for editing text areas.
Database
After installing all the plugins, we started creating a complex client-server site architecture – a database and the modules necessary for the site:
- Catalog of specialists with filters. In order for the client to see not only a beautiful, but also a fast-working search filter, we have done serious work and competently structured a huge database with a variety of types of relationships (one-to-many and many-to-many). The most difficult was the implementation of the links «specialist — specialization», «specialist — experience» and «specialist — technology» (many to many). As a result, the site’s admin panel now has the ability to easily and quickly create new pages, manage specialists’ data, and associate a specialist with a profession, specialization, experience, technology, and English level.
- Static pages. We have created the About us, Contacts and Teams pages, as well as set up content management through the site admin panel.
- Teams. In the admin panel of the site, you can create and manage teams, in particular, add and combine specialists into groups.
- The main page is implemented with a dynamic display of specialists, a mini-catalog and a block with IT teams.
- SEO module. We added SEO data to all pages of the site and implemented an SEO page generator for the catalog with filters. All filter combinations in the directory have unique automatically generated SEO data: slug, title and description.
- Forms. We have implemented a simple and convenient form submission, as a result of which the reception of data from forms is carried out in one form, which can be easily accessed through the admin panel.
Summary
Competent design, high-quality content, modern animation and high functionality — this is the result we expected. Such a site of an outstaffing company is able to impress not only with its design, content and speed, but also with its efficiency.
