View Prototype Here

Franco

Masoma

A custom made men's clothing business website redesign.

A custom made men's clothing business website redesign.

Project Overview

Project Overview

Role

End to End UX, UI Designer

Task

Design a website redesign that

encourages customers to book consultation appointments online

Tools

Tools

Figma

Figma

Franco wants to retire in the next 5-10 years, and possibly hand off his business to one of his family members. He is mostly the brand and people enjoy working with HIM. if he’s not there, a structure to replace him isn't in place. On top of that the website needs a refresh. People are coming to the site, but they aren't booking a consultation on the site because there isn't visual activation to enhance them to do so. Lastly, Franco specializes in bespoke suits, he has already started selling ready to wear pieces that are flying off the shelves such as polos and suits. He is looking to launch this on his site but not have it interfere with his core bespoke business. 

Franco wants to retire in the next 5-10 years, and possibly hand off his business to one of his family members. He is mostly the brand and people enjoy working with HIM. if he’s not there, a structure to replace him isn't in place. On top of that the website needs a refresh. People are coming to the site, but they aren't booking a consultation on the site because there isn't visual activation to enhance them to do so. Lastly, Franco specializes in bespoke suits, he has already started selling ready to wear pieces that are flying off the shelves such as polos and suits. He is looking to launch this on his site but not have it interfere with his core bespoke business. 


Understand the target audience views and searches for when booking appointments and adjust the booking process

Establish a Franco experience online prior to consultation arrival

Create their brand values

Create a website launch for their ready-to-wear collection

Make the business approachable and to the current design taste of the Silicon Valley customer (website colors, typography adjustments)

Understand the target audience views and searches for when booking appointments and adjust the booking process

Establish a Franco experience online prior to consultation arrival

Create their brand values

Create a website launch for their ready-to-wear collection

Make the business approachable and to the current design taste of the Silicon Valley customer (website colors, typography adjustments)

Franco Masoma and his clothing is based in Los Gatos, California. It is highly rated on yelp with 5 stars and customers enjoy the experience coming in to work with him. He primarily focuses on made-to-measure clothing for customers. For work, leisure, but mostly special events (weddings, special occasions). 

Franco Masoma and his clothing is based in Los Gatos, California. It is highly rated on yelp with 5 stars and customers enjoy the experience coming in to work with him. He primarily focuses on made-to-measure clothing for customers. For work, leisure, but mostly special events (weddings, special occasions). 

The Problem

The Problem

The Goal

The Goal

Responsive Web Design: Small Local Business Project Overview 


Client: Franco Masoma Bespoke Clothing


Timeline: 80 Hours 


Industry: Men’s Clothing/ Menswear

Responsive Web Design: Small Local Business Project Overview 


Client: Franco Masoma Bespoke Clothing


Timeline: 80 Hours 


Industry: Men’s Clothing/ Menswear

Client Background

Client Background

My Design Process

Empathize

Background and Research

Define

Interviews, Competitive, Mapping, Findings

Ideate & Design

Flows, Wireframes, Hi-Fi

Testing & Iterate

User Testing, Iterations,

Next Steps

Research Mapping & Findings

By grouping similar data points together based on common themes, ideas, or concepts, I was able to identify overarching themes or categories that emerged from the clusters.

Participants

Upgrade User Experience (UX): My main mission was to spot what's annoying on the website and make it appealing for users. Think smoother browsing to booking appointments.

Boost Conversion Rate: I wanted to figure out why people ditch the site and how to get them to actually book their appointment. most importantly, make sure they don't change their minds halfway.

Spy on the Competition: I checked out what our rivals were up to online. The goal was to outshine them and pick up some tricks they're good at.

Tell a Better Story: I took a hard look at our product descriptions and visuals. The idea was to tell our brand story better and show off our stuff in a more exciting way.

Getting the Ready-to-Wear launch: I planned how to gain excitement on the new ready-to-wear collection, even if we didn't have any product, it was important to let our clients know that we would stay in touch with the launch date and events

What were my research objectives?

Background & Research

To begin, I needed to have a clear understanding of the project's goals. As the lead designer I needed to align with Franco to establish what specific insights we aim to gather from the research. This included improving the website's user experience, increasing conversions, and enhancing brand awareness for their ready-to-wear collection.

Franco Masoma is a seasoned menswear designer in Silicon Valley, known for his nature-inspired designs and exceptional customer service. His brand offers custom formalwear in a luxury boutique and is expanding into ready-to-wear. Their target audience is affluent men, mainly those getting married or working in tech and professions like real estate, law, and medicine. Franco admires brands like Brunello Cuccinelli and websites with rich visuals and guided experiences.


The website redesign aims to enhance the user experience, increase appointments, and promote their upcoming ready-to-wear collection.


Market Research Approach

