Transforming WATXH Suits

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


Issue


- 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


Old WATXH website layout
Old WATXH website layout

Old WATXH website layout
Old WATXH website layout


Old WATXH website layout
Old WATXH website layout

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.


About


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


Old WATXH website layout
Old WATXH website layout

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.


Competition



Morts & More Landing Page
Morts & More Landing Page

Morts & More led with images and CTA's to their suits as the first thing consumers see on the website.



Kabiru Abu Collection Page
Kabiru Abu Collection Page

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.


Inspiration



Birioni Homepage
Birioni Homepage

Zegna Homepage
Zegna Homepage



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.


Must-Have

At an absolute minimum, product pages must have these core components.

  • Descriptive product name

  • Recognizable image(s)

  • 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

  • Product availability

  • 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)

  • Product videos

  • Zoom or pan functionality on product images

  • Related product recommendations

  • Wishlist or registry tools

Fancy Features

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

  • 360° photos

  • Step-by-step how-to videos or animations

Design


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.


Wireframes


I began wireframing the website to map you the user journey to enhance the experience.


Home page:


WATXH Wireframes
WATXH Wireframes


Collection page


WATXH Wireframes
WATXH Wireframes

Custom suit page



WATXH Wireframes
WATXH Wireframes

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).



High-fidelity designs


Landing page

WATXH Landing page
WATXH Landing page

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.


Main/Home page



WATXH Main/Home Page
WATXH Main/Home Page

Collection


WATXH Collection Page
WATXH Collection Page

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.


WATXH Product Page
WATXH Product Page

Custom Suits

WATXH Custom Suits
WATXH Custom Suits

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


WATXH About Page
WATXH About Page

WATXH VATP Page
WATXH VATP Page

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.


Contact page


Contact page
Contact page

High-fidelity prototype: https://xd.adobe.com/view/5e137066-6bcd-49f6-ae43-a780bd440af4-0b40/?fullscreen


Conclusion


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/

14 views0 comments

Recent Posts

See All