Migration Case Study

Introducing Headless Approach & PWA for Better Performance

Brand:Appskins
Industries:Electronics & gadgets
Region:Germany
Client’s URL:
About client
Appskins is an online store, which offers a wide selection of stylish and light smartphone and tablet cases that stand out from the crowd. High quality, special fitting, and functionality have been the main principles of the brand. Appskins cases are thinner than any other case.
  • 2010

    date
    of establishment

  • 97%

    customer
    satisfaction

  • 8

    product
    categories

  • 240+

    quality
    products

Challenges

The client reached out to us with the goal to have their Magento 1 store supported, which we provided for several months in a row.

They had been working with our agency for a while and, at some point, decided to focus on the site’s performance. Achieving a fast response time was our main objective during the project development.

As the proportion of users on mobile devices far exceeds those who visit the website from a desktop or tablet, we also had to pay special attention to speed on smartphones and improve it.

The client asked us to come up with an appropriate development solution that could meet the needs of the business in the long term.

Want to work with us?

Leave your contact details and we’ll get back to you as soon as possible

Team

  • Project Manager
  • Front-end Tech Lead
  • 2 Front-End Developers
  • Back-end Tech Lead
  • QA Engineer
  • 2 Back-End Developers

Duration

The whole project development process took three months.

Solutions

We carried out an initial analysis of the client’s system, Magento 1, and its capabilities. Magento 1 was quite outdated and needed improvements in terms of performance, as the main task of the client was to speed up the current website.

These are the main reasons why we proposed to the client to move to Magento 2. The client also was going to redesign the website, which would be logical to combine with the store migration, thereby killing two birds with one stone.

However, the migration to Magento 2 is still not enough for dramatic changes and meeting the client’s expectations for outstanding performance. To derive the most out of it, and take full advantage of the platform’s capabilities, we decided to go the extra mile and introduce a headless approach.

With that in mind, we developed the custom headless Vue.js solution, which meets specific client needs and goals, works fast and offers better website performance.

As a result of the implementation, the website speed on mobile devices surpassed the default Magento 2 speed by several times.

As soon as we received a sign-off from the client on our further strategic and tactical actions, we started working on the project specification document. The document covered the main aspects of the project, such as overall expectations, timeline and budget to be on the same page with the client.

Development

We performed a vast migration from Magento 1 to Magento 2, which involves creating a website from scratch on a new platform because of the significant differences in platform architectures.

It covered the moving of different kinds of data — customer, orders, product and category and promo codes, etc.

Headless approach

uses different technologies for the front-end and back-end of your online store to ensure enormous flexibility, scalability and seamless user experience.

Vue.js

is a progressive JavaScript framework for creating user interfaces. In conjunction with Magento, it allows going headless, where Vue.js is responsible for the front-end operations.

Project specification document

is a comprehensive description of objectives for a development project. It contains all the goals, functionality and details required for a development team to fulfill the vision of the client.

Aside from the integration with the custom Vue.js solution, we also connected:

  • ✓ payment gateways (Stripe, Paypal, Amazon Payment)
  • ✓ shipping methods (Deutsche Post Internetmarke, DHL)
  • ✓ 10+ extensions to extend the native power of the platform

Features

One of the most exciting features of the store is the fact that all 240+ items are product configurators that a user can create on the fly. Customers just go through a few steps, choose from several offered options and see what the result is.

Next to the product image, which is generated based on the selected options, a user immediately sees the corresponding price with tax, delivery time and gets an opportunity to instantly add a created product to the cart.

Product configurator (builder)

is a tool that allows adapting and changing components and attributes of a product, which finally meets the needs and expectations of a customer as best as possible.

Result

We executed a smooth migration from Magento 1 to Magento 2 based on our previous experience with migrations and implemented a headless approach with Vue.js to deliver a quick operating website. We also performed a redesign with a goal to improve overall user experience and increase conversions, maintained SEO-friendliness of the website with all the complexity of the custom solution implemented and reached the client’s timeline expectations.

Implementations
  • Headless commerce
  • Migration to Magento 2
  • Product configurator
  • Vue.js