I was asked to revamp the website for the small business WATXH, who create bespoke and custom suits for business, weddings and other formal purposes. The client outlined the current issues they faced with their current website and the goals for their new website.
My role was to redesign the website.
Tools used: Adobe XD and Shopify
- The current website didn't have any e-commerce features
- Wanted to transform the website into an online store for users to order custom suits
- Business goals were to start running ads but the current website lacked direction to convert interest into sales
Website Before Changes
The homepage didn't have any CTA's, suit information or any option to buy a suit. The only way consumers could find out more about the suits was to sign up via a mailing list.
The owner wanted to update the about page as he felt it was outdated and didn't reflect how he wanted to market the business going forward.
Bespoke & Custom Suits
The main selling point about the company is the offering of made to measure suits, there wasn't much imagery or information on the made to measure suits or process.
Overall the main goal was to transform this website into a visual platform to showcase and sell the WATXH suits.
Inspiration and Research
Working with the owner, I was able to identify how the competition organised their pages. I looked at Morts and More, Kabiru Abu, Albert Clothing and Anthonys London (identified by the client). As well as looking at the competition, I was also supplied website inspirations. The inspiration suggested; Bironi, Massimo Dutti and Ermenegildo Zegna. As well as these websites I also looked at Boo Hoo and Asos as they were listed as some of the top fashion online retailers.
Morts & More led with images and CTA's to their suits as the first thing consumers see on the website.
Kabiru Abu includes a collection section on their website to give users the option to view the range of different suits on the website. This allows users to see the range of design the company has to offer for those who visit the website.
Albert Clothing presents their current collection in their hero image, and when scrolling down introduces their catalogue to users on the home page. The journey for users to buy is easy and similar to other e-commerce websites such as ASOS, Boo-hoo and other top UK e-commerce websites.
The websites selected for the inspiration all had similar features in style, clear menu layouts and CTA's to engage users to click. These websites have good UI and also follow good UX e-commerce conventions. The simplicity of the designs and layout allows the focus to be on the products instead of figuring out how to navigate through the website. These key elements have been listed as "crucial factors" by bigcommerce.co.uk.
This was an issue for WATXH, as the website lacked clear CTA's to allow users to purchase suits. The only way for consumers to purchase was either to sign up or book an appointment, creating barriers of entry into the consumer's journey.
This is what Nielsen's Norman Group identifies as UX principals for e-commerce product pages.
At an absolute minimum, product pages must have these core components.
Descriptive product name
Enlarged view of image(s)
Price, including any additional product-specific charges
Clear product options, such as color and size, and a way to select them
Clear way to add an item to the cart, and clear feedback when it has been added
Concise and informative product description
Nice to Have
Shoppers generally expect and appreciate these elements on product pages, but not all sites and apps need each of these.
Customer or expert ratings or reviews, sortable or filterable by rating
Additional product images (rotated or detailed views, animated images of product in use)
Zoom or pan functionality on product images
Related product recommendations
Wishlist or registry tools
These may be worthwhile for some products, but only if they are flawlessly executed with high usability and utility for the user.
Virtual try-on (for example, via photo upload or augmented reality)
Photo or video reviews from customers
Metadata and advanced filtering in reviews
Recurring- or subscription-purchase options
Product customization tools
Step-by-step how-to videos or animations
With the competitor and inspiration research, I was able to map out what the website would look like for both UI and how to enhance the user's experience on the website.
I began wireframing the website to map you the user journey to enhance the experience.
Custom suit page
The new focus of the website is the collection, booking a measurement consultation, a page to help users connect with the company and a contact page. These will be highlighted in the main menu to help users make a decision quicker by directing them (Fitt's Law). Although several pages have been created, only 5 options feature in the menu to help users make a decision on the website (Miller's Law and Hick's Law).
The design focus is to align the style more similar to the competitor websites (Jakob's Law) and more of a focus on driving sales. Users often perceive aesthetically pleasing design as design that’s more usable (Aesthetic Usability Effect).
The client wanted a landing page which a video ad promotes the suits. Because of this, a CTA was added which takes the user to the main/home page to see the selection of suits, testimonials and the rest of the navigation.
The background colour on the website builder (Shopify) had to change due to restrictions, however, the format stayed the same. One of the goals was to add e-commerce to the website and these product pages allow users to purchase a suit either in a preset sizing or book a custom fitting.
A business goal for WATXH is to sell customised made to measure suits. This page is designed to show the suits (in the hero and a secondary image) as well as provide information on the service and why a consumer should buy a custom suit.
About and VATP
The VATP sat under the About page as these two pages are being used to drive the ethos of WATXH and creating an environment to educate the user.
High-fidelity prototype: https://xd.adobe.com/view/5e137066-6bcd-49f6-ae43-a780bd440af4-0b40/?fullscreen
With the website now being e-commerce focused, the process was put together on Shopify. The real copy was added and a few changes were made to the website due to some limitations on Shopify. The client was happy with the changes as the design is more aligned with his vision and allows users to purchase from the website. The WATXH website aligns closers to the competition than it did before.
The main goal was to optimise the website to increase sales on the website. The inclusion of the VATP page allows users to book a consultation and pay for expert guidance. The increased emphasis on e-commerce removes previous barriers so people visiting can become consumers and purchase from the website.
You can view and buy from the WATXH website here: https://www.watxh.co.uk/