Artifox — UI/UX Redesign Case Study

Hey guys! Welcome to my first UI/UX Design case study!

As a budding designer and developer, I thought I would take a shot at examining existing designs and attempt to fix issues that I found to be either problematic for users or simply view as bad UI design. Either way, let’s get down to it!

Firstly, I’d like to say that I love the design of Artifox products. Their sleek, clean and minimalistic design doesn’t conflict with the practical uses of their products. They simply make gorgeous, functional products. Their website on the other hand… Has some issues.

According to StatCounter, the most common desktop display sizes are:

1366x768 (at 23.47%)
1920x1080 (at 19.96%)
1536x864 (at 8.65%)
1440x900 (at 7.39%)
1280x720 (at 4.89%)
and 1600x900 (at 4.01%)

Image for post
Image for post
StatCounter May 2019-May2020 — Worldwide Desktop Screen Resolution Usage

At each of these resolutions, the Artifox website comes up short on consistency and random misalignment of elements. Let’s take a closer look.

On the left and right sides, I’ve indicated the margins of the website with red lines.

  • The Cart Icon with its number of items isn’t aligned to the margin. In fact, it’s slightly off, creating an imbalance to the navigation bar.
Image for post
Image for post
Artifox Landing Page — 1920x1080

As we shrink down to the smallest common desktop resolution (1280x720), we find that the hero block no longer passes the margin. Awesome! I think this indicates that the website was designed for a 1280x720 resolution. However, the Cart and SIGN UP buttons are still facing issues with alignments. The “SIDE” text in the second last section is now close to the sides of the background image, making it harder to read.

You can check out the other resolutions here!

Image for post
Image for post

What about tablets? The most popular tablet in the market (the iPad) has a market share of 52.03% according to StatCounter. The iPad Pro 12.9" has an aspect ratio 1024x1366, which is the equivalent aspect ratio to the iPad Mini at 768x1024. For all intents and purposes, the iPad Pro 12.9" and the iPad Mini have the same viewing experience in that regard.

Image for post
Image for post

So what does a 768x1024 display look like on the Artifox website?

  • The Artifox logo can’t fit in its own line.
Image for post
Image for post

Now onto mobile. One of the most popular phones right now (as of June 2020) is the new iPhone SE. It has a 320x568 display. What does that look like in the Artifox website?

For the most part, it looks fine. However…

  • There is an inexplicable amount of white space at the top, just underneath the navigation bar. This is common on all mobile devices.
Image for post
Image for post
iPhone SE — Artifox

In general, the mobile layout of the website is pretty consistent on all mobile devices (both Android and iOS). The only noticeable difference is the hero block’s text width (shown in the image below). In my opinion, it would be better if the main header “FORM MEETS FUNCTION” stays in one line at all resolutions, while the subheading “MODERN FURNITURE FOR WORK, LIFE AND EVERYTHING IN BETWEEN” be left to two lines at most.

This would provide a cleaner, more consistent look to the hero section.

Image for post
Image for post
iPhone SE vs iPhone 11 Pro vs iPhone 11 Pro Max — Inexplicably large white space underneath the navigation bar.
Image for post
Image for post
iPhone SE vs iPhone 11 Pro vs iPhone 11 Pro Max — Even in wider displays, the “Keep” text is merging with the background image’s bed frame.

The Menu Overlay has an issue too. The Messaging software that they’ve embedded into the website completely covers their Social Media links. This is an issue because we can’t seem to get rid of the Messaging software. It’s always in the forefront of the display, meaning it’s impossible to access the Social Media links from the Menu Overlay.

Image for post
Image for post

These UI design issues propagate from the landing page to other parts of the website. As for the overall User Experience, I’d say that the website is very easy to navigate. Most, if not all, of their issues originate from the UI design. The one nitpick I would claim against UX design is the above issue concerning the Menu Overlay (since we can’t access the Social Media buttons). The Messaging software is constantly in the forefront of mobile displays, so it’s impossible to access the Social Media links from the Menu Overlay.

If anyone at Artifox is reading this, please know that I absolutely love the design of your products. I just want to see the quality of your website rise to match your designs!

Thank you for reading!

Disclaimer: Today is June 8th, 2020, so if there are any discrepancies with the existing Artifox website’s design, then Artifox must have updated it.

EDIT: I’ve developed my full redesign and it’s up on my GitHub! Check it out here: https://github.com/kvncnls/Artifox-Redesign

EDIT: It’s July 25th, 2020 and Artifox made a slight edit to their website.

They moved their Sign Up button! Woohoo! It’s consistent with all sizes too. Unfortunately, the input placeholder bugs out at 320px width.

Image for post
Image for post
Yes, they moved their Sign Up button! Woohoo!
The input’s placeholder text bugs out at 320px width.
The input’s placeholder text bugs out at 320px width.
At 320px width (iPhone SE size), the input field’s placeholder get clipped by the border.

I also noticed that when you hover over the background image of the Hero section, the cursor turns into a pointer. Strange…

I took a quick look at the CSS and fiddled around with the HTML and found that clicking the hero section background didn’t do anything. It just made the cursor turn into a pointer. That’s a big no-no! It confuses visitors into thinking that it’s a clickable link/button. In the GIF below, I refreshed the page to show a fresh version of the site (just to show you guys that I didn’t make this stuff up!)

https://gfycat.com/valuablemixedgoldfinch

What their dev can do is simply remove the cursor: pointer in the CSS. I’m not sure why this was even implemented into the CSS because (from what I understand) it doesn’t seem to be serving any purpose.

In any case, that’s a quick update on Artifox’s website. Thanks for reading!

EDIT — September 1, 2020:

Ugh!! Not sure why this is happening, but now their main product’s page has auto-play music (or video?) on. I’m not sure where it’s coming from right now (it’s like 11:45PM, I’m not going to spend time on this!), but I’ll definitely check it out later… Here’s the link: https://theartifox.com/collections/artifacts/products/desk-02-walnut?variant=30724558609

Written by

Self-taught dev. Self-taught designer. Wanna-be Stoic. Check out my LinkTree: https://linktr.ee/kvncnls

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store