Redesigning Frontend Masters: Part II (Courses Page)

Okay.. So like the title suggests, this is actually a second part to a design publication. I recently completed a design challenge where I gave some parts of Frontend Masters a design overhaul and I documented how I went about the new designs.

Due to the length of the entire documentation, I decided to split them into two, with each part representing an entire aspect of the design. I published the first part where I focused on their Pricing Page some days ago and here goes the second part.

The Courses Page: Current Design

Current Courses Page

This page simply does one thing: it lists available courses. You get to browse from their ample list of courses, and there is a very effective search feature for when you have a particular course or instructor in mind.

Taking a look at the design however, there are a number of inadequacies as regards how information is presented, that affect the usability of this page. For better analysis, I’ll split this page into two sections; the head or introductory section and the listing section.

The Head Section

This section contains the navigation menu (nav bar), the notification panel, the page heading or title, the filter tabs and the search box. Looking at this section, there is so little and so much going on at the same time. We have a number of elements and colours improperly implemented.

Current Head Section

Looking at this section, the most obvious problem here has to be the colour combinations. Having a nav bar with wine colour, the slant orange line (which I addressed in part 1 of this publication), and a notification with two different blue shades is not the best colour combination.

First off, I would place the notification close to the nav bar, covering up the orange line, at least until the notification is dismissed. This helps to reduce the number of contrasting colours.

On the notification panel, the idea of enclosing the information in an overlay (dark box) to maybe draw more attention to it is rather unnecessary. The blue background colour that it has already does the job.

What I’ll do here is to stick with the dark blue shade created by the overlay (#347384) as our new background colour. This is because this colour is quite cooler compared to the background colour (#4EA2B8) which is quite bright.

The different colours as seen in the notification panel

Also, the hyperlink property on the course title (Introduction to Python) might not be necessary, as it links to the same page that the “register to join online” button leads to. We can definitely do away with it.

Lastly on the notification, the button’s background colour makes it seem like a primary action rather than the secondary action that it is. When styling several buttons on a page, one has to be careful as regards how much importance is attached to the actions that they perform by their appearance.

In an article tagged 7 Practical Tips for Cheating at Design, this ideology was addressed. See excerpt of the section addressing buttons below:

Excerpt from aforementioned article

Keeping this in mind, I’ll stick with a dark, low-contrast button colour for the notification section. This way, it doesn’t scream on the page, and neither does it compete with the “Join Now” button on the navigation section, which is actually a primary action.

New Navigation Bar with Notification

Moving on..

The current heading on this page reads “Frontend Masters Courses”. While this is simple and straight-forward, it also appears as unnecessary as the very-legible, typography-based logo already reads “Frontend Masters”.

I’ll substitute this title with a different phrase along with a sub-heading to accompany it. That way, we get some form of consistency with the Pricing Page.

Immediately superseding the title section, I’ll introduce an interesting filter that I hinted in part 1 of this article. This filter section is a modified version of the course icons collage that we currently have on the Home and Pricing Pages as seen below:

Current course icons as seen on Home and Pricing Pages

Currently, on the homepage, this icons serve as filters for courses. While this is a brilliant feature, the implementation in terms of UX doesn’t compliment it, as the icons do not appear as clickable, making the feature less obvious.

What I’ll do here is to introduce a subtle border around the icons so that they appear as small cards that are clickable. Also, with the help of Font Awesome Icons, I’d substitute the brand images for icons to eradicate the contrasting colours of the listed courses.

In addition, I’ll go ahead and introduce labels for each icon listed so as to ensure that people of different technical backgrounds can relate with them. With these, we have a more user-friendly filter section as shown below:

New Icon Section with Hover Effect

In the last part of this section, I’ll bring the search field together with the tabs, because they actually perform similar function — they streamline the listed resources as per user needs.

Also, I think it’s best we remove the “Learning Paths” link as it points to an entirely different page which unconsciously redirects users from this section. And considering that it is already listed as part of the links in the nav bar, it really doesn’t belong here.

Lastly, I’ll do away with the blue colour highlighting an active tab and introduce a subtle pink and a wine colour (as seen in the header), for background and text colours respectively. This helps to create a colour blend and ensure that the entire section is clean and simple.

See below:

New Title and Filter Section

The Listing Section

This section is pretty much the major reason why I chose this page. The UI and UX design here can definitely be improved, and I’ll explain how. Let’s take a look at what it looks like..

A fraction of the current Listing Section

The presentation of each course; the card design, the use of colours, fonts, and the way the images are placed too somehow don’t feel right.

There is also some sort of inconsistency as regards how the courses are presented when switching between ALL and POPULAR courses. We get a grid layout for the former, and a list layout for the latter.

While the grid style may be a deliberate implementation so as to display more courses, I totally feel the list style provides a better and cleaner UI. And moreover, I don’t see how displaying that much courses to a user is of any good. The list becomes overwhelming really.

Also, taking a look at how the images are presented, the course details are deliberately positioned to cover major parts of the image and this creates a huge mess. The resulting design is disturbing and difficult to process as you find yourself trying to see what the image is.

An interesting fact here is that the images somehow compliment the course details as they are the first to catch one’s attention. One can simply identify with a course in less than a second with the help of the images without having to read through the course details, and this is a huge plus in terms of UX.

So, first off, I’ll lose the grid layout to allow for courses to be displayed in list form, as implemented in the Popular Courses section. This will allow the accompanying images to be clearly visible and also, it ensures design consistency across all tabs.

The alternative to this would be to have the course details sit beneath the image, allowing for the grids to stay, but the individual course cards will however be tall; tall enough to take two rows of the list format, which is a lot more preferable.

The details section of each course will retain the structural look that it currently has, but with little modifications. I’ll substitute the black background for a white background so as to allow the contents in it pop. The colours of the texts inside of it will be inverted to have different shades of black.

The course titles will however have their colours changed to orange ONLY when you hover on their individual cards, so as to subtly distinguish them from the rest.

The buttons for “preview” and “access” will also be modified. They currently draw too much attention together so I’ll keep the background colour for the preview button while I substitute that of the access button for black.

I’ll also introduce some befitting icons to compliment each one and also to add some life to them. These changes, although minor, somehow improve the design and more importantly, the usability.

Let’s preview:

New List Section for Courses

Last change I’ll make here is the implementation of pagination. Currently, this section scrolls infinitely as ALL of the courses on the platform get listed at a go, without some form of pagination or a “load more” button to ensure user control and friendliness.

While a “load more” button would be a nice-to-have, it actually causes the list to grow endlessly as a user clicks on it, and eventually makes the page lengthy; bringing us back to the current problem.

A major pitfall of the load more button is its irreversibility. Once new entries are loaded, they can’t be unloaded or removed unless the page itself is reloaded.

This therefore makes “pagination” the most appropriate choice to solve this problem. Users can navigate to see more courses by simply moving to different pages, and can also move back to older pages with the aid of next and previous buttons respectively.

Pagination section

Bringing all of the modifications and sections together, along with the improved Footer section (implemented in the Pricing Page), we have a cleaner version of this page, with a better UX and accessibility.

New Courses Page

A comparison of the old and the new Courses Page..

If you missed the first part of this publication, click here to read it.

I would love to have your feedbacks as regards the entire redesign. Please endeavour to drop comments and also share.

--

--

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
Tosin Orimogunje

Tosin Orimogunje

Multi-disciplinary User Interface Engineer — passionate about building web and mobile user interfaces that are beautiful, functional, and inclusive.