Case Study

Mike owns the best store for custom clothing and high-end menswear in the Pacific Northwest, but his digital presence was in need of a major overhaul that better reflected the amazing in-store experience. Mike knew that his website was frequently the very first impression of his store for potential new customers, and he wanted to make sure it was a good one.

I decided that Webflow was the best tool for creating the site itself (click here to go straight to the site), since it had a CMS that would give Mike some flexibility to do simple edits, yet allow me maximum design freedom with a more efficient workflow in terms of creating the code itself, and because there was no need for e-commerce. I checked in with Mike throughout the design process, keeping him updated on my progress and getting feedback from him and his team.

Research

I’d already worked with Mike before and knew the brand well, but I still did my due diligence by researching what competitors were offering on their websites and how Michael Allen’s could stand out from the crowd.

While most of Mike’s competitors focus on either custom clothing or ready-to-wear, Michael Allen’s offers both.  Location is a big factor in the custom clothing business, by nature of the in-person measuring process, but at higher price points, customers are willing to travel, so I researched both local Portland custom clothing businesses and famous tailors such as those in London’s Savile Row.  The majority of these sites featured traditional layouts, often emphasizing the idea of heritage.  

Mike’s competitors on the luxury ready-to-wear side of things frequently featured large, full-screen images and lots of negative space with simple white backgrounds.  

The big takeaways were that the site design should focus more on showing rather than telling, keep explanations simple, and feature large, stylish images and plenty of negative space. To differentiate, the site would use a unique design in terms of layout, graphics, and animations.

To read the details of my research, ask me for an invitation to view this Adobe XD presentation. 

User Persona

The typical Michael Allen's Clothier is someone like Tom, who is 52 years old and owns an extremely successful business. He values his time immensely and is proud of his success, accepting nothing less than the best from the products and services he purchases. He can also afford to be picky about which establishments he frequents, so he always expects a VIP experience.

However, due to his lack of spare time, Tom doesn't do detailed research about what he buys, instead relying on other cues to decide what he deems worthy, such as personal recommendations from peers, design/presentation, uniqueness/scarcity, and even high prices.

Tom understands the value of dressing well (particularly luxury clothing) and may even enjoy discussing the finer details of the sartorial arts, but he lacks the time to curate his wardrobe himself. As a result, when he does shop, Tom appreciates the advice of an expert he can trust, who understands what he wants.

Goals

As mentioned above, I'd pinpointed five main ideas to focus on during the design process, including custom/bespoke, luxury, friendly, classic/modern balance, and functionality. I'll go through each in detail:

Custom

About 70% of Michael Allen’s business is custom clothing, so it was important that the site feel bespoke.  We definitely wanted to avoid anything that suggested a cookie-cutter template, and instead ensure the design immediately communicates that Michael Allen’s offers products and services that are totally unique.  

The hero section with the animation of an outfit coming together serves a dual-purpose.  One, it’s intended to immediately and quickly communicate the idea of bespoke clothing, made just for you. Two, product photography is challenging for bespoke clothing, due to delivery timing uncertainty, customer privacy issues, and the risk of damaging the pieces during a photo shoot, so this animation side-steps these issues.  

One of my first ideas was to use a fixed navigation button that actually looked like a clothing button that echoed the design of the original monogram logo.  I was originally planning to make something myself, but actually stumbled upon a graphic that was pretty close to what I had in my head. 

With some tweaking, I settled on using the monogram logo as a fixed “back to top” button in the top left, and keeping the nav menu button fixed in the bottom right.  While the nav menu button placement is an unconventional choice, it makes thumb access easier on mobile, is still easy to locate thanks to loading and scroll animations, and adds an elegant style to the design. 

Luxury

The store caters to a high-end clientele who don’t have the time or inclination to do in-depth research on most of their purchases, so design is absolutely critical in making it evident that the brand is worthy of their attention.  

To do that, I did my best to create bold, stylish images, stuck with the brand’s simple color palette of black and white, along with the occasional pop of red for CTAs and hover states, made sure there was plenty of negative space, and kept informational clutter to a bare minimum.

Friendly & Welcoming

Luxury retailers can sometimes have the reputation of being snooty or pretentious, but Michael Allen’s flips that stereotype.  When repeat customers walk through the door, they are greeted by name, with a hug and a glass of their favorite drink.  