Who is Franco Masoma?

 Empathize

Competitive Analysis

I researched and analyzed the competitive landscape in the formal menswear industry. This involved examining websites and online experiences of key competitors to identify what worked well and where there were gaps. Understanding the competition's strengths and weaknesses informed our design choices. Trend and Industry Research was also a critical part of the process. Staying up-to-date with menswear fashion trends and e-commerce industry developments was crucial. I explored the latest trends in men's fashion, particularly in custom and ready-to-wear clothing, as well as emerging technologies in UX design. This helped us ensure that our design approach aligned with the current industry landscape and customer expectations.

I started by segmenting Franco Masoma's customer base into distinct groups, such as grooms, tech professionals, and other professionals. For each segment, I created detailed personas, including demographics, preferences, and pain points. This provided a foundation for tailoring the website's UX to meet specific customer needs.

V

Who was interviewed?

Tech Lover Shopper: A male between 24 and 65 who works in the tech world, like at Apple or Google. He helps us understand what tech-savvy people like when they buy luxury clothing.

Occasional Formal Dresser: Someone who is new to (or sometimes) shops for luxury clothes, especially for special occasions, and is curious about custom clothing. This person tells us what people like when they don't dress up all the time.

Online Shopper Who Loves Instagram: A person who mainly shops using their phone and likes looking at fashion stuff on Instagram and similar apps. They can tell us how to make the website work well on a phone and how to use social media for fashion.

Interview Details

Interviews were conducted remotely, both on zoom and over the phone

Each interview consisted of 12-16 questions

There were a total of 4 participants 

To synthesize all the info I gathered from the user interviews, I noticed pattern of user needs and converted them into statistics.

Participants need the cost and the lead time transparency on the site

100%

Participants buy custom outside of formal event wear

25%

Participants feel they need to visit the store first in order to book an appointment

75%

75%

To make sure that my decisions moving forward in the process are user centered, I wanted to have a clear understanding who Franco’s customers are. Using what I learned from my mapping and findings, I created two user personas who I would be designing for- Andrew and Tim!

Personas

Andrew

Attorney

About

Motivations

Needs

Pain Points

Interests

Social Media Platforms

Age 30-45

Makes $180- $250k a year

Medium Tech skills

Online Shopper

Spends up to $4000 on clothing a year

Engaged

Getting Married soon

Starting to look into formal suits for his upcoming wedding

Wanting to look like a million bucks for the big day, whether its in a designer ready-to-wear suit or a custom suit

5 star reviews on yelp

Eating out with friends

Gaming

Watching Films

Basketball

Nike shoes

Bitcoin

He desires a particular product that will solve a problem and improve well-being

He requires ample information to ease purchase anxieties about the product

Needs to be educated on product values and services by looking it up online before booking

OR needs to visit the retailer in person to proceed to the next step

Needs to see the price before buying

He’s new to the custom experience and has a hesitancy investing in the process before seeing the final results

Money holds him back from making luxury clothing purchases in general

Spending money on a wedding is a collected expense that he needs to budget


Tim

Department Head

at a Tech Company

About

Motivations

Needs

Pain Points

Interests

Social Media Platforms

Age 36- 60

Makes $250-$350k a year

High Tech skills/ Career Driven

Personally connects with who he buys items from

Spends $8k -$10,000 a year on clothing

Single

Looking good in his clothing and appearing put together and professional

Supporting businesses and brands who's values they believe in

Enjoys sharing his positive customer experiences and influences others to buy the products

Single and actively dating

Traveling

Wine tasting

Golfing

Events

Basketball (season ticket holder)

He needs quality clothing that is tailored to his body but is sleek and comfortable for the office, meetings, and speaking panels

He desires to have exclusive experiences that are the unique and memorable

He wants to feel appreciated and a part of the brand story/ exclusive access to new products

They need personalized product recommendations

Needs to work with someone with expert experience or the designer themselves

Appreciates thank you gifts

Gets busy and cant come into the store/ needs a reliable tool to choose his wardrobe refresh

Takes a long time to fully convert into full brand loyalty

Waiting on his custom clothing to complete and try on

Has left a brand in the past for shifting their values

Define

Now with my understanding of Franco’s users, I wanted to start thinking about what problems we are trying to solve for them. Taking the insights and needs from the empathy map, I started to dig deeper to better understand what the persona’s problems are by creating point-of-view (POV) statements and How Might We (HMW) questions that would help drive my brainstorming process.

Defining the Problems

Next, I created documents that provided an operational map to how a product acts and functions work for users. This includes Site Mapping, User Flows, and creating Task Flows as a blueprint for the site. Showing its displays, content, interactions, and behaviors when using the product.

Flows for a User Friendly Design

To start planning the architecture of the application and where these features would fit into it, I created an application map to organize the screens in a way that would be logical and intuitive for our user.

