Online Course Listings
The design effectively uses clear visual hierarchy and well-organized filtering options, making it easy for users to find specific courses by university or category. However, improvements could be made in reducing content density and enhancing contrast for better readability and accessibility.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast1
Content Readability & Clarity4
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions1
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load1
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
2Major
20Moderate
1Minor
Vague 'View course' buttons fail to urge immediate registration
Major
Conversion & Actions
The Problem
Each course card features a 'View course' button which only indicates course information viewing instead of a direct registration or enrollment action. The label is vague and does not make clear if it leads to purchase or signup, potentially causing hesitation.
Why it Matters
Users may be unsure how to proceed with enrolling, which can reduce conversion as they might not perceive these as final action CTAs.
How to Fix
Change button label to a more action-oriented phrase like 'Register Now', 'Enroll Today', or 'Start Application' to clearly guide users towards enrollment.
Issue Highlights
Page lacks strong visual hierarchy to highlight courses or calls to action
Major
Strategic Design
The Problem
The page header and filter sections use similar font sizes and colors, making it hard to quickly focus on courses or next steps. The course cards have minimal differentiation beyond item grouping.
Why it Matters
Users may have difficulty scanning or prioritizing content quickly, leading to slower decisions or frustration in finding relevant course information.
How to Fix
Increase visual emphasis on course cards or calls to action using size, color contrast, or layout changes. Simplify and differentiate the header and filter UI to create clearer content zones.
Issue Highlights
No timezone indicated for course start dates
Moderate
Ambiguous Date/Time/Timezone
The Problem
Course start dates like '6 Jul 26' and '29 Jun 26' are displayed without any timezone or regional context, causing potential confusion on the exact start time.
Why it Matters
Users may misunderstand the actual start timing of the courses, leading to missed deadlines or confusion.
How to Fix
Add a clear timezone or regional specification with each date, such as 'Start date: 6 Jul 26 (GMT+2)', or a global note explaining the timezone applied.
Issue Highlights
Close button on selected filter small tap target
Moderate
Accessibility & Input Ergonomics
The Problem
The 'X' button on the 'University of Cape Town' selected filter tag is relatively small, close to the text, and might be difficult to tap precisely.
Why it Matters
Users with motor impairments or those on touch devices may find it difficult to remove the filter without accidentally tapping the surrounding area or missing the target.
How to Fix
Increase the padding around the close icon within the filter tag to enlarge the tap target to recommended dimensions.
Issue Highlights
Low contrast for placeholder search text
Moderate
Color & Contrast
The Problem
The placeholder text 'Enter a search term...' in the search input has low contrast against the dark blue background, making it hard to read, likely below WCAG AA standards for normal text.
Why it Matters
Users with low vision or in bright environments may struggle to see the placeholder text, hindering their ability to understand what to input in the search field.
How to Fix
Increase the contrast of the placeholder text by using a lighter or more vivid color that meets at least WCAG AA contrast ratio of 4.5:1 against the background.
Issue Highlights
Low contrast for filter label text
Moderate
Color & Contrast
The Problem
The label text 'Quick search' and the 'Filter' label on the left sidebar appear in grey on white or very light background, likely below the 4.5:1 contrast ratio required for body text as per WCAG AA.
Why it Matters
Low contrast text is harder to read, especially for users with visual impairments or in low contrast viewing conditions, reducing readability on navigation sections.
How to Fix
Increase the darkness of these text elements or use a different color that provides sufficient contrast against the background to meet WCAG AA standards.
Issue Highlights
Filter icon and label vertically misaligned
Moderate
Visual Consistency, Imagery & Media
The Problem
The filter icon and its label ('Filter') on the left side are not vertically centered within their white background, making them appear off-grid.
Why it Matters
Misalignment can reduce the perceived quality and professionalism of the interface, distracting users and creating a less polished experience.
How to Fix
Adjust vertical padding or margin to ensure the icon and label are vertically centered and aligned with other sidebar elements.
Issue Highlights
Different background highlight styles for view toggle icons
Moderate
Visual Consistency, Imagery & Media
The Problem
The grid view icon has a grey background highlight, while the list view icon has no background highlight, creating inconsistency in how the active and inactive states are visually represented.
Why it Matters
Inconsistent highlight styles make it harder for users to understand which view is currently selected, increasing cognitive load.
How to Fix
Use consistent background highlight styles for both icons to clearly differentiate active and inactive states.
Issue Highlights
Filter icon above sidebar label lacks text label
Moderate
Visual Consistency, Imagery & Media
The Problem
The filter icon on the left sidebar is shown without a supporting text label nearby, causing possible ambiguity in its purpose.
Why it Matters
Users may be unsure what the icon does, increasing cognitive load and potentially reducing usage of the filtering feature.
How to Fix
Add a clear text label next to or below the filter icon to clarify its function.
Issue Highlights
Left sidebar filters and quick search lack clear distinction and usability
Moderate
Navigation & Structure
The Problem
The left sidebar includes filter categories and a quick search input but they appear visually flat and not clearly grouped, which may reduce ease of use and discoverability. The quick search is small and lacks explicit labels or instructions.
Why it Matters
Users may struggle to efficiently filter and find relevant courses, increasing cognitive load and time needed to locate content.
How to Fix
Improve visual grouping and contrast of filter options and quick search. Add clearer labeling and affordances for filter categories and search functionality.
Issue Highlights
Search icon tap target is too small
Moderate
Accessibility & Input Ergonomics
The Problem
The search icon in the quick search input on the left sidebar is visually small and closely integrated with the input text area, likely below recommended touch target size for comfortable tapping (44x44 pixels).
Why it Matters
Small tap targets can cause user frustration and increase error rates as users may mis-tap or struggle to activate the search function especially on mobile or touch devices.
How to Fix
Increase the tap target size of the search icon by adding padding or enlarging the clickable area around it to meet recommended minimum target sizes.
Issue Highlights
Sort by dropdown and view mode buttons too close
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Sort by' dropdown button and the grid/list view buttons are placed closely side-by-side with limited spacing, which reduces comfortable touch precision.
Why it Matters
Users may accidentally tap the wrong control, leading to frustration or needing to retry their action, especially on smaller or touch devices.
How to Fix
Increase horizontal spacing between the sorting dropdown and the view mode toggle buttons, or enlarge their clickable areas.
Issue Highlights
Horizontal alignment mismatch in header navigation links
Moderate
Visual Consistency, Imagery & Media
The Problem
Navigation items in the header like 'FOR YOU', 'FOR BUSINESS', 'LOGIN', and 'SIGN UP' have inconsistent vertical alignment resulting in a slightly off-grid appearance.
Why it Matters
Inconsistent alignment in navigation reduces interface cohesiveness and can make the interface feel cluttered or unprofessional.
How to Fix
Standardize vertical padding and margin across all header navigation items to align them properly on the same horizontal baseline.
Issue Highlights
No clear active state in primary navigation to show current page
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The top navigation links such as 'Explore', 'Browse Short Courses', 'Why GetSmarter?', 'About us', 'Blog', and 'FAQ' lack a visible active or selected state to indicate the user's current page location.
Why it Matters
Users may feel lost or unsure about their current location on the site, which can reduce confidence and increase effort navigating the interface.
How to Fix
Add a visible highlight, underline, or color change to the active navigation item corresponding to the current page.
Issue Highlights
Multiple navigation links and filter items are densely stacked on the left sidebar
Moderate
Navigation & Structure
The Problem
The filter list on the left sidebar contains many text links closely spaced with minimal vertical spacing, which may cause difficulty in distinguishing and clicking desired options, especially on touch screens.
Why it Matters
Dense click targets can frustrate users by causing misclicks or slowing navigation, harming usability and engagement.
How to Fix
Increase vertical spacing between clickable filter items and consider chunking categories or adding collapsible groups to reduce visual clutter.
Issue Highlights
Top navigation login and sign up links too close
Moderate
Accessibility & Input Ergonomics
The Problem
The 'LOGIN' and 'SIGN UP' links in the top right corner are visually separated only by a vertical bar and appear spaced too closely together for comfortable touch interaction.
Why it Matters
Close proximity of these links increases the chance of accidental taps on the wrong link, raising user frustration and error rates.
How to Fix
Increase spacing or add larger tap targets around each link to ensure they meet touch target size recommendations and reduce accidental taps.
Issue Highlights
Multiple course cards increase cognitive load
Moderate
Efficiency & Cognitive Load
The Problem
The screen shows multiple course cards with similar formatting in a grid, making it harder for users to quickly scan and differentiate between options.
Why it Matters
Users may experience cognitive overload when trying to distinguish the key differences between courses, slowing down decision-making and increasing abandonment risk.
How to Fix
Consider reducing the number of courses shown at once, or using visual hierarchy techniques such as progressive disclosure, expanding details only on demand, or summarizing key differences.
Issue Highlights
Unclear selected filters cause user to rely on memory
Moderate
Efficiency & Cognitive Load
The Problem
A single filter for 'University of Cape Town' is shown as a removable tag, but no other active filters or context about applied filters are visible.
Why it Matters
Users must remember what search or filter terms they applied, which slows down iteration and increases mental effort, risking frustration and mistakes.
How to Fix
Show a more comprehensive list of active filters, or provide clear visual indication of applied search criteria and their application status.
Issue Highlights
No prominent call to action for proceeding after course selection
Moderate
Flow & States Completeness
The Problem
The page lists University of Cape Town courses with 'View course' buttons, but there is no clear next step or guidance on what to do after viewing or selecting a course. There is no visible 'Enroll' or 'Add to cart' button to guide users towards completing a registration.
Why it Matters
Users may be confused about how to proceed after reviewing course details, potentially causing drop-off due to uncertainty about the enrollment process.
How to Fix
Add clear, prominent next step buttons such as 'Enroll Now' or 'Add to Cart' on or after the course detail view, and consider providing a progress indicator to guide users through the process.
Issue Highlights
Lack of emotional warmth and friendliness in institutional description
Moderate
Tone, Friendliness & Delight
The Problem
The description of the University of Cape Town uses formal, academic language ('inclusive, research-intensive, top-tier institution') without warmth or approachable tone, which may appear dry to prospective learners.
Why it Matters
A colder, overly formal tone can discourage users seeking inspiration or emotional connection, reducing engagement and motivation to enroll.
How to Fix
Add inviting, supportive language that highlights student-focused benefits or community impact to balance professionalism with warmth.
Issue Highlights
Confusing multiple sorting and layout toggles
Moderate
Efficiency & Cognitive Load
The Problem
User can toggle between grid and list views and also sort results, but these controls are grouped closely and visually competing in prominence.
Why it Matters
Having multiple toggles in the same visual area increases the number of competing decisions, potentially confusing users on which control to use.
How to Fix
Separate sorting and layout controls more clearly, and simplify toggle options by defaulting to the most common user preference.
Issue Highlights
Unclear primary user goal due to mixed navigation and actions
Moderate
Strategic Design
The Problem
The screen shows a mix of browsing, filtering, and a prominent 'Registrations' button, which may confuse users about the primary action they should take on this page.
Why it Matters
Users may be unsure whether to focus on exploring courses, filtering options, or registering, which could disrupt their task flow and reduce efficiency.
How to Fix
Clarify the primary goal of the screen by visually prioritizing key actions and grouping secondary actions distinctly. Consider re-labeling or repositioning 'Registrations' to align better with user intent.
Issue Highlights
Body text under course dates and details is too small
Minor
Content Readability & Clarity
The Problem
Supporting course details like 'Course starts in 4 weeks', '98% Student satisfaction', and '8 weeks' appear in small font size, which might be difficult for some users to comfortably read.
Why it Matters
Smaller text reduces readability, particularly for users with visual impairments or on smaller screens.
How to Fix
Increase the font size of these body texts to meet accessibility standards, aiming for at least 16px or equivalent for on-screen reading.
Issue Highlights