Awwwards
 
 
 
 
 

Ozone.bg

Ozone header

Тип на проекта:

Онлайн магазин

Извършени услуги:

Уеб дизайн,
UI/UX

Клиент:

Ozone е известен български бранд онлайн магазин за забавления и свободно време. Техния основен тип продукти са компютърни игри и компоненти, но имат също много играчки, пъзели, джаджи и т.н. Проекта е реализирам по време на съвместната ми работа със Stenik Group

ВИЖ ОНЛАЙН

Цели на проекта

Озоне имаше нужда от нов облик, който да е в крак с новите дизайн тенденции. Разбира се, беше голямо предизвикателство да направя редизайн на сайта по такъв начин, че множеството потребители посещаващи го всеки ден, да не си помислят че се намират на страницата на тотално различен бранд. За това и имаше някои ограничения, като използването на определени познати на аудиторията шрифтове. Друго нещо върху което помислихме, е как да акцентираме на огромното количество категории още на начална страница. Не на последно място - листинг страницата трябваше да съдържа доста продукти на един ред както и много call-to-action бутони.

Ozone Goals
01

Решенията

1 / 6
  • Ozone listing page

    One of the big challenges in this project was to fit 5 products in a row, but mantain 1280px width of the grid, so that the layout looks same on small laptops' resolution too. The solution was to use icons with no text for call-to-action buttons, as they are easily recognized e-commerce symbols. Also everything in the product box was left-aligned thus using the space optimally. Throughout the website there had to be an option for background banner, so we had to design the main content in a way that background could show up more from top and sides on bigger resolutions.

  • Ozone.bg details page.

    Product details page is very rich in content and some decisions are taken because of this fact. For example the buy box is emphasized on the right because of many additional actions and buttons, but also because product description and attributes take a lot of space thus pushing the box further down. Displaying of the product variations was made with clickable button-like options, instead of standart dropdown and in this way user can see all of them at a glance. Having a lot of games and movies products on the site, the full description part had to include graphics for retaining user interest. A Z-pattern was used for displaying the content and right after that the attributes and reviews are included. Instead of using tabs, everything is listed so the user won't miss important info.

  • Ozone Megamenu

    Having a huge amount of categories, we had to implement a megamenu. We used thin icons for further differentiating of main categories, and then column separation for the next level. Adding a visual in the right-bottom corner is also a nice way to make the menu more memorable.

  • Ozone - My account page

    In the my account's page, I used different layout for the left navigation so it's more prominent. Again using icons for actions and good alignment of elements were the key for a good delivery of information.

Ozone - All Screens