Task Flow

I started by figuring out what users want to do on Franco's site. Then, I made a list of the important screens we need for each task. After that, I used these lists to understand how users will use the site step by step, like which pages they visit and what they click on.

Now, I aimed to dig deeper and gain a more comprehensive understanding of the entire journey users would embark on while navigating Franco's website, from the beginning to the end. My goal was to put myself in their shoes with various avenues that lead to booking appointments with navigation and shopping assistance.

User Flow

I’d like to explore ways to help shoppers/customers easily understand custom clothing pricing upfront and explain the step by step process, in order to minimize their initial concerns.

How might we provide a transparent interaction on a platform where shoppers/customers can further connect?

How might we minimize doubt of the product and encourage shoppers/customers to book an appointment on the site?

How might we communicate a realistic timeline of the start to finish of the custom clothing experience that is satisfactory to the shoppers/customer’s needs? 

I’d like to explore ways to help shoppers/customers who are looking for the custom making experience exciting to build loyalty and repeat business

How might we incorporate an interactive platform where shoppers/customers get excited? 

How might we communicate a successful brand experience that evokes a positive emotional connection with the shopper/ customer that they want to be part of? 

How might we incorporate the shopper/customer’s changing preferences and adapt to moving market trends, to proactively improve the brand’s reputation?

How might we make the website more engaging for visitors and potential shoppers/customers, building stronger relationships for the future?

How might we customize content and experiences to connect with visitors and prospects, setting the stage for lasting shopper relationships?

How might we use data and user insights to pinpoint interaction points,  to help us build meaningful, enduring shopper/customer connections through the site?

I’d like to explore ways to help engage with visitors and prospects to the site to build future shopper/customer relationships

Prototype & Testing

Lofi Wireframe Sketches

Using my understanding of the user, our goals, the architecture, and the user’s interaction with the app, I worked on making informed decisions on how to design Franco Masoma’s screens by sketching low-fidelity wireframes.

Hi-fi Design Wireframe

Combining the wireframes with the UI components made the responsive design come to life and in action.

User Testing and Results

In order to see if the design was effective and comprehensive to the user, I needed to create a usability test plan with participants to

Final Iterations

Sketches to Prototype

Now that I had sketched out my ideas, I wanted to test the decisions I made and make sure that the structure and flow of the app is intuitive for our users. Before working on the visual design, I wanted to first make sure that the design was functional. In order to do this, I decided to create a mid-fidelity prototype which would help me quickly test the design on real users and make any priority revisions before integrating the branding and visual design.

Mid Fidelity Wireframes

Mid Fidelity Wireframes

To create my prototype, I first started by creating mid-fidelity wireframes on Figma of the key screens the users would be interacting with.

To create my prototype, I first started by creating mid-fidelity wireframes on Figma of the key screens the users would be interacting with.

UI Components and Design

After the mid fidelity wire-framing came to life, it was time for me to name the product and create a UI Design to match the look and feel of what my user gatherings would be inclined to enjoy using

Style Inspiration and UI Component guide

FRANCO MASOMA

Color Palette

Primary

#C45508

#0877C4

#163A56

#996A44

#291510

#FFFFFF

#F5F1EC

#363331

Secondary

Neutral - Background/ Stroke/ Font

Font Style

Logo

Heading 1: Playfair Display Medium 40px


Heading 2: Playfair Display Medium 34px


Heading 3: Playfair Display Regular 28px


Body Text: Avenir Next Medium 24px


Small Text: Avenir Next Regular 21px


Small Text: Avenir Next Regular 18px


Extra Small Text: Avenir Next Regular 16px


Desktop

Desktop

Heading 1: Playfair Display Medium 32px


Heading 2: Playfair Display Medium 24px


Heading 3: Playfair Display Regular 22px


Body Text: Avenir Next Medium 16px


Small Text: Avenir Next Regular 15px


Extra Small Text: Avenier Next Light 12px

Mobile

Buttons

Button

Button

Button

Default

Hover

Pressed

After testing out the Prototype with 3 participants, I analyzed the results and synthesized it to help prioritize my final iterations

The results

The results

The overall Franco Masoma design needed three additional iterations as the top priority to make. Each iteration was the additions of Gallery page, and an FAQ page. I added the store business phone number, email address, and social media icons onto a new bar over the menu. I removed the Ready to Wear page and added a “Coming Soon” section to the home page to gather email info from interested users.

408-351-0099

ambassador@francomasoma.com

Gallery

Why Custom

Weddings

FRANCO MASOMA

Our Story

FAQ

Contact

Next Steps

Adding more images of clothing, and even video content to visually support the brand product

Iterate on existing features to make the product more finished and functional

Enhance the communication feature by adding a chatbot to the site for users to utilize and engage with if needing assistance