Change from left menu navigation to top menu
The Task: To do research and user testing on change from left menu to Top menu navigation and prototyping in Figma.
Project Goal: To enhance user experience, improve usability, and optimize accessibility for Learnpoint’s LMS platform.
Team Members & Collaborators:
My role – UX designer.
Results
- Reduced Development Costs and Time
- Enhanced Competitive Advantage
- Facilitating usability
- Improved User Engagement
Problem
- Notifications are not visible if you navigate away, leading to missed important information.
- The aesthetic of the dark color in the existing left menu is perceived as too serious and boring.
- Need a homepage with all groups and classes.
- The filter needs to sort, filter, pin, or bookmark.
Solution
- Top menu that gives learners a visual impression.
- Improved functionality of notifications in the top menu, visible from everywhere. Quick overview of incoming notifications.
- Homepage with groups in the form of cards that can be sorted, filtered, and pinned if needed.
Research
Stakeholders interview
Interview stakeholders including sales and support teams who know the users best and the company’s needs.
Competitive Analysis
Most LMS platforms use a left-side navigation menu as a best practice, while only a few rely on top navigation. Some of them remove the top menu on scroll, keeping only the second-level menu for relevant content. Others make the page title sticky instead of using breadcrumbs. Itslearning is unique among LMS platforms for using only a top menu. What makes it risky to change.
The analysis highlights a strong need for change and test of changes before implementation to improve the user experience.
Sketching
Prototyping and testing
Usability testing – Prototype 1 A/B testing.
Usability testing – Prototype 2 A/B testing.
User testing and Iteration
To ensure the solution met real user needs, I conducted user testing sessions (A/B testing) of two Mobile and Web versions.
We recruited 5 users matching the target group. Each session included a short intro, task-based testing, and open-ended questions.
Key Findings:
Filter categories need to be reviewed, what is most relevant.
The cards should provide more information considering their size. There is a need to see important events in groups
- The notifications icon looks like an email.
Where are the notification settings when the entire notification page disappears?
- Uncertainty about how and when to use the pin function
- Superfluous with both icon, label, name and code for the group.
- Too big cards
Iteration:
Improve the filter function and make it more logical. Current groups should be placed at the top regardless, remove it from filters.
Find an icon that is suitable for informing about new content in the course, such as unassigned grades, etc.
Change to an icon more associated with notifications.
- Find a place on the profile page among the other settings.
- Remove the pin function, it is not necessary.
- Scale down and prioritize what is most important to show.
Feedback from support and the stackeholder
Key Findings:
Most chose version B with scrollable tab menu.
Notifications have the greatest recognition with bell as icon.
Smaller cards with less information, no icons and kept group category as color label.
Project planin in Jira
