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.
Users having trouble using your website? Or you just want someone to check if your website is up to par and following best practices? I can do a frontend and UX audit for your website. Limited slots available.
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.
This was just s small taste of professional audits that I do regularly. If you want me to do an audit for your website, check out the details here. Limited slots available.
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.
Top comments (6)
Love this, and the idea of random reviews!
Thank you very much. Glad you're enjoying it. Be on the lookout for more! :)
BTW, you're working for TomTom? I've talked to some devs from TomTom on We are developers conference in Berlin last year!
I look forward to reading more!
I am -- Oh wow, small world! You probably met our other dev advocate there, Jose! He and I are both speaking at the virtual We Are Developers in November!
Nice and useful analysis! What tool did you use to gather data and make frontend performance charts?
How about mobile app review?
Sure, I might do a mobile app review next. The idea of the article is to give a bite sized thoughts and analysis on the first things I notice when I use the site that might be of interest to devs. Doing a full-blown review and analysis would take hours and the report would be too long for this article.