Redesigning Gary Simon’s Coursetro

Coursetro (dot com) is an online learning platform founded by Gary Simon where he teaches design and code. Gary himself is the instructor, and his lectures and tutorials cover a wide range of topics; from mobile development, to web, including front-end and back-end development.

I stumbled on his platform about six months ago, while I was searching for Vue.js tutorials. I went ahead to purchase a number of courses on the site, and I have since become a fan of Gary himself, his courses and tutorials.

Recently, I realised how much improvements his site could use, so I decided to give his site a well-deserved makeover.

The Current Design

I’m only going to work on the home (lading) page, so this is what it currently looks like:

Current Coursetro Homepage

At a glance, what you get is the course listing, which is quite alright. The logo is awesome and the colour theme is good. The presentation is not great and the site is almost empty, if you take away the course listing.

It looks like something that was swiftly put together in other to make the courses accessible; which is forgivable really. The overall user-experience and presentation could use a lot of revamping.

The Head Section

The head section is almost perfect, no major glitch, font looks great and navigation links are ok. The choice of lower casing (for the links) is perfect as it compliments the logo in a way. However, due to the gradient going on in the background, the links appear to have a faint colour, compared to that of the logo.

What I would do here is to stick with the green colour from the left (#179B98) as the header’s background colour. This same colour appears as labels on the course cards, so the colour choice isn’t out of the blue. By applying a white colour on the links, they appear clearer.

Lastly, I’ll move the search icon (and field) away from here as it doesn’t belong with the navigation links, knowing fully well that it is meant for the courses.

Search icons (or fields) when presented here (in the header) sometimes convey an overall website search, and that is not what is intended for here.

Introducing a Hero Section

A hero section is (often times) the first visual element that a visitor encounters on a web page. It is used to provide an overview of a site’s most important content, to introduce a brand, or to sell a product.

This section usually consist of a big banner (and sometimes videos), either as a background, a component or a slide. It always contains an introductory text, sometimes a paraphrase and a call to action (button).

The Hero section compliments a web page visually. A huge percentage of websites today usually have this section. An example is Slack’s hero section, as seen below:

Slack’s Hero Section

Back to the design, I introduced an image, courtesy of Pexels, a heading and a paraphrase that highlights some of Coursetro’s biggest features. Also included, is a button that provides access to all courses.

With these modifications, the header and hero section looks like this:

New Header and Hero Section

Improving The Listing Section

This section will have a number of improvements as the current design didn’t do much as regards consistency or visual appeal. First major change here is the inclusion of the search box.

I will be placing it here permanently in order to accompany the listings and to enable quick and easy search of courses without having to toggle it’s display.

One thing about togglers when used for search fields is that the entire search feature is likely to be missed.

Next improvement is the inclusion of a quick links (or filters) section. Let’s take a look at this screenshot from Udemy:

Udemy Filter Section

The filters (above the courses) are intended to ease the burden of search as they provide quick access to specific categories of courses without having to type or navigate the entire site.

So, by selecting a number of top (or important) categories, we have a couple of tag-like categorisations. They appear as white tags but take on the primary colour when hovered; as shown below:

New Search and Filter Section

The Course and Tutorial Cards

In the listing section of the current design, we have two categorisations happening; one (supposedly) for tutorials and the other for courses.

Current Listing Section

This section is poorly executed because the top listing doesn’t carry a heading that describes what the cards represent. What you get is a label on the card with (code) braces. The course section on the other hand has a heading.

Everything almost looks fine, except for the clustering of the cards, the overlapping of card sizes due to varying text lengths and image dimensions. There is also a slight misalignment of the heading too, so I’ll clean this all up.

First, I’ll ensure that all images are of the same dimensions, and also implement an ellipsis (three dots) on titles that are longer than expected; so they get displayed in full on hover or when you click on them. This ensures that the display of the cards are uniform and clean.

I’ll label the top section and kill the code label that the cards currently carry. With these, we have some sort of structural and data consistency. The buttons also stay, but they’ll carry the primary colours to have more life to it and would have befitting labels.

This gives us a cleaner look as shown below:

New Listing Section

Improving The ‘About’ Section

Current About Section

This section currently appears lifeless, under-utilised and misprioritized. Take a look at this section from Treehouse, where they combine the power of texts, image and right colours to elaborate more on their offers.

Treehouse screenshot

This seems more like it. What I’ll do here is to insert Gary’s image here considering the introduction is from him, so as to present him to the visitors. Also, in addition to the current introduction on the site, I’ll highlight some major benefits of using Coursetro in order to sell the platform further.

With these changes, we have:

New About Section

Introducing a Testimonial Section

Testimonials are an extremely vital part of the success of a product or business. They serve as feedbacks and comments from happy customers and are one of the best ways to build credibility and to show potential customers that you are worthy, reliable and more importantly, to emphasise a sense of community belonging.

I’ll add a slide-like form of testimonials that will contain as many entries as desired.

Testimonial Section

Adding A Call To Action (CTA) Section

This section further emphasises the pro membership feature so as to encourage people to signup by highlighting briefly, the benefits of having a pro account. This section also compliments the entire page visually.

Cleaning Up The Footer

I’ll also clean up the footer, include missing and relevant links or items to ensure a meaningful and clean presentation. I’ll bring in the Youtube and Twitter links to encourage community growth across various media; and I’ll categorise the footer links properly so as to convey appropriate meaning.

Let’s see..

New CTA and Footer Section

Bringing Everything Together

Overall, the new design takes the current user experience, the cleanliness and data presentation from good to better, and obviously, to great. It gives Coursetro the look and feel that it deserves, and it also highlights how tiny improvements can play vital roles on a site’s structure, presentation and functionality.

New and Improved Design

Please share your thoughts in the comment section and share with people. Thank you :)

--

--

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.