March 2018
0
0
Case
We have just finished the development of the custom apparel ecommerce, which is a custom wear platform. It mostly provides sportswear and to a certain extend casual clothes. As the website hits the market and receives its initial feedback, we want to share the precious experience about making that sort of platforms.
Custom wear sites are numerous but just a handful of them do things right
The first thing you should know: it’s hard to make the difference. The market abounds with the fashion ecommerce. In the UK the online fashion market will continue to see strong double-digit growth, with the market forecast to increase a further 79% by 2022, reaching just under £29 billion. And by simple googling, you can find tens of not hundreds of wear stores with customization supported within your region and check expectations. Arguably, it’s quite hard to stand out on the market that saturated. The good news is that the most of the stores available either fail or underdeliver experiences for users that want to play with styles and accessories to get a tailored look.
After researching what other stores do, we’ve managed to come up with the major guidelines of how to keep the customization flow in apparel ecommerce platform seamless and friendly.
Keep the interface intuitive and simple
The classical “don’t make me think” rule articulated by Steve Krug is perhaps the most frequently broken one. There are two critical problems we’ve noticed:
- Interfaces treat you as you’re an expert tailor and UI/UX specialist at the same time.
- Interfaces punish for being unprepared for them. Beware!
Let’s get to some examples. (As far as we’re concerned just about interfaces, there aren’t going to be any brands mentioned.)
This website offers to customize shirts, trousers, and jackets. And it’s pretty hard to grasp everything at a glance on the first step, where we have to choose the fabric out of available options.
Too many horizontal panels will take some time to explore. OK, did you actually get that these drop-down menus represent filters to find a specific fabric? Once you’ve figured that out, it’s time to start searching. Perhaps, professional tailors aren’t going to experience any challenges with a search that appeared too deep. We had. And were punished for this. In order to reset filters, you have to untick all your changes or add new ones to actually get results. It’s just easier to scroll and glance over the entire collection ignoring the filter.
When you’re done with fabric, it’s time to choose your style and get lost in panels and nested workflows. The second step has multiple sub-steps inside, and each of them has its own sub-sub-step.
Now we have two panels within a step, one of which looks like a breadcrumbs menu. Don’t comfort yourself. They’re totally static and if you want to switch among them or redo some step, it’s not possible. So how do you go back?
The switching buttons are at the very bottom of the page and - as you can see - the only one sub-step back or ahead is possible.
“It seems that the entire interface yells at you: “Take a phone and call us, you aren’t going to handle it on your own!”
Here’s another example, which isn’t that hardcore to tackle. It’s just reminiscent of video games mechanics where you have to complete multiple objectives on a level and only then you proceed to the next one.
You can’t decide your order of customizations. Follow the fixed steps and try not to forget anything or you won’t be allowed to the next level.
And these difficulties are quite common across various custom wear websites. Many of them are baffling, deterring, and unforgiving. The users have to be highly motivated by other quality services to make it to the end and happily check out.
We tried to make people enjoy their customization flow. First of all, apparel ecommerce platform allows completing all the things in a single environment on a single screen.
You can switch among stages in any order you want. This allows users to see all options available and flexibly adjust the design. We’ve also added the check out the menu to stop customizing and order every time users feel ready to do this. If some steps are missing, the system will leave these design options by default.
The check out is still technically one of the steps, yet it stays divided from the customization process itself, which adds clarity.
Another great thing about the apparel ecommerce platform design is an admin panel. There’re a lot of types of wear in a roster, each having its own customization specifics. With two dynamic panels - steps on the top and options in the bottom - an admin can add steps specific to an item and decide design options within each step.
Also, you can read: How much does it cost to build a website
Let people know what they get
You’ve probably noticed an elephant in the room. Yes, it’s a preview, which differs apparel ecommerce platform from other two examples we’ve shown. Logically enough, as a user customizes wear, results are always apparent. Users can see what they get and will have a tendency to make a purchase as they trust their choice.
Frankly, we’ve managed to found several stores that support clear preview to the items combining that with a great design and interface friendliness.
Here’s the store we liked the most. Not only it provides a dynamically changing preview, but also has instructional thumbnails of the changing properties. This design entirely turns away from the steps model and allows users to stylize their items in any random or rather preferred order.
And it’s not that the preview feature is something outstanding - not that technically heavy to implement - it’s rather the necessity for any custom wear ecommerce. By not applying it, you basically neglect the users who have come for the inspiration and opt only for those who have clearly visualized the item they want beforehand. The other category of buyers who can deal with no-preview interfaces are actual tailors, the experts that can distinguish between “six-button A” and “six-button B” jackets. They are trained to visualize the pieces just constructed. But why would they even come to these sites?
Another thing that organically falls into this “let-people-know” category is price, obviously. As users style an item, they have to know whether this particular vent style is going to exhaust their suit budgets. The price should be clearly depicted and dynamically changed depending on the options chosen.
Should you give instructions?
In most cases, as we have in apparel ecommerce platform, you don’t need to add additional instructions to use the system. With a preview feature done right and a clear interface, users should be able to figure out what they need themselves. But unlike the brick-and-mortar business, they can’t just ask an expert what would be the best fit for them. So, acting like a professional tailor you can add a decent share of value to your service.
Here’s a great example. Although this site doesn’t have a dynamic preview (alas!), it gives elaborate and clear instructions to selecting the properties of their wear.
Apparel ecommerce platform doesn’t have instructions, but we’ve added the Inspire Me feature that allows users to see custom wear created by the apparel ecommerce platform assistants themselves. And it embraces two objectives: a user gets introduced to the potential of a service, and he or she can actually pick one of the pre-constructed items and further customize them to heart’s content.
Technology: make it fast
There’re numerous ways you can implement the preview feature, which is the most critical one technically-wise. It should be fast and working smoothly.
As our engineers were contemplating about the tech side, there were basically two options considered. We could either use the jQuery framework, a powerful and a great tool to build responsive user interfaces, or to push the wear constructor to the backend. Here’s why the second option won:
- The images with the resolution as high as 585x688 pixels would take much time to process via jQuery
- jQuery wouldn’t allow us to colorize separate layers of the items, which was necessary
- …thus we’d have to process 8 Gb of ready images and layers (that’s how much it consumed to cover the entire apparel ecommerce roster)
- ...and a huge image base would require much of server resources.
Instead, we’ve used the Symfony framework to support backend and the ImageMagick PHP extension:
- Symfony is used as a product core
- ImageMagick is a great extension allowing for a large set of image transforming operations, which are entirely processed on the backend. It generates images, sets layers, resizes prints, colorizes, etc.
- jQuery is only applied to menus, color wheels, and other generic frontend features.
This approach allowed us both to implement the feature within a period and ensure its high performance. We enforced 3-second delay for each customization action that allocates time enough to buffer the image on every device.
The hierarchy of item customization options in the database looks like this:
Product
↳Styles
↳Designs
→layers→colors
→colors
→overlays→colors
→extras
→prints
→texts
→colors
→fonts
→shadow mask
Whether to make it mobile responsive or not wasn’t an arguable point. The smartphone user penetration rate in the United Kingdom (UK) is projected to reach 79.7 percent of the total population in 2022 that imposes creating responsiveness.
What are your experiences with ecommerce sites? Share them and stay tuned.
132737