The online version of the store needed to keep that same open, anti-corporate attitude, and I felt that a simple, one-page scrolling design was the perfect way to tell the brand’s story in a more organic fashion, rather than immediately overwhelm the viewer with multiple choices.  

I also used a more casual, conversational tone in the copy whenever possible, and made sure to prominently feature Mike’s dog Spencer, who you can find sitting on the counter all day long, five or six days a week. 

Modern/Classic Balance

Michael Allen’s uses traditional methods to create custom pieces with a modern sensibility, and striking the right balance between classic and trendy is a huge part of the store’s identity, so the website needed to appeal to both the most conservative of dressers and clotheshorses who love bright colors and wild patterns, while erring on the side of being more modern.  

To help achieve this same balance on the site, I used a minimal yet unconventional and kinetic layout, with bold animations, with a color palette that alternated between a stark, classic black and white on one hand, and a bright and colorful look on the other.  

In terms of visual branding, Michael Allen’s has used several different versions of its logo and font over the years, and I wanted to find the right balance between updating them while still keeping them recognizable.  For the circular monogram logo, I used the most frequent variant and kept it largely unchanged, apart from adding a thicker border that worked better with other buttons, and creating a red version for mouse hover.  

The original Michael Allen’s word mark used Trajan Pro, which has gotten stale over the years thanks to ubiquity.  While researching alternatives, I discovered Imperia B, which closely resembled Trajan Pro but adding tails to most of the uppercase letters.  I thought it was the perfect typeface to connect with the brand’s history, yet add something new and unique, as the tails nicely mirror those used in the circular monogram logo.  I also dropped the word "clothier" from the word mark, to give it a cleaner, more elegant look. Even though the brand's official name is "Michael Allen's Clothier," customers almost always refer to the store as either "Michael Allen's" or "Mike's."

For the body and main headers, I chose the sans-serif Raleway, in a regular 400 weight and light 300 weight, respectively, for a more legible, minimal, and modern look. 

Functionality

Most importantly, the site needed to deliver the desired information and messaging clearly, particularly on mobile devices.  

New visitors are most likely to be curious about whether the store might be able to provide the products and services they are looking for.  The one-page scroll design makes this case, helping to control the narrative and get first-time visitors excited about being customers.  

Returning customers are most likely looking for contact information and store hours, and wouldn’t be interested in scrolling through other content to find it.  With the always-present menu button fixed on the bottom-right corner, all of that info is two easy clicks away.  

Mike also wanted to be able to make changes to information and add new photos as easily as possible, which he can do through a CMS editor that provides a way to edit just the content without the risk of unintentionally changing any code or design elements.  

In addition, the “What’s New” section presents a live Instagram feed (using an Elfsight plug-in) which showcases new ready-to-wear and announces sales and events, without Mike’s team needing to bother with editing the site itself.  

In terms of device responsiveness, while Webflow design changes cascade down from a larger, desktop-sized breakpoint, I designed everything with a mobile-first mentality. 

Challenges

The scroll indicator originally featured a needle graphic very similar to the one eventually used at the top and bottom of every section with a black background.  However, testing indicated that it wasn’t effective enough at communicating the intended message, and it was replaced with the arrow button that briefly flashes the text “Scroll Down ↓” when the page loads and on hover.  

Some animations were originally more dramatic but were toned down to increase legibility due to user-testing.  

I also tweaked a few areas of the copy after consulting with the team.

Some of the sections originally had white backgrounds and text blocks with black backgrounds and white text, but they were changed to create a more consistent style: black section background (or full-screen image), white text block background, and black text. 

Using so many large images carries a risk of weighing down the site, but the lack of e-commerce or a blog kept the rest of the page light, and with image-compression minimizing the problem as much as possible, the positive impact of bold, full-screen photos was deemed a net positive.

Takeaway

Mike and his team are thrilled with the design, and feedback from his clients indicates that newcomers spend more time on the site, are more likely to use the contact options or just come down and visit in person, and returning clients are able to find the information they need quickly. Overall, the positive responses indicate that Michael Allen's finally has a website design that is unique, striking, stylish and reflects its position as the ultimate destination for bespoke clothing and luxury menswear in the Pacific Northwest.