We're redesigning some of our landing pages. In this case each landing page has 6-8 course categories each of which contain 3-4 courses by date, time and price. Current Layout

Each course has a CTA button and is contained under collapsible course menu. The landing page currently opens with all menus expanded, which introduces the issue of needing to scroll down a lot to find the right course. We also believe we can organize the data better.

For this we've come up with a floating bar at the right side which, when clicked upon, scrolls to the right course category (e.g, category 4). Propose layout

We're wondering if there's a better way to do this. Suggestions to improve the layout would also be welcome.

  • Hi @t0urist , I added a new response for you. Hope it helps! Oct 9, 2019 at 18:33

2 Answers 2


I've included an alternate design that shows all course options by default, but may help to remove decision fatigue and page weight by minimizing the "select" buttons. Here, a user would need to select a course first, then in a modal choose which specific class. I think it degrades to a mobile view well too. Hope this helps!


Desktop view


Mobile View


Considering this is a landing page and the conversion rate is important and for it, you should show the CTA buttons instead of hiding them inside an accordion I will suggest to you 2 alternatives.

1) Showing all in open boxes and highlighting the most important.

enter image description here

2) My favourite because:

  • Too many options = more choice = easy to take no choice (and leave)
  • Showing options for the future you will lose the impulsive buying
  • Put the focus on whats matter

enter image description here

  • Good answer. Appreciate your efforts into answering this.
    – T0urist
    Oct 3, 2019 at 14:29
  • @T0urist If this answer helped you you can set as right answer clicking on check icon aside of the answer and upvoted if is useful to you. Thanks! Oct 3, 2019 at 14:36
  • Good answer. Appreciate your efforts into answering this. For a cleaner UI, Option 2 seems viable, however we need to list all the sub-courses available for each course type. While most course types have 4-5 sub courses, some can have over 8-10 items. I regret missing out on conveying this in the OP. As each open box is constrained in proportions, I wonder how would we fit items in such a case?
    – T0urist
    Oct 3, 2019 at 14:46
  • @T0urist Could you give me some examples and show me what you tried for it? I gave you a suggestion looking for your wireframes. I would love to help you but I can't do your job. Please, complement (edit) your question with more information. Oct 3, 2019 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.