Wed'ze Goggles Website Design A Masterful Use Of Animation And UX
Wed’ze is a French retailer of ski gear. The company’s goggles website uses smooth animations and interactive browsing to immerse you in the skiing world. The website’s design uses guided tours and full-sized images to show you the company’s products. From browsing through the website, you will gain an appreciation for these skiing goggles as well as narrow down product choices for your needs.
Wed’ze Goggles Website Uses Loading Animation
When loading pages such as the home page, an animation will count from zero all the way to a hundred. Depending on the speed of the count, you will receive a real-time estimate of how long it will take to load the page you are on.
Given that page loading speed is a critical factor in creating a positive user experience, this animation improves the user’s engagement on the website. Even if a page loads slowly, if the user can see that, say, the page is already three-quarters of the way to loading, it helps keep them on the site. The website design puts significant thought into the visual feedback. This is transmitted by a giant scrolling text that increases the count towards the goal of a hundred. When the page loads, the user is rewarded with a view of the complete loaded page.
Far from being a mere chore of waiting while the page loads, the text that keeps count now becomes part of the user’s experience. In the same way that a user might watch a video on a page, or watch an image undergoing animations, now the user can take in the rapid count on the page. The font is casual and fun, to reassure the user and get them to wait for the page to load.
Slideshow Of Products With Automatic Transitions
The website’s default load page makes use of animations to give the user an impression of the different goggles that are available. This means that the user, without clicking on anything, can already gain useful information from the website. The slideshow loops through selected images from the website’s inventory, automatically, telling the user which collection the product is a part of. As an e-commerce website, the website’s slideshow gets a user interested in exploring more, using images of the products.
The user is exposed to a range of the site’s collections, which helps them gain an idea what is available. By seeing what’s available, the user can develop new interests and curiosity about products while the design aids in product discovery. This step is preferable to relying merely on search, which requires the user to have more active knowledge of what they want. Instead, even without having an idea what to shop for, the user can passively take in information about product collections for different weather conditions.
Wed’ze Goggles Website Features Guided Tour For Product Selection
You have the option of looking at all the products on the site or using a guided selection that focuses on your interests. The guided product selection walkthrough enhances the user’s utility from the website. The website makes use of helpful automation to make it easier for a user to select the right goggles.
By answering a few easy questions, the user is routed straight to the products that fulfill their responses. For example, the user can select from the given weather options. If they are looking for goggles that work in the sunshine, or in the snow, they just have to click a clearly labeled button. The website does the heavy lifting behind the scenes to route the user to the appropriate product choices.
Clicking on the website and shopping for goggles now becomes a five-minute process, rather than something that could require half an hour. The user no longer has to view all the products on the website listed on a general page unless they want to. Rather, a few questions and responses narrow down their choices. This also eliminates the friction of doing e-commerce on the website.
Recreational Tone Shown Through Font And Colors
The design’s use of font and colors adds to the user-friendliness of the website. The designers have used a big, white font on labels which makes important information easy to read. In addition, the interface design is mostly flat, creating an uncluttered and refreshing user interface. The choice of colors plays well with the white lettering. Shades of green, blue and yellow combine with the font and add to the casual but stylish feel of the website’s design.
Animations On Hover Reflect User Selections
When you move around the website and click on elements, there are subtle animations that add to the interactive experience of the site. The website makes good use of animations on hover, such as when you are selecting the weather conditions of your choice. When you hover over the snow option, for example, the website gives you feedback right away by playing an animation of falling snow.
The visual feedback not only informs and confirms the choice but adds a fun extra layer to using the website. Rather than viewing the site as a normal e-commerce store where you have some chores to complete, the site adds an element of gamification. The animations boost the user’s engagement with the site.
The Wed'ze Website Design Lets You Easily Track And Change Selections
Since there are numerous choices you will make as you scroll around the website, it can be hard keeping track of what you selected. The website makes it easy for you to review these selections by placing them in a sidebar at the extreme left.
The sidebar is safely out of the way of your main experience until you need it. Then, by simply hovering over the sidebar, you can quickly review the selections you have already made. You can also change your choices. For instance, you can change the shape of goggles you want or other choices you’ve made to get to the page with the products you see.
360-Degree View On Product Pages
On the product page, you will see a full-size image of the product. A subtle animation shifts the product in a life-like motion. This eye-catching animation draws attention to the product. A visual cue on the product image alerts you to the fact that you can move the product around to 360-degree view.
Thus, you can see what the product looks like from all angles, front and back. This helps you see, for example, the protective padding around the face area that will make wearing the goggles more comfortable for you. The product pages on the website use parallax scrolling to keep the product in sight while you scroll down to learn more. This places the product near the center of your attention.
Product Pages Give User A Taste Of Other Items
The results grid is notable for showing not only the products that meet a user’s criteria but also the ones that do not meet the criteria. This is one way in which the website takes a nuanced approach that breaks away from common design expectations. The choice, in this case, actually enhances a user’s experience because now the user can have an idea what they are missing. They do not have to try an entirely new search to realize what else they could have.
The website superimposes a light mask over the results that do not match a user’s criteria, keeping them out of the way. However, the image of the products is visible, as are the prices. The summary information gives the user knowledge at a glance. The user can, therefore, browse quicker and take such shortcuts in going through the inventory of this innovative website design.
