• Email
  • Black LinkedIn Icon
Copyright © 2019 Jose Arias. All rights reserved.

Work: Frederick Thomas

E-commerce Design

Established in 2009 as an online retailer specializing in men's ties, cufflinks high-quality and other men's accessories, Frederick Thomas built its customer base with no marketing strategy other than sales through eBay, Amazon UK, and word-of-mouth references.

Role

UX Designer & Researcher

Platform

Web

Project Goal

Design and implement a made-to-measure dress shirt service keeping with the style of the company website and overall site integration while considering feasibility, ease of use, 10% customer adoption within 6 months, and customer retention.

User Background

Current and new Frederick Thomas customers who value a high-quality product at a lower price point and care about their appearance.

Tools

Paper, markers, Sketch app, and InVision.

Discovery

Although I have purchased dress shirts before, I have not had the opportunity to experience the process of obtaining measurements for, and purchase, a made-to-measure dress shirt. Therefore, it is crucial to try and approach every endeavor as objectively as possible. That is why empathy is so important within our profession. It up to us, as designers, to do our utmost to understand the users that will ultimately be interacting with our solutions on a day-to-day basis. In equal measure, we should also do our best to understand the stakeholders we collaborate with to ensure we meet the outcomes they want to achieve.

Expert Review

Informed by the client that customers primarily made purchases via desktop, I conducted secondary research of competitor sites, and an expert review of the Frederick Thomas desktop site to see what can be improved to create a more cohesive user experience.

Affinity Diagram

Through one-on-one in-depth interviews with 9 current Frederick Thomas customers and affinity diagramming, synthesis of research findings provided me with additional insights that helped inform design decisions going forward.

Define

When something is defined, the element of ambiguity becomes less pronounced and gives way to better understanding. Despite having interviewed current Frederick Thomas customers, it did not mean that I had a better understanding of users in as much as it meant having a better idea of users. The synthesis of the user research interviews I conducted provided me with context. It was essential to help me define the users that would use the made-to-measure dress shirt feature, as well as the problems I was trying to solve for.

Once finished with synthesizing the user research interviews, the need to frame a point of view based on user needs and insights becomes clear. It provides clarity in order to successfully achieve the needs of users and stakeholders alike. Doing so allowed me to create primary and secondary personas, to help maintain the design process and decision making focused on users.

Ideal User Flow

Creating an ideal user flow that captured the Frederick Thomas made-to-measure shirt purchasing experience followed. Doing so provides clarity with respect to tasks users would experience to complete their made-to-measure dress shirt purchase. It begins with what users would experience upon landing on the Frederick Thomas homepage. Next, users would ideally click on the shirts category page, and filter their choices between a particular fabric or color. Users would have options to customize their made-to-measure shirt as they wish or continue with the default choice highlighted in each step. Considering the insights generated from user research interviews, it became clear that one of the pain points users experience when purchasing made-to-measure shirts is the measurement process itself. To remove that degree of uncertainty, I included an option in which users can make a best guess estimate based on the shirt size they normally wear, i.e. a size small translating into a size 14.5 in US/UK measurement.

Ideate

It is important to generate as many ideas as possible and use one particular idea or a combination of several. Rapid ideation serves that purpose, and doing so can lead to a solution that would consider the needs of both users and stakeholders.

Made-to-Measure Dress Shirt Product Page Sketch

Made-to-Measure Dress Shirt Collar Selection Page Sketch

After multiple sketches using markers and paper, I settled upon a potential solution that would stay within the constraint outlined by the client, while providing a simple user experience that would hopefully ease the uncertainty that comes with purchasing made-to-measure shirts.

Design

With the ideated solution decided upon, creating low fidelity representations of sketches is key. Chiefly, they will provide a sense of how a page works.

Wireframes are useful to communicate design thinking and provide an overall sense of how a page would work. They are also useful to provide a representation of what users will see once they visit a site. Based on the user research interview synthesis, personas, and ideal user flow, I created wireframes using the Sketch app. I was able to envision an experience in which users would have a less strenuous made-to-measure dress shirt purchasing experience by demystifying the process. As there are users who don't know how to go about obtaining their specific measurements, they would have the option of making a best guess estimate. For those users who do know their specific measurements, they can input their unique measurements.

With the intention of gaining a better sense of the user's experience when purchasing a made-to-measure shirt on the Frederick Thomas site, I used the InVision online app to turn the wireframes into a clickable prototype and determine what further improvements could be made.

Desktop (Before) 

Desktop (After)

To demonstrate the difference between the current site and my proposed design solution, I created a high fidelity mockup. While adhering to the client's wishes to make minimal page layout changes, I saw the product page was cluttered with significant whitespace not being used. There were also inconsistencies with respect to product suggestions: some product pages had them, while others did not. What I aimed for was uniformity across the site, while maintaining a simple, yet familiar Frederick Thomas experience.

Outcome

The client was in equal parts surprised and impressed by the design process and execution that can provide Frederick Thomas the opportunity to implement the made-to-measure dress shirt feature on their site. Due to manufacturing issues, the design solution I proposed will be adopted at a later time.

Test

Mutually agreed with the client to conduct usability testing in the future.

Retrospective

Finding users to interview was the biggest blocker that prevented me from keeping to my original project plan. The client did not provide me with the initially agreed upon list of current customers to interview until 3 days after beginning work on the project. Although an initial setback, it provided me with the opportunity to work under a tighter deadline, turning that setback into a positive in the process. However, once I began interviewing current Frederick Thomas customers and gauging their in-store and online dress shirt purchase experiences; familiarity with made-to-measure dress shirts; and experience interacting with Frederick Thomas, it became clearer in what way to design for current users and potential users alike. The client was available to answer questions at any time, and provided resources and suggestions as well. Working with constraints helped me to embrace them rather than be intimidated by them. Having had the opportunity to work on this project for the client allowed me to develop empathy for users. It also helped me develop my communication skills with respect to communicating with stakeholders and help me help their achieve their goals by unlocking value through the power of design.