Custom e-commerce solution and a CRM system for the streetwear clothing brand HH Wear

HH Wear
Project type
E-commerce website with a custom CRM for both retail and wholesale management
Technologies used
Laravel, Vue.js, Tailwind CSS, Laravel Livewire, Alpine.js, MySQL, NGINX

Project description

Work on this project spans over several years. I've been the sole developer of all the online functionality for HH Wear's business since 2014. Back in the day, HH Wear started as a simple static website with an integrated Ecwid online shopping solution. Then, in 2017, I created the first revision of its own custom e-commerce platform on Laravel, ditching the 3rd-party integrations completely.

HH Wear's platform was growing and evolving ever since. It went through a few transformations in terms of technology and UI design, and, today, it stands on these main pillars:

  • Brand's public website with an e-commerce solution
  • Private area for authenticated users
  • Invite-based access to a wholesale marketplace for businesses
  • CRM system for managing retail and wholesale sales and customers

This tool set allows the brand owners to keep their business autonomous and minimize the risks and expenses of integrating with the 3rd-party apps. The whole system is user-friendly and easy to use, and it makes for a positive, seamless experience for the customers and wholesale business partners.

Creating the online store

Every build of the HH Wear's custom online platform was made on the notorious Laravel PHP framework. The most important fixes and improvements were targeting the usability aspects and the CRM functionality. Thanks to Vue.js, Alpine.js, and Laravel Livewire, the results were pretty solid, if I may say so myself.

I was always setting the convenience, performance, and the ease of usage regardless of the device as top priorities, in terms of UI & UX. For that, I've designed and built a completely custom user interface that reflects the specifics of the brand and its target audience: no bloat, unisex clothing, no useless generic functionality, and focus on the artwork.

Simple and easy to navigate catalogue that performs really well

The users should be able to navigate the website quickly and find the products they're looking for as soon as possible. The product cards should also be well optimized, load fast, and provide all the necessary information at a glance.

To achieve that, I mixed some of the Redis caching with optimized database queries, and I've set up the automated image compression for the product images along with lazy loading.

The store catalogue is reasonably paginated by 12 products per page, speeding up the page load and minimizing the amount of database queries and server requests.

I've also added a minimalist filtering and search system to simplify the navigation for the customers looking for something particular.

The project once offered the ability to filter products by color, too, but, a few years back, the owners decided to focus on producing only the clothing with either white or black main color, so we disabled the color filter. Also, HH Wear doesn't segregate its products by gender, meaning, it's all unisex clothing, so we don't have the gender filter either.

The efficient minimalism in product card design

I designed the product cards' layout to be minimalistic yet informative and convenient. This is a single brand retail store with the t-shirts being the top-priority type of products, so it doesn't make much sense to bloat the product cards with a "related products" block, etc. It's not a marketplace, and the vast majority of paid orders ends up with 1-2 products purchased.

Visually, I gave the priority to the price and the availability of each size. The product size block is interactive and tells the user if the selected size of this product is in stock or running out. There's also an individual measures table for each product, as the sizes of each product may vary.

All the interactivity in the product card layout is done using the beautiful Laravel Livewire framework made by incredibly talented developer Caleb Porzio.

Cart and checkout process

Just like the rest of the website, the cart is also minimalistic and straightforward. You can change the quantity of a product, enter a promo code to be redeemed at checkout, but there's also one neat dynamic thing I really like.

HH Wear decided to implement the limited discount system that temporarily enables certain discount after user's full-price products total reaches a certain sum, and it's calculated dynamically, always showing the user the exact amount of money this purchase will cost them.

There's also a global personal discount system, offering discounts to users that have a purchase history with a paid total that is more or equal to the discount's tier cap. It's also calculated dynamically, and, if the global discount competes with a temporary limited discount, the larger one takes precedence.

But if the user is trying to redeem a coupon, it will always be used instead since it's a conscious decision by them. To the actual user it's all just a simple, guided process with automated calculations.

The checkout process is done as a really straightforward multistep form. Select the general shipping direction (zone), choose a shipping method, if there are multiple available, or select the local region/state, then just enter the shipping details, and confirm your order.

The customer should not be distracted at this point, and they don't need to guess or think too much. It's not a quiz, we need them to arrive at a confirmation as painlessly and easy as possible. That's why the multistep form is adaptive in what it shows the customer, depending on the zone and shipping method they select. What can be automated there, should be automated.

Custom CRM system to keep things running

HH Wear started as an online-only business. On its path, it expanded into offline retail as well, opening an offline store in Moscow. But the heart of the business is still its online CRM that allows to manage online and offline retail, as well as the wholesale orders and clients.

I built this CRM as Vue-based SPA, standing on top of a Laravel backend, and running Vuex and Vue-Router under the hood. It's designed to carry the burden of routine sales micromanagement and automating everything that can be automated: inventory management, transactional mail, discounts, customer loyalty programs, and more...

HH Wear as a business consists of 2 people, so the CRM enhances their workflow, letting them be efficient in managing the business and shipping the purchased products, while needing to only supervise the system and not micromanage it.

Tailored to the flow of a particular business

This CRM is a first-party solution, and that means no external limitations of a 3rd-party system in development. With projects like that, you can just build whatever suits the business, the client, and their workflow best.

Building it as an SPA with Vue, on top of a Laravel backend, I could create exactly the functionality the client needed, and in a way that they would benefit from the most. Write a specific component, keep the UI consistent with Tailwind CSS, add an API endpoint, if the need be. Rinse and repeat. But with a complete freedom to do your best and create the tools that would enhance the business operation.

As a result, I created a robust control system that offers a seamless and streamlined user experience for my clients, helping them complete the routine tasks in the shortest amount of time. It's especially valuable when you're running a small yet popular e-commerce business that needs to process hundreds of orders regularly.