UI Study Case: RWID Landing Page Redesign
This is the second part of RWID study case, you can see the first part [here]
After between one to two weeks of working on RWID branding study case, I’m thinking of what should next this brand system apply. I come up with two ideas, the website, and the future app. How the website look like before? here below is the screenshot of it (at least header and hero). The left one is before 16 June (click here for full page screenshot) and the right one is 16 June until this article was written. I don’t know what happens, seems they changing the business model of their products and services.
The problems are still the same as before, some elements are not meet the basic visual design principles. But in the context of a website, I also need to notice usability thing too. before 16 June, I do a heuristic evaluation (so clearly I do analyze and all the research to an old version of their landing page). It’s a method to analyze usability based on 10 Jakob Nielsen’s principles.
Here’s some major point (revised):
- Consistency and standards:
1. I think the user would wonder a little bit about what all program is located
2. Too many options on the navigation bar it giving the user consuming more time thinking - User control and freedom:
1. There is no confirmation on the logout button (revised to severity level 2)
2. There is no global search bar (revised to severity level 1)
3. User can’t click the tags and the level of course label (like beginner, intermediate) it limits the freedom of user when browsing - Recognition rather than recall:
1. I think users will ask what is that thing on the top-left? is that the logo?
2. I think users will wonder what is that investment section?
3. Innacurrate badges date - Visibility of system status:
1. The status on the current course page is red colored and I think it makes the user a little bit confuse because red is commonly used for the unavailable links.
Ideation
So what I could do in order to improve the usability and the visual? like I said before I’ll apply the design system that I made before on branding guidelines but before that, I made a user flow and site map to make sure all the content and the flow are organized.
The next one is competitive research. Again, this is the cheap, fast and effective way to ideation so we know what’s the gap of the product between competitors because some companies might have a lot of design member teams and done more better research before.
Wireframing
After all defining and ideating process, I start doing a wireframe phase. It’s not fully grayscale or black & white. But It’s okay I think because we already had a style guide.
[Click here to see the full screenshot]
Mockup/high-fidelity
The thing I should note is there is a little bit of size change to fit alignment on all sections but the major change is at the Call-to-Action section because I still confused about the new membership program so instead of the new price, why don’t I experimenting with the 4-column banner.
Final words
It’s fun so far, but I think time is a little bit challenging for me. Because I wish I could do all progress faster. Again, both the writing and the design are still far from perfect but I learn a lot from this and will be learning more. All constructive criticism and suggestions will be very welcome :) thanks for reading.
