Course page with multiple registration options



  • I'm designing a website where people register for courses (online or physical/in-class). The difference with other websites is that every course may have multiple registration options (multiple sign-up buttons).

    For example, the course "Cooking in 30 days" has three options:

    • Class A - Mondays - $40
    • Class B - Sundays - $40
    • Class C (Online) - Fridays - $35

    Currently, this is how I am doing it:

    Idea 1

    enter image description here

    • ✅ Users will Immediately see all options (no extra clicks)
    • ✅ Users can compare options
    • ❌ The page looks empty when only one option is available
    • ❌ I can't make the signup button or card sticky (so it stays when user scrolls). The alternative I can think of is an anchor link to signup cards section like a "back to top" button.

    Idea 2

    enter image description here

    • ✅ Can make Signup card sticky
    • ❌ Users can't compare options easily
    • ❌ Some users (especially because we have some eldery customers) may not understand how those buttons (< and >) work

    Mobile Version of both

    enter image description here

    Which one do you think is better (and why)? Also, do you know examples of other websites doing this? I searched dribble, Google and visited some learning websites I knew like udemy, LinkedIn learning, ... but couldn't find a design for "multiple" options.



  • You can't make the cards sticky but you can put the price table in a block and make it sticky. https://codepen.io/tutsplus/pen/abojPjP . It even fixes the other problem, if there is only one price, the price row can take up the whole width of the block.

    enter image description here




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2