PromShyna

E-commerceRedesignUI/UXLogoResponsive design

An online store for PromShyna, a shop in Ivano-Frankivsk that sells tires and wheels for special machinery, such as loaders, excavators, forklifts, tractors and trucks, and delivers across Ukraine.

My role

Designer

Logo redesign
Home, category and product pages
Cart, checkout and delivery pages
Blog, contacts and 404 pages
Phone layouts

Team

I was the only designer and worked directly with the store’s owner. Their developers built the site.

Store pages

From search to delivery

The six pages a buyer goes through to order a tire, in the order they see them.

Home page

The home page is called Special Tire Hypermarket and starts with a filter, so a buyer can search by size or category before anything else. Below it are a slider with the catalog categories, best sellers with a cart button on each card, manufacturer logos and a short text about the store.

Filter: Inner diameter, category, size, manufacturer, price from and to
Header: Delivery phone, logo, menu, search and cart with a counter

Category slider: the arrow is clicked and the cards for truck wheels, wheels and forklift tires slide over

Category page

A category opens with a breadcrumb and four filters for the tire size. Products sit four to a row, each with a name, a short description, the price and a cart button. The last card loads more products, and page numbers sit under the grid. A text about the store closes the page.

Filters: Tire size, seat diameter, profile width, profile height
Product card: Photo, name, description, price in hryvnias, cart button

Truck wheels category: the breadcrumb, four filter menus and the first row of products, with the pointer moving over the cards

Category page continued: four more rows of tires, wheels and oil canisters, a Show more card, page numbers up to 874, a text about the store next to a yellow dump truck, and the footer

Product page

A large photo sits next to the name and the specs. Under them are a short description, the price and the cart button. Once the item is added, the button reads In cart and has a cross to take it out again. Similar products follow under the card.

Specs: Size, model, ply rating, country, tire type, inner diameter

Cart

Each item is a row with its photo and specs, the price, a quantity menu, the sum and a delete icon. The last row has the total, a checkout button and a link back to the store.

Checkout

The store sells to companies as well as private buyers, so the order form has two tabs, Private person and Company. The company tab adds fields for the legal address, tax number, bank and account number. The order list and the total stay next to the form.

Company tab: Company name, contact name, delivery address, legal address, email, tax number, bank, account, phone, message

Checkout page with the Company tab open: a column of form fields on the left and the three ordered items with prices on the right, and an Order button with the total under the form

Delivery

Payment and delivery are explained in two columns. Below them is a map of Ukraine with pins on the cities, and the four steps from order to receipt, drawn next to a forklift carrying a stack of tires.

Steps: Order, processing, delivery, receipt

Delivery page: Payment and Delivery text columns, a dotted map of Ukraine with orange pins, four numbered steps and an orange forklift carrying tires, and the footer

Responsive

Phone layouts

On phones the menu turns into a button next to the logo, and search and the cart share one line under it. The filter fields stack in one column, the category cards scroll sideways, and product cards show one at a time.