Reimagine UI/UX for Dojos, Modules, and Challenge Start

[alyssaditroia]

Goals

• Create a clean, organized interface and improve flow.
• Improve navigation between dojos, modules, and challenges.
• Maximize use of screen real estate, maintaining readability.
• Enhance the challenge start and solve flow keeping relevant information accessible.
• Reduce friction for users navigating between challenges/modules.
• Improve discoverability of content and engagement features.

Initial Brainstorming Ideas

Dojo Layout

• Utilize horizontal space so that engagement features, dojo descriptions, and modules are all visible.

• Add a hideable sidebar for extended navigation (dojo, module, challenge).

• Minimized top navigation bar with search and quick directory navigation (Dojo_Name / Module_Name / Challenge_Name).

Module & Challenge Experience

• Reimagine module layout so starting challenges, viewing descriptions, and browsing other descriptions can all be viewed or hidden while the workspace is in view.

• Potential two-column layout: challenge workspace on one side, challenge names with expandable descriptions on the other. Allow multiple descriptions to be expanded.

• Add previous/next navigation that works across challenges, modules, and dojos.

Next Steps

• Gather feedback
• Create mockups to visualize potential layouts.

[alyssaditroia]

• I really like the layout ideas and examples from @daedlock WIP: Redesign pwn.college  #911. These updates bring a lot of usability and layout improvements.
• For the moment, I think the fastest way to deliver value is by layering improvements onto what we already have.

Some options could be:

Updating components that improve UX the most.

Possibly mounting React/Web Components in targeted spots if interactivity benefits

Some additional screenshots of the ideas by @daedlock and me are below:

• hovering for descriptions
  

* Utilizing horizontal space

* Other ideas for description availability

* Adjusting workspace and sidebar size

[daedlock]

Thanks for creating the issue. I am close to bringing the first draft to life. Have been busy with infrastructure setup for this. We moved from csr to ssr which will make SEO better and also faster first meaningful paint.

In terms of ui, I also have some unimplemented ideas that i will dump here for discussion

1. Dock based layout for workspace (user can create and position panels to hold any subset of the ui). Think vscode layout for split panes and tabs

2. Settings page

• select theme for both app and service (user can mix themes if they want)
• initial shell (bash, fish, zsh)
• ssh keys

3. Expandable/resizable Sensei panel on the right (like cursor)

[daedlock]

The active PR is here #926