Redesign of eCommerce on WordPress / Woocommerce
About the project
Back in 2014, we developed the «InterPresent» online store, which sells souvenirs. Throughout this time, our team has been supporting the project, introducing new functionality and working on its promotion. As a result, the customer saw an impressive growth in both traffic and profits of the online store every year.
However, over the past 7 years, the design of the site has become visually outdated and it no longer meets the needs of the audience. In order to increase conversion and improve behavioral factors, a decision was made to carry out a complete redesign.
Redesign features
We created the previous version of the design from scratch and in accordance with the corporate style of the organization. This time was no exception. Our designer has retained the brand colors and familiar navigation, while completely updating the visual component. This approach will keep regular customers who are accustomed to a certain arrangement of elements.
Before work began, the main page looked like this:
The new version of the design combines compactness and a sense of space. The site began to occupy the entire width of the screen, and the number of elements of control and navigation was significantly reduced. The product catalog and the search field were moved to the site header, while the header itself began to take up less vertical space. We’ve also updated banner ads to match the new style: they’ve got much wider, which makes them stand out and look much more attractive.
This is what the main page looks like after the redesign:
The product catalog has also undergone significant changes. The page has become visually cleaner: the list of categories has ceased to focus on itself, and retail prices on the product card are highlighted more clearly. The product grid now fits 3 items in a row, which allows you to display more products on one screen. And although there is more information, the page is perceived much easier.
Product page
Since the list of categories has been moved to the header of the site, most of the screen is occupied by a product photo. In this regard, the possibility of enlarging the image was abolished: it already occupies almost the entire screen in height.
Price information has become much easier to perceive. In the old version of the site, several accents were placed to the right of the product at once, which made the page look noisy and the visitor’s attention was distracted . The new design assumes the main emphasis on the retail price and a more logical division of semantic blocks.
The list of similar products is now presented as a slider. This decision allowed us to make the page more compact and at the same time place more products in the carousel.
Cart and Checkout
In the previous version of the site, the shopping cart was implemented as a separate page. It displayed a list of purchases, and under it, in addition to the total amount of the order, there were 4 accent buttons at once.
We have significantly redesigned and simplified the viewing of the contents of the cart: now it is presented in the form of a pop-up menu available on any page. The list of products is displayed on the left, and on the right there is only a field for entering a coupon and a checkout button.
Checkout also looks much cleaner:
- annoying spacers removed for unregistered users;
- more visual separation of logical parts;
- the total cost and order management buttons are highlighted in a separate column.
Information pages
Information pages have received new ways of visual storytelling.
Previously, all information was displayed in solid text, and the formatting included only numbered lists and highlighting in red. The new design features different fonts and text sizes, illustrations for each section, and a FAQ widget to explain key questions.
The new presentation has made the perception of content more accessible, and the page no longer gives the impression of a massive canvas of text.
Responsiveness
Based on the trends of recent years, most retail customers will visit the site from a mobile device. This means that it is very important that the site is responsive, maintaining an attractive appearance and rich functionality on mobile devices.
The site header has undergone major changes. Previously, the main area was occupied by a banner, and the menu button and phone number were pushed into one line at the top. Now the header is mainly functional and contains:
- logo;
- hamburger menu with nested info pages and contacts;
- a separate menu with a catalog of goods;
- cart
- product search field.
At the same time, it began to take up less space!
The remaining pages of the site are fully consistent with the desktop version. Functional blocks adapt to the screen size, and on pages with two columns, the content is rearranged and presented in a sequential manner.
The result
The combination of continuity and a fresh look can be considered the main success of the redesign. The advantage of the old version of the site was the navigation and the overall structure, which remained intact. However, the visual has been completely updated: a brighter color scheme, a compact interface, and an efficient presentation of information.
All these components are designed not only to create a favorable impression, but also to significantly increase the conversion rate. We look forward to the results.
