Amers E-commerce

Amers is a premium furniture manufacturing company with 20+ years experience in the industry

coder desktop
coder mobile 1
coder mobile 2
coder mobile 3

Problem

Price for the sofa in the premium segment can reach $6,000.

Not everyone will be willing to complete such large transaction online. The reasons that web design and development team can alleviate include:

  • unknown and not trusted resource;
  • not user friendly UX/UI.
coder mobile 3
coder mobile 3

The Coder team has been tasked with the goal of making the browsing and transaction process smooth while every interaction adds to the brand and website trustworthiness

Scope of the Project

  • UI/UX design for easy navigation and transaction process;
  • Image-based modeling and rendering;
  • Dedicated mobile version of the website;
  • Back-end admin panel for CMS management;
  • Fast load times across all devices in accordance with Google Core Web Vitals;
  • Module to change model color and material depending on the selection;
  • Loyalty program;
  • Bank integration for payment installments.

Fonts and brand colors and guidelines

Fonts & palette

Аа

Montserrat SemiBold

Montserrat Medium

Montserrat Regular

  • #F7F7F7
  • #000000
  • #877271
  • #7F7F7F
  • #E5E5E5

UI/UX design process

The design team conducted competitive research to analyze functionality and tactics used on the website to convert visitors into customers.

Below is the explanation of approach and solutions provided to the client to reach to their conversion goals

Catalogue

Catalogue
Catalogue
Catalogue
Catalogue
Catalogue

Professional Image-based Modeling

Only modeling and rendering allowed us to create crisp high-quality product images. In total, 32 models were created. Each model had 5 materials and each material option had between 10-15 colors.
These models can now be used not only on the website, but during interior design process, brochures, booklets and other marketing materials.

Model

Other companies usually provide 4 images per product. In many cases this number is not sufficient for accurate representation of the product from different angles. Therefore, the decision was made to create 360° images.

360°

360° requires 71 images for 1 model with 1 material and 1 color. Considering that each model has 5 materials and 5-10 colors, it is necessary to create and render thousands of images.

In order to reduce primary server load and increase image load speed, The Coder team has connected AWS server for image storage.

Color and Material Change Functionality

In order to create the most accurate representation of the product, a separate "Material" section was developed that adapts automatically with the color change.

Model Model

Detailed Product Specifications

In order to give user the most accurate representation of the product, we have included product dimensions at various angles.

Additionally, characteristics section contains detailed description and 3D image of all product components to showcase the material and structure of the product.

Model Model

Payment Installments

Considering that the purchase amount is rather large and some users would prefer to have separate credit line, we have partnered with national banks and integrated their APIs to offer payment installment capability giving user an option to pay the amount upfront or pay it over the course of multiple months/years.

Model Model

Loyalty Program

To further entice potential buyers to complete the purchase, the loyalty program was developed and implemented. Our client now offers 3% cashback to all its buyers. Points can be accumulated and applied towards future purchases. Considering large purchase amounts, points stack up quickly and incentivize buyers to make more purchases.

Model Model

Mobile version of the website

One of the priorities was to guarantee smooth and informative experience on mobile devices while organizing a lot of information. This was achieved after implementation of horizontal scroll and auto-scroll that allowed user to interact with the website while maintaining the focus on the most important information

Responsive

responsive
responsive
responsive
responsive
responsive
responsive
responsive
responsive
responsive

Fixed Elements During Scroll

The decision has been made to make certain elements fixed during scroll. This enables user to constantly see the primary information on the screen while materials and color section can be scrolled through.

When this section ends, entire page continues the scroll to the section with the detailed product characteristics.

Services used for data collection, analytics and marketing

Google Annalytics

Google Annalytics

Google Tag Manager

Google Tag Manager

Google Search Sonsole

Google Search Sonsole

Google My Business

Google My Business

Full Story

Full Story

Facebook Pixel

Facebook Pixel

Google Ads

Google Ads

Ahrefs

Ahrefs

Serpstat

Serpstat

Screaming Frog

Screaming Frog

Google MerchantCenter

Google MerchantCenter

SMS Fly

SMS Fly

Technologies used for design and development

  • Figma

  • Adobe Photoshop

  • Adobe Illustrator

  • Java Script

  • HTML

  • Cakephp

  • Sass

  • Autodesk 3ds MAX

  • GitHub

  • AWS

get in touch

Fill out the form and we will get in touch with you right away.