Let's do a frontend & UX review - Dr. Martens

In this series I'm going to choose a random website, analyze the frontend code (performance & best practices) and UX, and present my findings. By taking a look at the issues on existing projects, we can improve our coding and UX skills and learn how to avoid issues in our own projects.

I have more than 5 years of experience in frontend development, eCommerce and writing professional-grade frontend audits and I've learned a lot by doing audits.

Today, we'll be looking at Dr. Martens website, because I like their shoes and it's an eCommerce site. What a perfect combination to start of the series! I'll go through select few things I've noticed while using the site.

Let's begin!

Header & Navigation

Header needs to showcase page branding (logo & colors) and should give users general idea about the content and what the brand is related to. Although Dr. Martens is a well-known brand, the header does a great job of giving users a general high-level overview of different products related to the brand (boots, shoes, laces, work boots, etc.).

The only issue I've spotted with the header is that it takes too much space. This wouldn't be an issue if the header is not fixed and is always visible when user scrolls. On smaller mobile screens, header can take up to 25% of the screen space.

Navigation is one of the most crucial elements on the website, so it's important for it to be implemented well. Unfortunately, navigation on desktop has a few UX issues. First of all, mega menu displays the moment user hovers on it, which causes an issue when user doesn't want to open the menu but hovers over it accidentally.

Additionally, user needs to be careful not to switch mega menus when if they hover the mouse from the main category to the links on accident.

Category page

Product images are well done and they showcase products perfectly and I'm leaning more towards this layout of category page for Dr. Martens, rather than a classical 2-column layout with filters listed in the sidebar. Since filters are limited to a dozen or so options, it was a good decision to go with the filters dropdowns listed in a single row.

Product cards themselves are sort of lacking. On desktop, color variations are displayed on hover, meanwhile the similar product cards on homepage have them displayed all the time. It would be useful to showcase color swatches in a single row, if possible.

Additionally, product cards lack a hover (focused) style in order to show the user what is the link to the product and what is not.

Product page

Product page layout looks alright for most cases.

On product image swatch hover, I found it confusing for the main product image to change. Clicking on the image swatch takes user to entire different product page, so all changes and previews being done on the current page are not related to the image swatches. If user has selected a shoe size and changed the shoe color after that (link to new product), they lose their shoe size choice because they navigated away. This could be communicated better, although this needs to be solved with redesigning this section.

Also, I've found a minor issue with the product description. The text container is too wide which makes text difficult to read on regular and wide desktop screens.

Checkout

Checkout UX is really well done. Header is simplified to keep customer's focus on the checkout form. This is tried and proven way to boost conversions.

Checkout form is divided into several steps and there is only 1 input in the row which ensures readability.

Frontend performance

Based on the number of requests, devs should consider merging individual JS and CSS files to reduce the amount of requests. Lazy loading images should also be considered.

Here are some of the performance issues I've encountered while using Dr. Martens site.

Homepage document size is about 5Mb, which is a lot of data to load on the first load, especially on slower and unreliable internet connections.

There is a flash of unstyled text (FOUT) happening on each page load, so fallback font is displayed until the main font loads. This can be solved with caching.

Additionally, image lazy loading can be improved. Below the fold images can be lazy-loaded to improve loading. Images took up to 50% of website's download size, so more strict lazy loading may improve performance.

Render-blocking resources can also be loaded in a better way to improve site render times.

Conclusion

Dr. Marten's site has a beautiful design, but there are some fundamental UX issues with header and navigation that need to be fixed. Additionally, color variation functionality on product page needs to be presented in a different way. Cart and checkout are really well done - header and navigation elements are reduced to minimum to keep the user focused on the checkout flow, and checkout form inputs are placed in individual rows and divided into multiple steps which improves conversion rates.

As for frontend, the site downloads lot of data on the first load (about 5Mb on the homepage) which can be improved by lazy loading images, using critical CSS & improve caching. FOUT when loading a page also looks out of place, which should be fixed by caching fonts or using better fallback fonts.

These articles are fueled by coffee. So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.