Web Design · UX/UI · Front-end Development · Photography · Copy-Writing
Whom are you looking for?
User Research, Competitive Analysis, UX/UI Design, Photography, Copywriting, Interactions, Site Implementation, Brand Refresh
Created a new website and digital brand identity for Portland's premiere menswear and bespoke clothing store, including designing the layout, shooting the photography, writing the copy, revamping the logo, and implementing the site using the Webflow platform.
Michael Allen's Clothier needed a brand new website with a stylish, unique, and modern design. They don’t do online sales, so the main goals of the new site were turning first-time online visitors into actual in-person customers, along with giving existing customers easy access to the information they wanted. And of course, a mobile-responsive design was a must, as well as the ability to update certain aspects of the site themselves as needed.
After talking with Mike and researching the competition, I pinpointed five main areas to focus on when crafting the brand’s new digital identity: custom/bespoke, luxury, friendly, classic/modern balance, and functionality. I wanted the site to guide new viewers through a specific narrative that highlighted everything wonderful about Michael Allen’s, while giving the feeling of being sewn together as it was being viewed.
I designed and built the site from the ground up, including writing the text, shooting the photography, and revamping the logo, using a one-page scrolling design that incorporated lots of bold, full-screen imagery; lively, conversational copy; extensive use of animations; and various clothing/tailoring motifs, such as buttons, needle and thread, and stitching. I wanted to place a special emphasis on the idea that dressing well has a big impact on one's first impression to others.
At the time of this writing, the site has just been launched, and the response has been extremely positive. Mike and his team are thrilled with the design, and his clients agree that Michael Allen's finally has a website that reflects its position as the ultimate destination for bespoke clothing and luxury menswear in the Pacific Northwest.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.