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%)
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.
- The main hero block (“FORM MEETS FUNCTION”, the text below it and the DESK button) extends beyond the margins.
- Scrolling further down, we see that the “SIDE” text isn’t aligned to the margin. It looks okay on 1920x1080, but as we lower the resolution, it starts to get wonky!
- And lastly, the SIGN UP button at the bottom is completely misaligned at every resolution.
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!
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.
So what does a 768x1024 display look like on the Artifox website?
- The Artifox logo can’t fit in its own line.
- The Cart still isn’t aligned to the margin, making the navigation bar slightly imbalanced.
- The main hero heading is now in the middle of the screen and is pressed against the navigation bar (it needs a top margin!).
- The “SIDE” text in the second last section actually looks better, but I would either align it to the margin or push it closer to the center of the viewport.
- Lastly, the SIGN UP button at the bottom is still misaligned completely.
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.
- In the second last section, the “KEEP YOUR SPACE TIDY” text is merging with the bed frame in the background. Strangely enough, even with wider mobile devices, the position of the text stays on the bed frame.
- Lastly, the SIGN UP button at the footer is still misaligned, along with a new issue with the email field being cut off!
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.
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.
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.
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!)
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