Designing e-commerce for a menswear store
A huge part of the business of 51–53 lived in a digital space, as the online store. I developed a design with a heavy emphasis on the culture that centred around the needs of the customer and showcasing clear information about the products. Bringing the brand identity to life digitally relied heavily on well curated photography from 51–53's own endeavours — pulling from seasonal look books through to product specific shots taken in a studio setup.
Welcoming the customer
The home page is intended to be a dashboard of everything 51–53. It's a portal that dangles content and product to the user, seamlessly blending the two through curated pieces from the Journal and a series of 'above the fold' carousel images. Rather than relying on the menu for the user to navigate the site, the home page continues to a product focused area where customers can quickly filter latest products by product type, with the intention to quickly capture people with the right types of the latest lines.
CTA's that appear on hover help clean up the overall interface, quickly becoming an interaction that customers understood. Having floating markers on garments was a great way for 51–53 to be able to direct users to key pages and products quickly and in a way that the users felt in control. They were informed about the key facts about a product before committing.
Individual product page
Perhaps the most important area of the e-commerce experience, the product page has to immediately communicate two core things: The kind of product and the price. Secondly, if the user is interested, the next most important aspect is the size (and if their size is in stock), and then lastly further attributes about the product itself.
Many users also shop by brand, and as loyal shoppers by brand, it's important to include information at a glance. And on every product page, shipping information, along with return and a general invitation for contacting the store provides a bottom line of confidence for the customer.
Wherever the user is throughout the site, they can access the cart by clicking the icon in the header. Instead of diverting to a new page — as the user may simply be checking what's in the cart — a right hand side drawer slides out to provide a glanceable summary of the cart contents.
If the user wishes to checkout from there, there are two further stages of form filling (that are pre-filled if the user is logged in) to go through before placing the order. The two stages provide an easily digestible flow, with 3 small forms.