Development of the Online Store of Spears for Fishing
About the project and task
The Super Spear Shaft site is dedicated to underwater fishing spears and targets the Western market. The client came to us with ready-made layouts for the development of a functional, adaptive and multilingual online store. Did he get what he wanted? Let’s see.
Technological solution
CMS WordPress
So, the client went through the design development stage on their own. The technical implementation of the project depended on us: coding and functionality setup. And the force that made the site work was the WordPress CMS. This is the platform on which 43% of all sites on the Internet operate. And there are many explanations for this:
- high security and performance,
- customizable design and adaptability,
- convenient content management,
- multilinguality and multicurrency,
- SEO-optimization and other opportunities to expand the functionality of the site.
In addition, the engine is completely free and, together with a variety of plugins and integrations, significantly speeds up development, and therefore reduces its cost.
Design and navigation
Main page in dynamics
Going to the main page, the user seems to fall into the depths of the ocean, where the sun’s rays fascinate with their play. This effect is caused by the video used as the background of the main page.
Along with the dynamic background, the marine logo and a spear along the entire screen emphasize the theme of the site and serve as additional reference points for potential customers. Therefore, passionate lovers of spearfishing seem to find themselves in their familiar environment.
The spear at the bottom of the screen also plays the role of a separator, under the line of which we see 3 main sections of the site: «FAQ», «Order now» and «Super Tips & Parts». These and all other sections are hidden in the burger menu, next to which there is a link to your personal account and cart. As you can see, it is almost impossible to get confused on the main page.
But despite all the simplicity, the site has a very unusual effect for an online store. The fact is that the client’s design did not provide for a page indicator, so instead of the banners familiar to users, we implemented a slide change of the main page by scrolling with automatic switching to the next screen after 10 seconds. Each of the slides illustrates the main type of product — spears, supported by text about their benefits.
On one of the slides, we placed the logos of the European Regional Development Fund and EAS, indicating that the Super Spear Shaft project received a grant for international patent protection of sports equipment. When you hover over the logos on the left, a transcript and more detailed information about the grant appear:
Section with goods Order now
Actually, this is the main «showcase» of the online store with the main products spears for spearfishing. Due to the fact that there are few positions on the site, this section fits on one screen. This was also made possible thanks to convenient navigation that allows users to immediately filter products by category. At the exit, the buyer receives the final price and goes to the cart to place an order:
Responsiveness
Thanks to the adaptability of the WordPress CMS engine, the online store is perfectly displayed on all devices. All blocks and elements of the site automatically adapt to any screen size: from smartphones to desktop computers.
The only difference is that the home page slides on the mobile version only scroll when you swipe horizontally.
The reason is that the vertical swipe is not available in the mobile version: it is needed for scrolling, because all the content of the site does not fit on one screen. This is due to the small display of the mobile device. Hence the main rule of adaptive design — readability and convenience above all:
Functionality
Personal Account
The link to the personal account («Log in») is located in the header of the site, and when it is clicked, the user is offered 2 concise forms: for authorization or registration. The forms contain 1-2 text fields (including a credential authentication field) and a login button, as well as a «Remember me» checkbox and a «Forgot your password?»
Getting into the personal account, the client sees a minimalistic interface in the form of a control panel («Dashboard»), where they can easily manage their orders («Orders») and delivery addresses («Addresses»), as well as edit personal data («Account details») and leave the account («Logout»):
Checkout
It is logical that ordering begins with the main showcase of goods Order now. We have already talked about this page and looked at convenient navigation with filters in the form of a spear constructor. However, in order to implement a seemingly simple panel, we had to make an effort and take into account many different variables (class, type of tips, length, diameter and cost). After the user has filtered the products and made theor choice, they click on the button and thereby add the purchases to the basket.
Shopping cart and shipping calculator
To bring shopping to its logical conclusion, the user clicks on the «View cart» link or on the cart button in the right corner of the site menu. On the screen, the user sees an interface with a list, quantity, price and total cost of goods. And not just goods, but along with the amount of delivery.
This was made possible thanks to the built-in calculator («Calculate shipping»), which prompts you to fill in a couple of fields, and then automatically determines the estimated amount of delivery based on the country of the recipient. As a result, the client receives the total cost of the order, consisting of the sum of the goods and delivery:
The cart can be updated («Update cart» button), or you can checkout the added products using the «Proceed to checkout» button and go to the order page.
Billing & Shipping Order Page
When developing the design, our client did not foresee how the checkout page would look like, so we took over this block of the site. The result is a fairly minimalistic page, taking into account the general style of the site:
The page contains an expanded form for filling in data, information about the order, as well as payment method items in the form of a radio buttons widget, which involves choosing one of 3 possible items. After filling in all the fields, the user clicks on the «Proceed to checkout» button and proceeds to pay for the order:
Payment system integration
Online purchases on the site require connection to the payment system. We implemented the e-commerce payment solution using the SEB banking system, as our client already had an account with this bank. After the payment is made, a notification about the completed order is sent to the buyer’s mailbox:
Multilinguality of the site
Initially, the client needed to implement a multilingual site in 3 languages: English, German and Russian. However, it was subsequently decided to leave only English and temporarily hide Russian with the possibility of returning it in the future in a package with German and Italian. As a result, we implemented a language switcher, but due to the lack of translation of the texts in German and Italian, we temporarily hid it.
Results
Thanks to efficient cooperation, the expectations of the client for the development of the online store of accessories for spearfishing were more than justified. We developed the design in full accordance with the templates and brought the site to life with the help of the WordPress engine. The online store is responsive and convenient not only in making purchases for users, but also in managing for the client thanks to a simple and understandable admin panel.