Eyerim.com: UX case study

How we increased the quality of an eCommerce solution by making the page faster and improving the UX & UI at the same time.

HatimeriaforHatimeria

Overview

Eyerim.com is an online store that specializes in the sale of spectacles in 14 countries. It has over 75 brands in its assortment and is visited by over 500,000 users monthly.

Eyerim.com has decided to entrust the Hatimeria team with the improvement of the website usability, increasing its speed of operation and numerous development projects.

The team and internal process

Eyerim is our long term customer - we started few years ago as pure development partner on early Eyerim's days and during last few years we were honoured to see and participate in this amazing leading glass industry brand creation.

Our team consists of both Frontend and Backend developers, as well as devOps engineers, UX specialist, System Administrators, and QA Engineers. Thanks to accumulating all types of skills at the same office, we are able to not just develop new features - but cooperate internally to be actively involved in Eyerim growth, by constantly improving the quality of Eyerim's eCommerce solution.

The involvement of various teams means also that we are able to make the client more aware of what can be done better so that his store will sell more while improving the comfort of using the store.

Hatimeria

UX & UI

Hatimeria

DevOps improvements

Hatimeria

Testing

The UX process

Before we have started the work, we prepared an initial action plan.

Research

Hatimeria

Data Analysis

Hatimeria

Defininfg problems

Hatimeria

Solutions

Research

In the first step, we focused on analysing our client's direct online competitors - the similar online stores. We diagnosed their performance in the areas of UI, UX and users flow on desktops and mobile devices.

Data Analysis

Next, we analyzed all kinds of data related to the users, the way they move on the site, also taking into account how they move on desktops and mobile devices.

We used four tools to conduct an analysis.

Based on the qualitative data obtained from Hotjar, we could learn where the users are encountering problems due to badly prepared interface or about programming errors that prevented access to the shopping cart. Hotjar also allowed us to review the common behaviour of users.

The quantitative data provided by Google Analytics has enabled us to determine the bounce rate and to obtain information on devices used to browse products on eyerim.com. It also provided very informative demographic data.

Hatimeria's QA engineers have been also monitoring basic indicators of well performing eCommerce system, using NewRelic and Google Analytics for last few months. Collating data gathered by them with UX team conclusions, allowed us to prepare more complete gameplan and prioritize goals.

Defining problems

After pre-interviews with users, we have defined a few main problems:

Filters on mobile devices were not intuitive.

The product information on the product card was named differently in the shopping cart.

Users wanted to be able to check how the product looks like at different stages of the shopping path.

Then we conducted an expert analysis which showed us more issues to solve:

Long page loading time and server response.

No descriptions inside input and select fields.

CTA hidden below the fold.

Users having a problem with going back to shopping after removing the product from the cart.

People escaping the cart after clicking on the product photo in the basket.

The solution

Knowing the full spectrum of problems and how users move on the website, we started to design the solutions with the following model.

Defining persona

Hatimeria

UX & UI Design

Hatimeria

DevOps improvements

Hatimeria

Testing

Persona

We wanted to learn what kind of users visit the website. This is why we decided to build a persona -a fictional character that represents a user type. It helped us to reflect and understand actions of the real users.We were able to define a proto-person in a short time thanks to the client who provided us with a wide range of analytical data and shared his feedback.

Marika

Age range: 18-24 (Females mostly)


Motivators to buy:

Discounts, Free shipping, Return time

Looking for:

Modern sunglasses, Good looking corrective glasses

Kira / Stan

Age range: 25-34 (Females and Males)


Motivators to buy:

Unique glasses, Free shipping

Looking for:

Modern sunglasses, Corrective glasses

Andil

Age range: 35-44 (Males mostly)


Motivators to buy:

Trusted store, Return time

Looking for:

Unusual sunglasses, Elegant corrective glasses

UX & UI Design

At the start point of UX's work, we gathered all problems in one document and divided them into the tasks. In order to ensure prioritization and efficency, we decided to prioritize the tasks using the MoScoW method. At the beginning of UX's work, we collected all problems in the form of tasks in one document. In order to make the prioritization and efficiently plan the work, we decided to prioritize the tasks using the MoScoW method.

Once we had a ready list of error and the biggest priorities, we started to design solutions. Below we will present some of them:

Most of the changes we have made to mobile version had an impact on the desktop approach. Thanks to the optimization, we have reduced the unnecessary margins to receive a more compact and user-friendly design. The improved website was well-received by the clients.

DevOps improvements

Simultaneously with the work of the UX & UI team, in the first in the first phase of their work our DevOps team was analyzing the data obtained in the first phase from Blackfire and New Relic.

They have identified the bottlenecks and in cooperation with server administrators, we decided on how to remove them. The most important steps that contributed to increasing efficiency of the eyerim.com store were:

  • implementation of ElasticSearch to work with and speed up category pages
  • SQL queries efficiency optimization on a category, product and home page
  • improvement of cache usage to relieve the database work
  • improvement of frontend (images, CSS, compression) according to Google specialists
  • optimization of indexers and other background jobs that caused errors disrupting store’s activity
  • removing unnecessary records from the database to make it "lighter"
  • general server clean up to remove unnecessary files slowing down the IO operations
  • general clean up of unnecessary or error-causing js script decreasing page loading time
  • removing render-blocking JS and CSS in above-the-fold content
  • the general review of web transactions, identifying suspected/unnecessary traffic and reducing it

In addition, we have eliminated many errors that did not have an influence on its speed but were impacting its availability, e.g.: Server crashes and Server Unavailability.

The work we carried out brought positive changes in:

  • page load
  • response time
  • server uptime

The day and a moment we applied the improvements:

As it can be seen in the New Relic chart, we have improved server response time and referral to the user from 800-1000ms to 250-300ms.

Transaction time/performance:

As you can see in the diagram, the change was really significant in the context of the web transaction time (server response time).

Conversion rate vs loading time:

We recorded a conversion rate increase by approximately 30%, comparing the second quarter of 2017 (1.45%) with the second quarter of 2018 (1.87%). We analyze the first quarter of 2018 (1.69%) with the second quarter, and we see a significant increase of ~ 12% as well.

The increase in conversion is strongly connected with the decrease in page load time and server response time. The chart below shows how the page loading time increased between the first and the second quarter of 2018.

As you can see, we've accelerated page load time and page response time by 1.57s and 0.449s, to a 12% increase in conversion.

As you can see, we have accelerated page load time and page response time by 1.57 seconds and 0.449 seconds, which connected with Marketing team efforts contributed to a 12% increase in conversion.

On top of that, in the range from Q1 to Q3 we have observed an increase in the number of visits by 40%.

Testing

At each stage of implementing changes, our QA team ensured that the changes we implement were perfect in every respect.

QA team has not only been focusing on performing functional tests, but also on deeply understanding the business goals. By constantly monitoring Eyerim's performance (i.e. page load time, conversion rate, bounce rate), we were able to, apart from checking the functionalities, compare new results with historic data. That allowed us to assess the actual impact of our changes on the whole Eyerim's system.

Conclusion

Thanks to UX & UI teams, DevOps, Developers and QA, we were able to react to the problems and improve the site on many many levels.