Redesign of the educational personal account page

There is a functioning custom LMS for training in the psychologist Dmytro Karpachov's school.

A new design needs to be proposed without breaking the structure and functionality.

The competition is announced for the redesign of only one page — the course content page.

The course page is organized as an accordion with nested accordions. Also, within the content blocks, there may be buttons that open additional content.

Before the actual work, I suggest exploring the live working cabinet (test access will be provided upon request in personal messages)

Screenshots that should be taken as a basis for the redesign (this is what needs to be shown in your design). They contain all the key elements and blocks of the school:

as well as its second part, which contains a block with questions:

Competition conditions:

• For the competition, only the mobile version of the design is required (the desktop version will be done later by the winner of the competition)
• The winner of the competition must also redesign simple pages:
  • login 
  • change password 
  • profile
• The color scheme should preferably remain (it corresponds to the corporate style)
• The fonts should also preferably remain (but this is not as critical as the colors)

What to pay special attention to:

• Currently, in the long course, if you open modules and topics and buttons – it is difficult to understand where you are.
  There is a lack of a navigation tree.

  A possible solution:

  Place a block on the screen that would contain a "hamburger" menu button (like on mobile) and the name of the topic that the user is currently viewing. If the user is not in any open topic (for example, just entered the page) – only show the menu button.

  This block is fixed to the top edge of the screen (sticky header).

  When clicking on the block, it expands and shows the structure (course content) – modules and topics. When clicking on any item, there will be a smooth scroll to that item (topic).

  You can only click on available topics.

  It is also necessary to somehow mark completed or still unavailable topics. For example, next to the completed topic – put a green checkmark, and for the unavailable one – display 50% in gray.

  
  
• Orange "Task" buttons that open new content. Currently, when clicking the button, its appearance does not change, and the user does not understand what to do next. This is especially relevant after the user logs in after some time and sees the button (which they have already clicked) and does not understand whether they need to click it again or if it has already opened the content.
  Solution: When the button expands, its status should change. For example, its color changes from orange to gray, and also add a status arrow (right ᐳ and down ᐯ) with animation (as done on topics). Also, after opening, change the text on the button to "Collapse"
  
  
• In the test account, you will have all topics available (open), but for new users, the opening of topics is done gradually, and they see a note that the topic is still unavailable
  

What is not liked (why we are organizing the competition)

• The design was initially made for desktop, and then adapted for mobile; it needs to be the other way around
• Carelessness, something is crooked somewhere, does not match, etc. (the effect that this is a serious company is ruined)
• On mobile, a lot of space is wasted in vain (margins, etc.) - it looks beautiful in the picture, but is very difficult to use
• The audio player is our custom one, so its design should also be redesigned; it takes up too much space, and the volume control can be removed (almost no one uses it)