Training Course Registration
The interface benefits from a clean, consistent blue-and-white color scheme and clear, well-organized sections that guide users through course promotion, selection, and registration steps. However, improvements are needed in input field labeling clarity and the differentiation of actionable elements to enhance usability 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 & Structure2
Conversion & Actions4
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
10Major
11Moderate
6Minor
Placeholder Text in Form Fields Has Low Contrast
Major
Color & Contrast
The Problem
Placeholder or label text such as 'Name', 'First Name', 'Phone Number', 'Training', and 'Model' inside the form fields on the right column are in a blue shade that is difficult to read on the white background, likely below WCAG AA contrast levels.
Why it Matters
Essential form field labels being hard to read can cause user confusion and form completion errors, especially for users with visual impairments.
How to Fix
Use a darker blue or black color for the placeholder text that meets a minimum contrast ratio of 4.5:1 against white.
Issue Highlights
Small text input fields reduce tap target size
Major
Accessibility & Input Ergonomics
The Problem
The input fields for Name, First Name, Phone Number, Training, and Model have a narrow height and compact padding, making them likely smaller than the recommended minimum touch target size (~44x44px).
Why it Matters
Small inputs can cause difficulties for users trying to tap accurately, especially on small screens or for users with motor impairments, increasing error rates and frustration.
How to Fix
Increase the vertical height and padding of text input fields to meet or exceed 44x44px touch target size guidelines.
Issue Highlights
Unclear distinction between 'Name' and 'First Name' fields
Major
Content Readability & Clarity
The Problem
The registration form has separate input fields labeled 'Name' and 'First Name' without clarification. It's unclear whether 'Name' means full name, last name, or something else, which can confuse users.
Why it Matters
Users may hesitate or enter inconsistent information, leading to registration errors or data quality issues.
How to Fix
Rename the fields to clarify their meaning, such as 'Last Name' and 'First Name', or combine into a single 'Full Name' field if appropriate.
Issue Highlights
No visible primary navigation bar or menu
Major
Navigation & Structure
The Problem
The screens lack a visible primary navigation bar or menu that allows users to easily switch between major sections. Navigation appears implicit via buttons but no consistent navigation UI element is present.
Why it Matters
Users may struggle to understand the app structure or navigate to other sections easily, causing confusion and hindering exploration.
How to Fix
Add a persistent primary navigation bar or menu visible on all screens, clearly labeling key sections.
Issue Highlights
Primary CTA unclear in Registration form
Major
Conversion & Actions
The Problem
The registration form uses a WhatsApp-specific 'Send via WhatsApp' button without a generic or traditional form submission CTA, which may confuse users wanting to submit registration through other means or expect a standard submission confirmation.
Why it Matters
Users might hesitate to complete registration without a clear, universally understood CTA, reducing conversion likelihood, especially for those not comfortable using WhatsApp.
How to Fix
Add a more conventional primary CTA for form submission (e.g., 'Submit Registration') alongside or instead of the WhatsApp send button, making the intended action clear and accessible to all users.
Issue Highlights
Lack of privacy or data protection information on registration form
Major
Tone, Friendliness & Delight
The Problem
The registration form collects personal information such as name and phone number but has no visible privacy statement, data use disclosure, or trust signals near the form or submit button.
Why it Matters
Users may hesitate to provide sensitive personal details without knowing how their data will be handled or protected, reducing trust and form completion rates.
How to Fix
Include a brief privacy note near the form or submit button explaining data handling and reassure users their information is secure.
Issue Highlights
Form submission method unclear after WhatsApp send
Major
Flow & States Completeness
The Problem
The registration form includes a 'Send via WhatsApp' button but does not provide any onscreen confirmation, success message, or clear indication of what happens after clicking it.
Why it Matters
Users may be uncertain whether their registration was successfully sent or if additional steps are required, causing confusion and possible abandonment.
How to Fix
Add a visible success or confirmation state after sending the form via WhatsApp, or guide the user on next steps after clicking the button.
Issue Highlights
No confirmation or reassurance after form submission
Major
Tone, Friendliness & Delight
The Problem
The registration form has a 'Send via WhatsApp' button but does not show any confirmation message or reassurance about what happens after sending, nor any indication of successful submission or next steps.
Why it Matters
Users may be uncertain if their registration was received, leading to frustration, repeated submissions, or abandonment.
How to Fix
Add clear feedback after submission like a confirmation message or instructions on what to expect next to reassure users their registration was successful.
Issue Highlights
No context linking course selection to registration input
Major
Efficiency & Cognitive Load
The Problem
The registration form has generic fields 'Training' and 'Model' without visible guidance or connection to chosen courses, requiring users to remember what they reviewed.
Why it Matters
Users might input incorrect or incomplete information, increasing errors and drop-off.
How to Fix
Pre-fill or link course selections to registration form fields or provide visible course context during registration.
Issue Highlights
Registration form input labels are unclear
Major
Strategic Design
The Problem
The form fields use placeholder text only without clear static labels, which can cause confusion about what information is required (e.g., 'Model' and 'Training' fields are ambiguous).
Why it Matters
Users may be uncertain what to enter or forget what the fields represent once they start typing, which increases the chance of errors or form abandonment.
How to Fix
Add explicit labels for each input above or beside the fields, and clarify ambiguous fields with more descriptive text or helper information.
Issue Highlights
Inconsistent font weights and icon sizes in courses list
Moderate
Visual Consistency, Imagery & Media
The Problem
The course category titles use a bold font style and a darker blue, but the bullet icons and software icons vary in size and contrast. Some icons appear larger or pixelated compared to others, causing inconsistency within the course list items.
Why it Matters
Inconsistent icon sizing and font weighting reduces visual cohesion, making the list harder to scan and affecting perceived quality.
How to Fix
Standardize icon sizes and ensure uniform font weights and colors across all list items in the courses panel.
Issue Highlights
Light Blue Text on White Background Has Insufficient Contrast
Moderate
Color & Contrast
The Problem
The light blue text used for labels like 'CURRENT PROMOTION' and the labels inside the input fields on the right column have low contrast against their white backgrounds, likely below WCAG AA standards for normal text.
Why it Matters
Users with low vision or in bright environments will struggle to read this text, reducing usability and accessibility.
How to Fix
Increase the contrast by darkening the blue text or changing it to a darker color that meets at least WCAG AA contrast ratio (4.5:1 for normal text).
Issue Highlights
Off-center button alignment in promotion section
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'View Courses' and 'Register Now' buttons within the promotion card are not perfectly aligned on the same horizontal baseline; the 'View Courses' button is slightly lower than the 'Register Now' button.
Why it Matters
Misaligned buttons can cause a distracting visual inconsistency, making the interface look less polished and trusted.
How to Fix
Adjust vertical alignment so both buttons share the same baseline and consistent padding inside the container.
Issue Highlights
Input fields in registration form misaligned vertically
Moderate
Visual Consistency, Imagery & Media
The Problem
The input fields for 'Name', 'First Name', 'Phone Number', 'Training', and 'Model' in the registration form have inconsistent vertical spacing and slight horizontal misalignment relative to the form container edges.
Why it Matters
Misalignment increases cognitive load as users may perceive the form as poorly designed, affecting form completion rates.
How to Fix
Adjust vertical spacing between input fields to be consistent and align input fields exactly with the container edges.
Issue Highlights
Buttons 'View Courses' and 'Register Now' placed too closely horizontally
Moderate
Accessibility & Input Ergonomics
The Problem
The 'View Courses' and 'Register Now' buttons are adjacent horizontally with small spacing that could be less than 8-10px between edges, potentially causing accidental taps on the wrong button.
Why it Matters
Insufficient spacing between clickable targets increases the chance of user errors and frustration during interaction.
How to Fix
Add additional horizontal spacing between the buttons to meet recommended minimum spacing for touch targets (about 10-12px).
Issue Highlights
Separate screens for course viewing and registration add steps
Moderate
Efficiency & Cognitive Load
The Problem
The app separates course details and registration onto different screens, requiring users to navigate back and forth.
Why it Matters
Users must perform extra navigation and recall information between screens, increasing effort and time to register.
How to Fix
Integrate a compact registration form directly on the courses screen or provide quick registration links per course.
Issue Highlights
Call-to-action buttons lack visual hierarchy
Moderate
Strategic Design
The Problem
The 'View Courses' and 'Register Now' buttons are visually similar, with only the background color differentiating them slightly, which makes it hard for users to quickly identify the primary action.
Why it Matters
Users may hesitate or be confused about which action to take first, leading to decreased engagement or missed registrations.
How to Fix
Use distinct styling for primary versus secondary buttons, such as different sizes, stronger contrast, or placement to make the main action stand out more prominently.
Issue Highlights
No clear active state or page indicator
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The app screens do not show a clear active state or highlight to indicate which section or page the user is currently viewing.
Why it Matters
Users may find it hard to know their current location within the app, leading to disorientation and potential navigation errors.
How to Fix
Implement active states on navigation elements or page headers that clearly indicate the current screen.
Issue Highlights
No clear call to action after viewing course details
Moderate
Flow & States Completeness
The Problem
The Courses screen lists course categories and sub-items but does not provide a visible next step button or instruction to proceed with registration or further exploration.
Why it Matters
Users might finish reading about courses without knowing how to move forward, potentially causing drop-off from the conversion funnel.
How to Fix
Add a clear call-to-action button or link on the Courses screen leading to registration or additional information.
Issue Highlights
No confirmation for potentially destructive WhatsApp send action
Moderate
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The 'Send via WhatsApp' button triggers sending personal registration data without visible safeguards such as confirmation or undo options.
Why it Matters
Users might unintentionally send their information or feel uncertain about the action, leading to frustration or privacy concerns.
How to Fix
Implement a confirmation step or allow users to review and confirm data before the WhatsApp send action completes.
Issue Highlights
Unclear or inconsistent field labels reduce trust
Moderate
Tone, Friendliness & Delight
The Problem
The registration form uses unclear field labels like 'Name' and 'First Name' separately; also, fields named 'Training' and 'Model' could confuse users unfamiliar with what info to provide.
Why it Matters
Unclear or inconsistent form labels can confuse users, diminish trust, and create errors during submission.
How to Fix
Use clearer, consistent field labels and optionally add tooltips or examples to clarify what is expected.
Issue Highlights
Redundant input fields for name
Minor
Efficiency & Cognitive Load
The Problem
The registration form asks for both 'Name' and 'First Name' separately with no clear explanation why both are needed.
Why it Matters
Users may hesitate or confuse what to enter, causing friction and extra thinking.
How to Fix
Combine name inputs into a single full name field or clarify field purposes.
Issue Highlights
Ungrouped multiple form fields in Registration
Minor
Conversion & Actions
The Problem
The registration form displays five input fields stacked together without grouping or section headings, which can be confusing or overwhelming at a glance.
Why it Matters
Ungrouped fields can reduce form scannability and user understanding, increasing friction during completion.
How to Fix
Group related fields logically and consider using fieldsets or headings in longer forms for better clarity.
Issue Highlights
Busy and dense text listing in course details reduces clarity
Minor
Tone, Friendliness & Delight
The Problem
The course details column uses a compact, dense layout with small icons and bullet lists which may feel visually cluttered and less friendly or inviting compared to the simpler registration panel.
Why it Matters
A dense, text-heavy presentation can overwhelm users and reduce engagement or emotional warmth, making the learning offer feel less approachable.
How to Fix
Use more spacing, simplified icons, or a friendlier tone in course labeling to better match the inviting atmosphere of other panels.
Issue Highlights
'Send via WhatsApp' button lacks strong 3D affordance
Minor
Accessibility & Input Ergonomics
The Problem
The 'Send via WhatsApp' button uses a flat style with minimal shadow or elevation, which may make its interactivity less obvious compared to more dimensional buttons on the screen.
Why it Matters
Users might not immediately recognize the element as a button, potentially leading to missed calls to action or confusion.
How to Fix
Enhance the button’s styling with stronger shadows, subtle gradients, or other visual cues indicating it is interactive and clickable.
Issue Highlights
WhatsApp send button icon ambiguous without label
Minor
Visual Consistency, Imagery & Media
The Problem
The send button in the registration form uses a WhatsApp icon but the icon may be unclear to all users, especially if they are unfamiliar with WhatsApp branding.
Why it Matters
Ambiguous icons can create hesitation or confusion about what action will occur when clicked.
How to Fix
Add a clear text label in addition to the icon to indicate the send action through WhatsApp.
Issue Highlights
Close placement of action buttons may cause accidental taps
Minor
Navigation & Structure
The Problem
In the 'Boost your professional skills' screen, the 'View Courses' and 'Register Now' buttons are placed very close horizontally, which may increase the risk of accidental taps.
Why it Matters
Users may accidentally trigger the wrong action, causing frustration and navigation errors.
How to Fix
Increase the spacing or separate these buttons more distinctly.
Issue Highlights