ESG Certification Landing
The design features a strong visual hierarchy with bold typography and a clear call-to-action that immediately communicates the platform's purpose. However, improvements could be made in navigation clarity and contrast for better accessibility, especially for users with visual impairments.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast1
Content Readability & Clarity3
Visual Consistency, Imagery & Media0
Navigation & Structure0
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load1
Flow & States Completeness0
Strategic DesignRecommended Fixes by Impact
0Critical
0Major
10Moderate
5Minor
Low contrast for 'DGIA ESG' yellow text overlay
Moderate
Color & Contrast
The Problem
The small yellow text 'DGIA ESG' placed over a darkened but detailed background image has low contrast, making it difficult to read. The contrast is likely below WCAG AA for normal text due to the light yellow on varying dark areas.
Why it Matters
Users with moderately low vision or in bright environments may have trouble reading the yellow text, reducing comprehension of important branding or section information.
How to Fix
Increase contrast by using a darker yellow or gold shade, adding a semi-transparent dark overlay behind the text, or changing the text color to white or a high-contrast color.
Issue Highlights
Inconsistent Font Weights and Case in Navigation Menu
Moderate
Visual Consistency, Imagery & Media
The Problem
The navigation menu items show inconsistent font weights and text case styles. For example, "Accueil" is bold and capitalized differently compared to "Labels", "Annuaire", and "Journal", which have lighter font weights.
Why it Matters
Inconsistent navigation styles can confuse users and reduce the perceived professionalism and usability of the site.
How to Fix
Standardize the font weight and text casing for all navigation menu items to ensure uniform appearance.
Issue Highlights
Small tap target for user profile icon
Moderate
Accessibility & Input Ergonomics
The Problem
The user profile icon button in the top right corner is visually small, likely less than 40x40 pixels.
Why it Matters
Small tap targets make it difficult for users, especially on touchscreen devices, to tap successfully without accidental presses on adjacent elements.
How to Fix
Increase the size of the profile icon tap target to at least 40x40 pixels by adding appropriate padding or margins around the icon.
Issue Highlights
Competing Primary Action Buttons on Homepage Banner
Moderate
Efficiency & Cognitive Load
The Problem
The homepage banner includes two equally emphasized primary action buttons: 'DÉCOUVRIR NOS PORTAILS' and 'CONSULTER LE REGISTRE'. Having two competing calls to action of similar prominence presents an unnecessary decision point to users.
Why it Matters
Users must decide between two main actions simultaneously, which may cause hesitation or confusion, threatening smooth task flow and completion.
How to Fix
Prioritize a single primary action button on the banner and reduce the salience of the secondary action, or sequence the actions to reduce immediate choices.
Issue Highlights
No indication of what happens after 'Découvrir Nos Portails' or 'Consulter Le Registre' clicks
Moderate
Flow & States Completeness
The Problem
While the primary calls to action 'Découvrir Nos Portails' and 'Consulter Le Registre' are visible, there is no supporting text or visual cue indicating what the user should expect after clicking either button.
Why it Matters
Users might be uncertain or hesitant to click the buttons without understanding the next steps, which can reduce engagement or cause confusion.
How to Fix
Add brief descriptive tooltips, subtext, or visual indicators that clarify where each button leads or what the next user action will involve.
Issue Highlights
Low contrast for navigation link 'SE CONNECTER'
Moderate
Color & Contrast
The Problem
The navigation link 'SE CONNECTER' is displayed in a light gray text on a white background, which creates low contrast likely below WCAG AA standards for normal text. This makes it harder to read for many users.
Why it Matters
Users with visual impairments or under certain lighting conditions may struggle to see this navigation option, potentially impacting navigation and user experience.
How to Fix
Increase the text color contrast by using a darker gray or a color with greater contrast against white, ensuring it meets WCAG AA contrast ratio of at least 4.5:1 for normal text.
Issue Highlights
Insufficient Hierarchy Between Headings and Body Text
Moderate
Content Readability & Clarity
The Problem
The main heading 'L'Excellence Africaine, Certifiée.' uses a very large bold font, but the subtitle below it ('La plateforme de référence...') is only slightly smaller and similar in weight, making it harder to visually distinguish the importance levels between heading and body text.
Why it Matters
Users may have difficulty quickly understanding the structure and key messages on the page if the text hierarchy is unclear.
How to Fix
Increase the size difference or reduce the weight of the subtitle text to create a clearer visual separation from the main heading.
Issue Highlights
Missing trust signals near certification claims
Moderate
Tone, Friendliness & Delight
The Problem
The hero text claims 'L'Excellence Africaine, Certifiée' without visible trust indicators such as certification details, validation methods, or recognizable certification authority logos nearby.
Why it Matters
Users may doubt the authenticity of the certification claim, reducing trust and increasing hesitation to engage deeply with the platform.
How to Fix
Include trust signals like certification authority logos, testimonials, or brief explanations of the certification process near the claim to reinforce credibility.
Issue Highlights
Navigation menu items positioned too close horizontally
Moderate
Accessibility & Input Ergonomics
The Problem
The top navigation menu items such as 'Accueil', 'Labels', 'Annuaire', and 'Journal' are spaced closely, with limited horizontal padding between them.
Why it Matters
Closely spaced clickable items increase the likelihood of user error by causing accidental taps on adjacent links.
How to Fix
Increase horizontal spacing between navigation links to improve tap accuracy and reduce accidental taps.
Issue Highlights
Misaligned Buttons in Hero Section
Moderate
Visual Consistency, Imagery & Media
The Problem
The two call-to-action buttons below the main headline in the hero section are not perfectly aligned horizontally; the right button is slightly higher than the left.
Why it Matters
Button alignment issues cause visual imbalance and can distract users from the primary calls to action.
How to Fix
Adjust vertical positioning and spacing of buttons to align them on the same baseline.
Issue Highlights
Misaligned Navigation Items and Right Controls
Minor
Visual Consistency, Imagery & Media
The Problem
The right side toolbar icons and text such as 'PALETTE', 'SE CONNECTER', and the profile icon appear horizontally misaligned relative to each other and to the main navigation menu links.
Why it Matters
Misalignment decreases visual harmony and can increase cognitive load, making the interface feel less polished.
How to Fix
Align the vertical centers of all right-side elements and ensure consistent spacing between them and the navigation menu.
Issue Highlights
Background Image Introduces Visual Clutter
Minor
Efficiency & Cognitive Load
The Problem
The busy background photo behind the main headline and buttons adds clutter and distracts from the primary content and calls to action.
Why it Matters
Excessive visual noise can reduce content clarity and increase user cognitive effort, potentially decreasing engagement.
How to Fix
Apply a stronger overlay, blur the background image more, or replace it with a simpler graphic or solid color block to emphasize the text and buttons better.
Issue Highlights
No Date or Time Provided in Main Content
Minor
Ambiguous Date/Time/Timezone
The Problem
The content does not include any visible date or time information, which might be important if the platform covers events or certifications that are time-sensitive.
Why it Matters
Without dates or times, users cannot assess the currency or relevance of the information.
How to Fix
Include clear date/time indicators where applicable.
Issue Highlights
Background image tone does not foster warmth or approachability
Minor
Tone, Friendliness & Delight
The Problem
The background is a photo of a formal panel discussion with muted dark colors, which may appear serious and formal but lacks warmth or friendliness.
Why it Matters
A colder visual tone may reduce emotional connection and user delight, which can affect first impressions and perceived accessibility.
How to Fix
Consider using imagery that conveys warmth, collaboration, or brighter colors to balance professionalism with approachability.
Issue Highlights
Small pager dots lack visible affordance
Minor
Accessibility & Input Ergonomics
The Problem
The two small pager dots centered near the bottom of the hero image are very subtle, with minimal styling suggesting interactivity.
Why it Matters
Users may not recognize these small dots as interactive controls for sliding content, leading to missed content or interaction confusion.
How to Fix
Increase size and contrast of the pager dots and add hover/focus states or labels to clearly indicate these are clickable controls.
Issue Highlights