The Question Bank is a crucial platform for students preparing for competitive exams, allowing them to solve questions from various subjects, track their performance, and access detailed explanations in both text and video formats.

I reduced the time to access essential filters by 35%, increased explanatory video views by 42%, and cut frustration clicks by 50%. The user experience was hindered by navigation issues, low content retention, and an inefficient mobile design. My redesign improved usability, boosted engagement, and increased user retention on the platform.

Context

The Question Bank is essential for test-takers to practice questions and monitor their progress. However, both quantitative and qualitative analyses revealed usability problems directly affecting learning and user retention.

Key challenges identified

• Navigation difficulties: Essential filters and settings were hard to access, leading to frequent complaints to support.

• Low engagement with explanations: Many users didn’t watch the explanatory videos or interact with the corrections.

• Mobile issues: On mobile, 50% of users didn’t scroll past half of the page, missing important information.

• User frustration: Heatmaps and recordings showed repeated clicks on non-interactive elements.

To address these issues, I led a strategic redesign grounded in real data from Clarity, heuristic evaluations, and direct user feedback.

1. Initial diagnosis

Before defining solutions, I conducted a thorough analysis using multiple methods to identify critical usability problems and improvement opportunities.

• Heuristic evaluation – I identified issues with consistency, visual hierarchy, and accessibility, as well as difficulties in interacting with filters and question feedback. The layout had redundant elements, unclear navigation, and a lack of standardization.

• Heatmaps – Revealed a high number of clicks on non-interactive elements, indicating users expected actions that weren’t available. Interaction with content below the fold was low on mobile.

• Session recordings – Showed many users struggling to locate essential features and frequently returning to previous screens, indicating unintuitive navigation.

• Support complaints – A significant number of users reported difficulties finding filters, understanding feedback, and navigating the platform efficiently.

Image 1: old question bank design

These insights shaped a redesign driven by solid evidence and aligned with real user needs.

2. Implemented improvements and impact

Navigation restructuring

• Problem:

  • Filters were fixed at the top of the screen across all devices, forcing users to scroll up to adjust them.

  • Usability was compromised, as any change interrupted the flow.

  • On mobile, this structure made navigation even more uncomfortable due to limited screen space.

• Solution:

  • Desktop: Kept filters at the top, but added a floating side menu, allowing adjustments without scrolling back.

  • Mobile: Moved filters to a fixed bottom menu, enabling quick access without harming the reading experience.

  • Filter hide option: On desktop, users can now hide filters after selection to maximize screen space.

• Impact:

  • 35% reduction in time to access and adjust filters.

  • Fewer frustration (rage) clicks, indicating smoother navigation.

  • Increased scrolling on mobile, suggesting a more fluid and barrier-free experience.

  • Significant drop in filter-related support complaints.

Video 1: expanded view of the new floating side menu

3. Increased engagement with explanatory videos

• Problem:

  • Explanatory videos were shown in full-screen modals, blocking all other interactions.

  • Users lost sight of the answered question, filters, and other content while watching the video.

  • The modal format also prevented note-taking or simultaneous reference to other content.

• Solution:

  • Videos are no longer shown in modals. Instead, they now load below the question box, allowing continuous interaction.

  • Users can view the answered question, take notes, and adjust filters while watching.

  • The flow became smoother, eliminating repetitive modal toggling.

• Impact:

  • 42% increase in video views, indicating improved engagement.

  • 21% more students revisiting questions after watching the video, showing better content absorption.

  • Reduction in frustration clicks as reported by Clarity, confirming a more seamless experience.

Video 2: opening of the explanatory video below the question answer

4. Better use of space and more mobile engagement

• Problem:

  • On mobile, 50% of users didn’t scroll past the midpoint, missing essential info like explanations and feedback.

  • The interface didn’t visually indicate more content below, leading to premature navigation drop-off.

  • Top-fixed filters reduced usable space and pushed important content down.

• Solution:

  • Filter repositioning: Filters were moved to a fixed bottom menu, allowing in-place adjustments without taking up visible space.

  • Visual hierarchy restructuring: Key content was prioritized within the top 30% of the screen to encourage scrolling.

  • Content signaling improvements: Explanations and feedback were redesigned for greater visibility and perceived value.

• Impact:

  • Significant increase in scrolling on mobile, with more users accessing crucial content.

  • Higher engagement with explanations and feedback, enhancing learning.

  • Smoother navigation, resulting in a more intuitive experience.

Video 3: fixed bottom menu on the mobile version

5. Reduced user frustration

• Problem:

  • Many users clicked on non-interactive elements, showing poor affordance.

  • This led to rage clicks and increased support complaints.

  • The interface lacked clear visual feedback, reducing predictability.

• Solution:

  • Improved interactivity: Interactive elements were redesigned with clear visual cues, such as hover states and color shifts.

  • Better visual feedback: Subtle animations and microinteractions provided immediate responses to user actions.

  • Component standardization: Buttons and links were made visually distinct from static elements.

• Impact:

  • 50% decrease in frustration clicks, indicating more intuitive navigation.

  • Fewer support complaints about unclear interface elements.

  • Overall better user experience, with smoother, more predictable flows.

Image 2: redesign of the desktop and mobile versions

Overall impact after 40 days: better usability, higher engagement

Behavioral analysis and Clarity insights guided strategic changes, resulting in a smoother and more efficient experience. The interface optimization reduced friction and boosted student interaction with essential features.

Key results

• 35% reduction in time spent looking for settings, thanks to reorganized and visible filters on all devices.

• 21% more students redoing questions after watching feedback, reflecting better support for continuous learning.

• 42% increase in video views, driven by the removal of modals and inline video display.

• 50% drop in frustration clicks, thanks to clearer feedback and more responsive interactions.

• Significant increase in mobile scrolling, ensuring broader access to previously ignored content.

• Longer average session times in the Question Bank, suggesting the experience became more engaging.

• Significant decrease in support complaints about navigation and usability issues, validating the design improvements.

Left image (3): current click map, 40 days after the launch. Right image (4): old click map, 40 days before the launch.

The redesign enhanced not only the user experience but also the platform’s educational impact, making navigation more intuitive, seamless, and effective.