Your Vote Needed! New Course Page Design 🥇

Hi Everyone,

We have designed 3 possible variations of our course page on PianoGroove. This was based on student feedback and I’d love to get more of your valued opinions on how this should look.

We did this for 2 reasons:

  1. So that we have more info on the course page without having to click into each lesson
  2. So that we can split each course into more ‘digestible chunks’ of 3 lessons

Here Is The Poll. Please Cast Your Vote:

  • Design 1 - Simple Design
  • Design 2 - Simple Design With “Click Effect”
  • Design 3 - Left Progress Bar With “Click Effect”

0 voters

I’d like us all to cast our vote on the new design that you would like to see rolled out:

Here’s The 3 New Design Options - Click on the images to enlarge.

Design 1 - “Simple Design”

This design is simple and straightforward. A benefit is that all of the information is on the page is displayed by default, and you do not have to click to see the information.

When you click on the “Downloads” button, you will then see the available downloads, with the option to download right there.

The downside is that the page is very long, because all of the information is displayed by default:

Design 1: Default View

Design 1: Download Button


Design 2 - “Simple Design With Hover Effect”

This design is similar to the first design. The video description and downloads are hidden by default, and they can be displayed by clicking on the lesson title area.

The benefit of this design is that the page is shorter by default and easier to navigate.

Design: 2 Default View:

Design 2: Click Effect



Finally, Design 3: “Left Progress Bar & Hover Effect”

This is an alternative layout. The progress bar is now on the left hand side.

Video description and downloads can be displayed by clicking on the lesson title area.

Design 3: Default View

Design 3: Click Effect

Remember that you can click on each image to enlarge it.

Cast your votes and any feedback, don’t hesitate to let us know.

Cheers, Hayden :grinning:

1 Like

Three is nice …

1 Like

Yep that’s my favourite too Lori!

Thanks for the feedback :blush:

nice lesson Hayden! :blush:

1 Like

Number 3 is the way to go!

Less cluttered than option 1 & 2 and easier and much simpler to navigate. The notes are a nice touch

1 Like

Wonderful, thanks for your insight Paul.

The bookmark/notes feature is currently being implemented.

That you’re even taking the time to survey Is remarkable. I’ve been taking lessons for four years now with more than a dozen teachers, but your hands-on/feedback/quick-response efforts are just one more example of your extraordinarily responsive approach here. I’ll go with #3 as well~

2 Likes

Thanks for the vote Robert.

Yes we encourage all students to have their say on the direction of the website.

Any feedback or suggestions for improvement, we are always listening and open to the input of our community members.

Cheers!

I, too, cast my vote for option 3. Congrats, Ivan

1 Like

Brilliant, thanks Ivan.

It’s looking like we have a winning design emerging.

1 Like

voting for #1 owing to the unituitive nature of hover invoked ‘extra options’…

…also makes for poor conversion to mobile site interaction, and i like using my ipad for music…

i can see for long lessons, omitting the line (and space) for the downloads can aggregate to a decent space savings. I’d however, rather know what a site has to offer than ‘guess’.

1 Like

That’s a very good point Michael.

As a software designer, I very much value your input and insights here so thanks for sharing.

I agree that from a usability standpoint, the “click/hover” design element could be problematic on touchscreen devices.


Here's some feedback that I gave to Alex - our graphic designer - on the 3rd design:

Is it possible to add something to indicate that each lesson title is clickable, perhaps a down chevron symbol, or “more info” or “learn more” . Perhaps in a light grey font, perhaps even text and the down chevron. What do you think? With the “Preview Lesson” button, it’s not immediately obvious that the titles are clickable. Any way to make them more obviously clickable would be awesome.

Based on your feedback, I will also ask him to create a hybrid of designs 1 & 3 which has the left progress system, but with all the text and download button visible by default.

He’s on UK time and so he will be waking up shortly. I’ll get this feedback over to him know so I can share the designs here soon.

Thanks again, and we will get this looking and working perfectly for everyone.

Hayden

Hayden,

Yeah i really dig that progress bar, and the vertical rendition is sweet.

right so more visual indications are better wrt information

chevrons pointing left/down/up definitely work.

Perhaps you could collapse the list even further and employ a 2-level set of chevrons. Is it fair to say that the placeholder text “1. Section Title…” is really the names of each video that comprise the course ?

Then a fully collapsed 2-level hierarchy would only show the 'Section Titles, in a somewhat tight vertical, single line each listing. Every section is preceded by its own chevron.

Since each section’s information is collapsed by default, that is not visible in this initial listing of sections and takes up no space.

Then expanding the chevron next to a single ‘Section Title’ opens up the information for that_section_only.

Within a chevron-opened section, you’ll see the videos listed:

v “1. Course 1 Sections title”
> “1.1 Altered jazz chords in 251”
> “1.2 Minor 251 Progression”

now each video can have its chevron expanded to reveal downloads and any new stuff you’ll want to attach to video descriptions (like who’s the author)

anyway, nothing earth shattering about this concept, it does however have the benefit of familiarity …

good luck with the rollout,
Michael

Awesome… I think we are onto something here.

The goal is a happy medium between:

  • a clear and concise layout/design
    and
  • additional information on the contents of the course lessons

I think chevrons can help achieve this.

That’s a cool idea.

The Section Titles are a new addition.

Some courses are 15+ lessons, and so we decided that we could break down the courses into more manageable and trackable ‘sections’ or ‘phases’.

That way, instead of the student seeing one long block of lessons, they see 4 or 5 ‘sections’ or ‘checkpoints’ with the smaller steps (each individual lesson) inside.

Most courses start with 3-5 theory lessons and then move onto jazz standard studies where the theory concepts are applied and demonstrated.

The first section title will always group the theoretical aspect of the course. Perhaps even the first 2 section titles.

The next titles could group the jazz standard lessons by difficulty, or by the application of the theoretical concepts.

Each standard lesson features a particular application of theory, and so this can also be a basis for the grouping.


Brilliant, that really helps. Thanks Michael.

please change my vote from 1 to 3. I clicked before I read…thinking it was the example rather than below. Thanks Hayden!

1 Like

Rodger that Kim.

We have taken onboard all the feedback in this thread and created a hybrid of options 1 & 3 to get the benefits of both designs.

The hybrid design has:

  • left hand side progress icons
  • right hand side buttons
  • all text displayed by default

Cheers!