ISV Online
ISV Software Ltd, a subsidiary of Dillistone Group Plc, provides software for recruitment management. Moreover, ISV have been market leaders in online skills testing and training for over 25 years.
We got hired for the job, after we had received direct recommendation from other subsidiary of Dillistone Group Plc - Gated Talent. GT team has been successfully working with us on other project for one year.
Requirements
The purpose of this project was to redesign the website, in order to achieve a modern look and a more intuitive navigation. We also had to keep in mind that basically, most of the previous content had to be migrated. That had a great impact.
Our services included:
- Adobe XD project preparation
- PSD to HTML conversion
- WordPress Custom Theme development
- Cross browser & device testing
Delivery
Pagepro provided four very talented specialists: Joanna (Front-End Developer), Maciej (WordPress/Back-End Developer), Bartosz (Designer) and Marek (Project Manager).
The whole project was managed by two great employees from ISV Software Ltd - Amanda (Managing Director) and Steve (IT Director). The cooperation with them was smooth, especially thanks to clear communication and quick decision making.
- HTML5
- CSS3
- SASS
- WordPress
- ACF Pro
- Underscores
- jQuery
- GULP
- BrowserStack
- JavaScript
- Swiper
- Adobe XD
- ScrollReveal
- Featherlight
Time frame
Whole project took us 8 weeks.
Step 1 MATERIALS GATHERING AND DESIGN PREPARATION
The first step, we needed to gather proper images and information about key objectives for our client, like to make the "Request demo" button more prominent as it was supposed to open dedicated request form.
Secondly, we needed to prepare a fresh design based on the previous version of the website. Hence, we made sure that everything on new templates maintains brand colours.
Once we got precisely described UX/UI functionalities, we prepared well-designed project in Adobe XD. Moving forward, we started with setting up development environments and installing essential tools for the project.
Step 2 Management
After managing the initial design and the description of particular functionalities like Forms, Sliders, Documents uploading, we started with defining scope of work in TeamWork (Project Management Tool). In other words, we divided actions that needed to be taken, into well-described tasks. Depending on the type, each of the created tasks was assigned to proper member of our team.
During the management process, we work in Agile methodology. That helps us with adjusting solutions to every newly encountered obstacle. Moreover, we have divided the project into two stages:
Front-end Development Stage
We always prefer to split front-end development from other phases because it is much faster and has less potential risks of bugs appearing. Especially, when we could use our dedicated tool for HTML&CSS - SASS starter (LibSASSerPlate).
WordPress Development Stage
Once we prepared HTML&CSS + main JavaScript code, we have planned to implement static files into WordPress custom theme.
Step 3 HTML coding
Front-End phase always starts with building Website structure in HTML. We emphasise creating HTML components to be as much reusable as possible. In order to make clean and clear code, we use BEM Methodology to maintain order in project.
BEM Methodology
BEM (Block, Element, Modifier) is an open source technology for developing websites that need to be created quickly and maintained over many years. BEM is used in the front-end development of all Pagepro services.
Step 4 (S)CSS coding
In Pagepro we use SCCS to write styles code, as it allows us to achieve great efficiency and reduces the risk of future issues on different browsers.
Nowadays, features like mixins or variables for colors, sizes and breakpoints are a “must have” standard in Front-End Development. It makes the code reusable and easier to understand for other developers.
Step 5 Responsive version
We always declare Breakpoints values as SCSS variables for different devices that allows us to make them reusable and keep standardization of our templates.
Should we get it done?
Let's talk about you now!
Tell us about your challenge, and let's get the ball rolling.
Step 6 First Q&A Stage
We always conduct comprehensive Q&A phase after delivering complete Front-End code. Most of all, we are making sure that particular website is working properly on different devices and on all modern browsers, including Chrome, FireFox, Safari and Internet Explorer.
As a tool, we use BrowserStack for checking compatibility on multiple desktop and mobile browsers. Moreover, we are using real devices to check website functionalities. At least two devices with iOS, two with Android system and two with Windows Operating System.
Step 7 JavaScript Coding
On isv.online project we kept everything simple. For that reason, regarding to JavaScript programming, we didn’t have to write a lot of fancy code. Instead, we used mainly tools like Swiper, ScrollReveal, Featherlight and jQuery JavaScript library.
Swiper helped us with carousels and sliders, Featherlight with putting youtube video in iframe pop-up on the homepage. Finally, we used jQuery JavaScript library and ScrollReveal for different animations.
Step 8 WORDPRESS DEVELOPMENT
Our WP Developer's first task, was to prepare Underscores WordPress Starter for theme development. He had also used ACF Pro plugin in order to make Custom Fields and make almost everything on the website customizable.
We put emphasis on preparing settings for content management to be intuitive and clear, especially for non-technical user.
Step 9 FINAL Q&A AND UAT
When everything was successfully implemented, we went through the settings with the client and explained how to manage the content. We made sure that everything is clear and meets the client’s needs.
Before live deployment we give client at least one week for checking if the whole content is applied properly.
The whole process of creating the website described above was being made on development environment. Once client is happy with the results and we get his approval, we migrate everything from development environment to production.
Have a similar case? Use our experience!
Talk to our expert and see what we can to do push your project further.
