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.

Old (left) and new version (right) as of 16 June

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.

User story & user flow chart
Information architecture/site map

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.

Competitive audit

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.

Landing page wireframe

[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.

Mockup/high-fidelity

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.

--

--

--

UI Designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Team Interviews: Jouni, Aragon’s Design Lead

Axure vs Balsamiq vs Mockplus vs Justinmind — Which Is The Idealest Choice of Chinese Designers?

Need to use a survey? Stick with the original

02—Community

Designing the interface

Challenge 1: Design Thinking- RIDD

The Best Design Tips for Landing Pages

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
Imam Abullaisi

Imam Abullaisi

UI Designer

More from Medium

eKYC App for Customer Onboarding — UX/UI Case Study

Don-8 app case study

UX Case Study : Redesigning KitaBisa App

UI/UX Case Study — Nusatrip.com