DESIGN AND LAYOUT
OF THE ONLINE STORE
OF CONTACT LENSES
ADRIA

Task

Create a website with a rich visual range, a simple and convenient purchase system and a flexible interface for selecting lenses.

31,4%
The total number of purchases
increased by
93%
The average income of a visit
increased by
40,8%
Total revenue
increased by
49%
For visitors who bought
the product, increased by
3.77 to 4.7 sec
increased viewing depth
from 40 sec
the average time on the site has increased
4 months
project development time
The development includes the stages of analytics, mockups, design, layout

Website
development

Analytics

As a result of the analysis of Yandex.Metrica and Google Analytics data

We have identified
the main requests of
the site users
Determined the popularity
of individual sections,
pages and products
Analyzed traffic sources
and character of visitors
Discovered the strengths
and weaknesses of
the existing site
69%
mobile traffic

Studying groups dedicated
to contact lenses on social networks brought us closer to understanding the audience of the resource. We learned what is important to users when buying, what doubts
and difficulties most often occur when purchasing
and selecting lenses.

69% of the traffic came from smartphones, so we suggested that the client use the Mobile First method, starting with the development of a lightweight website with a user-friendly interface optimized for mobile devices.

Moodboard

Before the start of the design stage, the designer created a general
stylistic guide, where he reflected the key elements and stylistics of the future product.

Thanks to this, even before the start of work, the ux/ui designer understood how
the prototypes he created would look like in the end, after the design stage.
This allowed the specialist to design, negating possible conflicts between
the prototype and design layouts.

Stage results

The main product of the company is a wide range of colored contact lenses. To emphasize the originality of the images that can be created with their help, it was decided to use the concept of "selling through an image" — all colored lenses will be presented on the site not with photos of the product or eyes in lenses, but with photos of bright images of models in colored lenses.

UX/UI

We examined the target groups of visitors to the resource and formed character portraits based on them. Systematizing the data obtained at this and the previous stage of development, we have formed the optimal structure of the site, allowing the user to comfortably indulge in online shopping, get acquainted with the assortment, read news in a blog or select lenses.

The mechanism
of selection
of colored lenses

There are different types of colored lenses: both slightly enhancing the color of the eyes, and
radically changing — for each type, the logic of the steps in the selection will be different. We have thought out a logic that takes into account all possible scenarios when selecting different types of lenses, and fixed it in the form of a diagram.

0

interactive page prototypes
and color lens selection scheme

Design

Databased —
based on data from analytics systems
Mobile First —
focus on convenience for smartphones
Сontent based —
practicality and realism

In the design concept, we embodied the indicated
wishes and preferences: an abundance of photos in the goods,
minimalism, the use of the company's branded colors. When the ideas turned out to be embodied
in the form of a ready-made layout, the client was able to verbalize his wishes more precisely
, which became
the reason for creating the second version of the
design concept.

For her, we took the best of the first option,
including the general style, and made it a little more
"practical", adding clearer navigation
and abandoning other visually complex
elements that could cause difficulties
from users.

Adaptive

months
of working
screen
resolution
page loyouts
of future website

Layout

Even at the design stage, we laid the foundation for fast and high—quality layout - using the bootstrap grid allows you to optimize the development of code for adaptive sites.

The layout was done without wasting time and resources, and the site is equally convenient and pleasant to use from any device, be it a monitor with a resolution of 1900px or a smartphone.

Bootstrap
adaptive pages
created