Zaštitne Folije Website Design
The goal of the project
Zaštitne Folije is a retail store based in Zagreb, Croatia that specializes in selling protective window, car and surface films and skins.
The goal of the project was to create a simple and intuitive way for people to buy and learn about protective films. The biggest challenge I faced with the design was information density. As it turns out, buying a proper protective window film is not as straightforward as people might think. There is so much information people need to be aware of before clicking the buy button. If customers would end up buying a wrong kind of film, they could get into a risk of cracking their window if the film they purchased was incompatible with it. Turns out that’s a real thing! So the goal tagline was set - make the website as simple as possible for users to navigate and engage, but also provide as much information as possible.
The first part of the design process was understanding the customers and the potential target demographic. Zaštitne Folije had a website already up and running for a couple of years before this project started and from that version of the website, alongside their retail customer statistics, I learnt that their demographic is broad. The customers ranged from young adults looking for a cool shading film for their cars to mid-aged adults and elderly customers who just want something simple to minimize heat input in their home during hot summer days. The level of knowledge between age groups has also shown a big difference. For example, the younger demographic had a higher likelihood of knowing some key compatibility checkpoints for car window films compared to the older demographic. Because of this broad knowledge difference, the website couldn’t afford leaving out any key product details.
In the initial phase of the design process, I set out to design a straightforward user flow. The homepage would have a grid showcasing various products above the fold and some introductory info to the company with sections like their partners, past clients, and their work portfolio. The navigation on the top included the primary categories that were simply named by their function so customers would know exactly where to look for a specific film. The naming convention that was used was designed to guide the customer through their number one question: what do you need the film for? So the navigation categories were as follows: Protective Films, Decorative Films, Windshield Films, Films for plastic surfaces, Whiteboard Films.
Once the customer had chosen the category, that’s when guided purchasing started. The catalogs and subsections were designed with a description in mind to carefully guide customers to the right products.
Then we get to the product page. This is what I would consider the master page for information. It was here where the critical information needed to be clearly communicated before a potential customer would add the product to cart. The page consisted of a large product image on the left column and title and description on the right column. There were a couple of different ways customers could buy the same product. Because it’s a film the store offered options for pre-made sizes, whole roles or custom sizes. The tabbed navigation provided users with an easy way to choose between the options.
Bellow the main section there were two columns, one which provided product stats like how much sunlight it lets through, how reflective it is, etc. The progress bar design for the stats made is easy for people to compare multiple products and easily scan through the differences between them. The right side contained more information about the product in three tab groups like the description and regulatory information, compatibility with windows and the application tutorial.
In order to clearly communicate the compatibility and risks, I designed a table which is split into three different groups of windows and its different sub-groups that are written in clear and straightforward way, which made it easy for customers to identify their type of window. There were three different states in tables. If the film is completely compatible, the name would have a green check mark to indicate to the customer that it’s safe to apply. If the film is semi-compatible for a window type, then customers would be shown a yellow exclamation point symbol alongside a popup tooltip that would explain some potential dangers or specific application requirements on hover. If the film is incompatible the customers would see a red X symbol to let them know that there is a big risk in applying the product on that specific window type, alongside a popup tooltip with a more detailed explanation.
The biggest feature of the website was a custom size configurator. As I mentioned earlier, customers can choose to get a custom-sized film and the goal was to also make it as easy and intuitive for customers to enter their own dimensions and also create a bulk order if they wanted to. Custom size forms can easily look intimidating to customers. In fact, anything requiring more than a simple “choose A or choose B” option had a high risk of increasing the bounce rate of customers. Statistics and research show that customers want things to be done for them, and if anything requires more energy from the customer than what they are willing to give, they will just leave the page. So by designing the configurator in an approachable and visual-first way, I managed to make the tool that had not only reduced the bounce-rate, but in fact encouraged users to play with it and and use it more during internal user testing.
After users finally add a product to cart, they get a visual ping from the cart icon to guide them to the next step which is checkout.
The checkout page had many design iterations throughout the design process. I tested many different flows and information grouping in the checkout form, from showing everything at once to sectioning information into different steps. The flow that showed the most success was a three step page design which was most favored in testing due to the fact that it didn’t overwhelm the customer with a giant form requiring all details at once. It also included a sectioned progress bar at the top of the screen which gave customers and visual sense of how close they are to completing the checkout and what kind of information they would be expected to provide in the next step.
With every step in the design process, I have also developed many micro interactions on website elements in order to additionally engage users in interacting and browsing the site. You check out the full gallery here.
Thank you for reading!
Property of IDB Mobile Technology