DESIGN AND LAYOUT
OF THE ONLINE STORE
OF CONTACT LENSES
the product, increased by
As a result of the analysis of Yandex.Metrica and Google Analytics data
the main requests of
the site users
of individual sections,
pages and products
and character of visitors
and weaknesses of
the existing site
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.
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.
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.
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.
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.
interactive page prototypes
and color lens selection scheme
based on data from analytics systems
focus on convenience for smartphones
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
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
of future website
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.