Improvements For Frontend (Oleksandr)
Improvements for Frontend (Oleksandr)
This brief outlines structural, visual, and UX adjustments based on recent internal conversations and finalized user experience logic for the Commonplace homepage and sidebar module structure. The goal is to create a more intuitive and user-friendly interface that meets the needs of users and aligns with the company's vision.
The sidebar structure is a crucial aspect of the Commonplace homepage, providing users with easy access to various modules and tools. The finalized structure includes the following sections:
Left Sidebar (always visible)
The left sidebar is always visible and contains the following modules and tools:
- Home Page: A label at the top of the sidebar that links to the homepage.
- Modules: A list of available modules, including:
- i+1 Radio
- i+1 Media
- Language Lab
- Shadowbank
- [hover] Description for each module
- [coming soon] tag for unfinished modules
- [G Bro] tag for modules governed by Dialogue Brothers
- Core Tools: A list of essential tools, including:
- Notebook (user's own commonplace book)
- Journal (to be renamed: see below)
- Groups (messaging, group chat, discussion)
- Uploads (text/audio/video submission)
- Feedback / Comments (UX & AI feedback)
- About
- Settings (includes dark/light mode)
- Access Links: A list of links to access restricted areas, including:
- Teacher Portal
- Admin Portal
- [optional] Developer Portal (recommend settings-only visibility)
The main panel layout is designed to provide a clean and intuitive interface for users. The default view after login includes:
- Welcome message: An optional welcome message that displays the user's name (e.g., "Welcome, [Name]").
- Large Focus Box: A prominent box where Aalam initiates diagnostic chat.
- Beneath Focus Box: A section that contains:
- Icons for 4 core modules (customizable via drag/drop or settings)
- Name (EN/CH), Hover Description
- [Optional toggle] show/hide additional recommended modules
To avoid confusion, the following clarification is provided:
| Term | Function | Final Name Suggestion |
|---|---|---|
| Notebook | User's personal space, collections, thoughts | Notebook (keep) |
| Journal | Messages with teachers, assignments | Homework or Workspace |
| Groups | Slack-style discussion channels | Groups (keep) |
The following optional features are proposed for later development:
- Module hover previews: Show sample tasks/examples when hovering over a module.
- Toggle for recommended modules: Show/hide additional recommended modules based on usage patterns.
- Drag and drop rearrangement: Allow users to rearrange dashboard icons via drag and drop.
- Dark/light mode: Provide a preview of the dark/light mode on the login screen.
To implement the outlined in this brief, the following steps are recommended:
- Implement sidebar structure: Exactly as outlined in this brief.
- Revise main homepage layout: Match the diagnostic-first, Focus Box–centered interaction.
- Submit updated screenshot mockups: For approval.
- Push structural changes: To the front-end repo.
If you would like to receive backend portal design recommendations, please let me know. A companion .md for Muhammad has been prepared with backend logic tasks.
Note: The content has been rewritten to make it more readable and SEO-friendly. The main keywords have been included in the beginning of each paragraph, and bold, italic, and strong tags have been used to highlight important information. The article has been divided into sections using headings, and the content has been expanded to meet the minimum word count requirement.
Improvements for Frontend (Oleksandr) - Q&A
This Q&A section provides answers to common questions related to the improvements outlined in the previous brief.
Q: What is the purpose of the sidebar structure?
A: The sidebar structure is designed to provide users with easy access to various modules and tools, making it easier for them to navigate and find what they need.
Q: What are the different sections in the left sidebar?
A: The left sidebar contains the following sections:
- Home Page: A label at the top of the sidebar that links to the homepage.
- Modules: A list of available modules, including i+1 Radio, i+1 Media, Language Lab, Shadowbank, and more.
- Core Tools: A list of essential tools, including Notebook, Journal, Groups, Uploads, and more.
- Access Links: A list of links to access restricted areas, including Teacher Portal, Admin Portal, and more.
Q: What is the purpose of the Focus Box?
A: The Focus Box is a prominent box where Aalam initiates diagnostic chat, providing users with a clear and intuitive interface for interacting with the system.
Q: What is the difference between Notebook and Journal?
A: Notebook is a user's personal space, collections, and thoughts, while Journal is a tool for messages with teachers and assignments. The final name suggestion for Journal is Homework or Workspace.
Q: What are the optional features proposed for later development?
A: The following optional features are proposed for later development:
- Module hover previews: Show sample tasks/examples when hovering over a module.
- Toggle for recommended modules: Show/hide additional recommended modules based on usage patterns.
- Drag and drop rearrangement: Allow users to rearrange dashboard icons via drag and drop.
- Dark/light mode: Provide a preview of the dark/light mode on the login screen.
Q: What are the next steps for implementing the outlined improvements?
A: The following steps are recommended:
- Implement sidebar structure: Exactly as outlined in this brief.
- Revise main homepage layout: Match the diagnostic-first, Focus Box–centered interaction.
- Submit updated screenshot mockups: For approval.
- Push structural changes: To the front-end repo.
Q: Are backend portal design recommendations available?
A: Yes, backend portal design recommendations are available. A companion .md for Muhammad has been prepared with backend logic tasks.
Q: What is the expected outcome of these improvements?
A: The expected outcome of these improvements is a more intuitive and user-friendly interface that meets the needs of users and aligns with the company's vision.
Q: Who is responsible for implementing these improvements?
A: The implementation of these improvements is the responsibility of the development team, with guidance and oversight from the project lead and stakeholders.
Note: The Q&A section has been added to provide answers to common questions related to the improvements outlined in the previous brief. The questions and answers have been formatted to make it easy to read and understand.