Masons Official
Masons is a luxury menswear boutique located in Melbourne, Australia that also offers its collections online to customers worldwide.
DETAILS
Due to NDA, I can only show the following images that have been specifically approved by the client.
Project Type: Professional, Individual
Role: UX Designer
Skills Strengthened: UI/UX Design, Product Design, UX Research, Prototyping
Goal: Create a new website for Masons with better information architecture and novel experiences, such as live streams, interactive showroom, and raffles, driven by their vision.
ABOUT
Masons Official combines street, contemporary and sartorial worlds through carefully curated collections from emerging and international brands. It offers its collections online to customers worldwide, as well as at its physical store located in Melbourne, Australia.
Problem: Masons’ current website is built on Shopify and feels like a template. Additionally, RED, Masons’ current live streaming platform, restricts the content that the store can show.
Initial Pitch
In my pitch, I proposed a website prototype with a straightforward navigation bar with categories leading to product listing pages (PLPs) and product detail pages (PDPs). The home page would be divided into two halves, with modern streetwear style products on one side and classic sartorial style products on the other. With this design, customers will not need to search extensively to find something that suits their preferences.
Additionally, I designed a novel "Find Your Style" quiz to provide personalized product recommendations to customers based on their style preferences. Customers can access their recommended products at any time by visiting the "For You" page through the nav bar after creating an account.
After all the agency pitches, we received the good news that Masons had chosen us to handle the UX design deliverables for the project, and Three60 would provide support for UI and assets/photography.
I would be responsible for the following UX deliverables:
Website Information Architecture: (a) site map; (b) user flows; (c) customer journey map
UX Research: (a) user interviews; (b) user personas
Wireframes and interactive prototypes for use cases.
Usability Testing: (a) heuristic evaluation; (b) user interviews; (c) findings analysis.
UX Features: (a) user flow for Chinese customers, including live stream; (b) 3D showroom; (c) multi-channel live chat; and (d) editorial/blog.
Responsive Web Design: (a) desktop; (b) mobile; (c) tablet.
Design Handoff (to developer): (a) mockups; (b) interactions; and (c) specifications.
Masons was in the process of redesigning their website, and they had enlisted the help of various design consultancies to pitch ideas for the project. Each designer was asked to present an initial UI/UX design and a unique concept for the new site and stakeholders before Masons would choose one consultancy to hire for the redesign project.
As the designer representing Sesame Creative, I met with Wendy, the person in charge of this design project at Masons, to discuss my ideas. I showed her three moodboards to give her an idea of the direction I was thinking of taking the brand's website. Wendy provided some feedback, emphasizing that Masons is a company that represents both classic and modern brands, and she wanted the website to reflect this diversity. She said, "I would really love for the differences of the aesthetic and mood between the two worlds to be showcased on the website." With Wendy's feedback in mind, I began to work on refining my ideas for the new Masons website, making sure to highlight the contrast between classic and modern styles.
ux research
ux research
I started by developing personas for Masons to gain a better understanding of their target audience and who I was designing for. My research included an analysis of the current men's fashion market, trends in everyday classic clothing, and the demographics purchasing the two styles. To further inform my design, I conducted informal interviews with members of these groups, including hypebeast fashion influencers and a sartorial magazine photographer. These conversations allowed me to create a customer journey map for the desired user experience for someone shopping on the Masons website.
Personas
Customer Journey Map
information architecture
Before beginning the design process, I had a lengthy conversation with Wendy from Masons to fully understand the company's pain points and business needs. I used the information gathered from my research and client conversations to create the site's information architecture, which I then pressure tested with fellow interaction designers who specialized in IA.
site map
From there, I created a site map and began designing wireframes for various pages and features, including the live stream experience, live chat, 3D virtual showroom, launches/ raffles, user account, and loyalty program. I also designed the main purchasing flow for mobile, desktop, and tablet devices. The design went through three rounds of iterations based on client feedback before it was finalized. Overall, the project was a success, and the client was delighted with the final UX design.
Final Designs
I conducted research on the Chinese app RED in order to design the live stream feature for Masons. Wendy informed me that Masons' account had been suspended due to strict advertising guidelines on RED. My background as a professional gaming live streamer on Twitch.tv allowed me to draw on my first-hand experience as both a moderator and viewer on a popular live streaming platform to design engaging experiences for both the Masons team and their audience.
Live Stream
Main Flow
As the project neared completion, I closely collaborated with Three60 to integrate their style guide and images into the prototype's product listing pages (PLPs) and product detail pages (PDPs). The final design for the PDP, shown on the right, reflects Three60's UI iteration. Once all screens had been updated by Three60, I assisted with the development handoff process alongside the engineer.
To design the 3D virtual showroom, I researched existing examples in the fashion retail and real estate industries to understand the best practices for creating an immersive shopping experience that allows customers to explore a virtual space as if they were physically present. Three60 photographed the assets at the brick-and-mortar store to use in the virtual showroom.
Using this information, I developed wireframes and a store map that emphasized a welcoming and interactive design. The Masons team and I worked together to ensure that the product modals in the virtual showroom could be easily updated with each season's new collections, while the store photos remained constant. The final design included interactive touchpoints where customers could explore and interact with the products on display.
Reflection
I thoroughly enjoyed owning the UX initiatives of this project and focusing on purely the UX research and design. It was rewarding to meet the client’s business goals and requirements by creating new web designs that adhered to the best practices in UX design, usability, and heuristics.