Filed Case Study Part 1, Mobile Page Re-design
This write up will be on the shorter side, as this is a single page. This was effectively a test that I had to do for an interview within one day.I was tasked with re-designing one of the web pages on their website. This plays quite well into my strengths as I tend to specialise more in mobile first design, and I especially specialise in converting desktop pages into mobile friendly renditions.
I chose the landing page. My main reason for this, was because this is where most of the advertisement is made. Much of the conversion of the website occurs here. So it’s much more pivotal than others that this page is done right, a bad impression means that the user will simply not be interested in their product.
So the first step before I did anything, was to of course take a good look at how it looked on my own mobile phone. Immediately, there are a few glaring problems with this. The first, is the chat function obscuring the home menu page. This is problematic for obvious reasons, accidental presses, confusion, etc. It’s just a giant walking pain point, but, there is another huge problem also, it’s fixed, and set to the bottom.
This, is going to be a huge problem on newer devices (such as iPhones), because the menu buttons for those are actually on the screen. The usable size for the screen is considerably reduced. Also, the screen only appears when you scroll up (as many fixed bars, tend to be). This results in another particularly annoying pain point; the user is scrolling and reading, and accidentally hits a button, which takes them to another page. So, immediately this is something I intend heavily on changing, almost immediately. The navigation, though, it’s very easy to see why it’s placed here, for immediate, easy conversion.
Other than this particularly glaring error, the site overall, does do it’s job fairly well. It’s not exactly the new amazon, but for a landing page, it could be far worse (but also, far better).
With that said. The first thing I did on the front page, was similar to what I did with the THS site. I put a CTA, as the first thing the user sees. This removes the problem of the navigation to which I pointed out earlier. Additionally, this is also at the bottom of the page but fixed, however, it will not appear when scrolling up and will always be visible. Additionally, there is a clear white border so the user can see where the buttons are, and it directly contrasts with any phone menu buttons, It’s also considerably smaller to take up less space. On the UI side, I changed a few things also. The main layout of the page actually stays the same, but I moved the sponsors section back to the middle of the page, instead of the middle. This is replaced with the same CTA that is at the bottom. This is quite important, because the company has quite a few high level sponsors on their product, notably Sony. So, if the user sees that, the can feel a lot safer investing and buying the product, it’s a bit puzzling that this small detail was left off, but there it is, additionally, a “dark mode” UI option was added.
