Excerpt.
This case is about how we created and improved the website based on a design layout received from an outsourced designer.
At the beginning of 2018, we started cooperating with . Having worked with third-party designers, they were able to provide us with an original website layout. We implemented the project in full accordance with the design and improved its functions.
Client story.
specializes in the wholesale and retail sale of tiles and provides services for the creation of design projects and the repair work.
At the beginning of our cooperation, the company owned an outdated website that did not meet the requirements and did not correspond to the specifics of its activities.
A little earlier, the company collaborated with designers who developed the layout of the future website in PSD format (Photoshop). Due to certain reasons, like a long development time, the customer decided to find new software developers.
He found important the following:
- Using a ready-made design (it was paid for and met its requirements)
- The identity of the website visual part to the layout
- Turnkey layout with the necessary functions for the website in a short time
Our solution.
This is not the first time we have been working in this format. All our projects were accepted by customers as fully consistent with the tasks set.
We became performers of this project, having developed a turnkey website based on the PSD layouts provided in 2 months. We also added several sections and improved design functions so that the result corresponds to the customer's business objectives.
During HTML coding of the website, we were guided by the well-known Pixel Perfect concept. You can learn about this approach in our Pixel perfect WordPress template development project.
The result.
Home page
The page has the following elements:
- A full-screen slideshow with atmospheric photos of interiors
- Product classifier (catalog by product type: laminate, tile, parquet, vinyl, carpets)
The old version of the home page:
The mockup of the new home page:
Our version of the home page:
Product catalog
For the product catalog, we implemented integration between the website and the Visma Horizon warehouse ERP system. Managers can edit the goods, their quantity, properties and prices in the warehouse application. All changes automatically appear in the Catalog section of the website.
Each of the 5 sections - Tiles, Laminate, Carpets, Parquet, Vinyl - are presented in 3 categories:
- Collections
- Interiors
- Catalog
The old version of the Catalog page
The mockup of the new Catalog page:
Our version of the Catalog page:
Product search filter
The search filter icon is on the left side of the screen.
It can help to choose products according to the following parameters:
- Premise
- Texture
- Price
- Variations
- Wear resistance
- Material
- Surface type
- Anti-skid
- Texture
- Form
- Color
Just as loading collection elements, search filters work dynamically loading data from the Visma Horizon warehouse system. Changes in this application are dynamically displayed on the website.
Landing page
This is a landing page for a target audience. For instance, for contextual advertising. It displays important information about the company for various target audiences – for builders, designers, architects.
The old version of the Landing page
The mockup of the Landing page:
Our version of the landing page:
Contacts page
The page contains contact information, an embed Google Maps widget with a company’s location and a contact form.
The old version of the Contacts page
The mockup of the Contacts page
Our version of the Contacts page:
Summary.
We managed to implement the project during 2 months. The customer received a new website with an original design that exactly matched the layouts.
A feature of this project was the integration of the Visma Horizon warehouse accounting system with the catalog on the website. All the changes can be made in the application: deleting the product, adding new items, changing the description and price. And these updates are automatically displayed on the website.
