Creative Portfolio Dashboard
The interface excels in presenting a clean and modern profile layout with intuitive navigation and strong visual emphasis on user content and social proof. However, improvements could be made in contrast for readability in dark mode and clarity of certain toggles and button states to enhance usability.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity5
Visual Consistency, Imagery & Media2
Navigation & Structure2
Conversion & Actions1
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load3
Flow & States Completeness0
Strategic DesignRecommended Fixes by Impact
0Critical
5Major
18Moderate
4Minor
Poor contrast for small metadata text under thumbnails
Major
Color & Contrast
The Problem
The metadata text below each image thumbnail ('2.5k', '98k', and titles) uses a dark gray on a very dark background, likely below WCAG AA contrast ratio for small text.
Why it Matters
Difficult-to-read data can hinder users from understanding content popularity or image titles, reducing usability for those with vision impairments.
How to Fix
Use a lighter text color or add a subtle semi-transparent overlay behind the text to improve contrast.
Issue Highlights
Lack of clear user role and environment context
Major
Orientation Missing (Environment/Role/Location)
The Problem
The interface displays user content and some profile information but does not clearly indicate the current user role or context (e.g., whether viewing own profile, another user, or a specific mode). There is no visible breadcrumb or header to provide explicit orientation.
Why it Matters
Without clear orientation, users may become confused about their current role or location within the app, which can increase cognitive load and cause disorientation.
How to Fix
Add visible user role indicators or contextual breadcrumbs to clarify the current environment or mode. For example, explicitly label 'Your Profile' or 'Viewing Jenny Lee's profile'.
Issue Highlights
Unclear purpose of 'Get in touch' toggle button
Major
Conversion & Actions
The Problem
The 'Get in touch' button next to the toggle switch is not a clear CTA because it does not specify what action will occur. The toggle format further adds ambiguity about whether it's turning on/off a feature or initiating contact.
Why it Matters
Users may hesitate or be confused about what interaction is expected, reducing the chances of engagement or contact.
How to Fix
Replace the toggle with a clear button labeled with the specific action, e.g., 'Send Message' or 'Enable Contact'. If toggling availability, clarify the state and provide distinct labels for on/off states.
Issue Highlights
Small toggle switch touch target
Major
Accessibility & Input Ergonomics
The Problem
The toggle switch labeled 'Get in touch' appears to be less than 40x40 pixels, which is smaller than recommended touch target sizes.
Why it Matters
Small touch targets are harder to tap accurately, increasing user frustration and error rate, especially on mobile or for users with motor impairments.
How to Fix
Increase the size of the toggle switch to at least 40x40 pixels, or add padding around it to enlarge its touch area.
Issue Highlights
Small icon button with unclear touch area
Major
Accessibility & Input Ergonomics
The Problem
The circular share icon button next to the toggle appears small and might have a touch target smaller than 40x40 pixels.
Why it Matters
Small icon buttons without sufficient padding are difficult to tap accurately, increasing the chance of user error.
How to Fix
Increase the button size or add invisible padding to ensure an adequate touch target (minimum 40x40 pixels).
Issue Highlights
Unlabeled icons in profile description and interaction areas
Moderate
Visual Consistency, Imagery & Media
The Problem
Several icons such as the sharing icon, social media icons on the profile card, and location pin near 'Melbourne, Australia' lack textual labels or tooltips to clarify their action or destination.
Why it Matters
Without labels, users unfamiliar with these icons may not understand their purpose, increasing frustration or reducing feature usage.
How to Fix
Add accessible labels, tooltips, or aria-labels to all icons to clarify their function.
Issue Highlights
Scrolling Marquee Text Distracts From Main Profile Content
Moderate
Efficiency & Cognitive Load
The Problem
The marquee-style scroll of large professional role text at the top distracts visually from more important static profile details.
Why it Matters
Moving text can draw attention away from critical user information, increasing cognitive load and making it harder to focus.
How to Fix
Replace scrolling text with static or user-controlled navigable tabs or sections, reducing unwanted motion.
Issue Highlights
Low contrast for location text at bottom right
Moderate
Color & Contrast
The Problem
The location text 'Melbourne, Australia' in a gray color on a dark background is low contrast and may not meet WCAG AA standards.
Why it Matters
Users with low vision may struggle to identify the location information.
How to Fix
Use a lighter text color or increase font weight to improve the contrast and legibility.
Issue Highlights
Low contrast for faint gray tab labels
Moderate
Color & Contrast
The Problem
The tab labels 'Posts', 'Review', 'About', and 'Settings' appear in a faint gray color against a dark background, likely falling below WCAG AA contrast ratio for normal text.
Why it Matters
Users with low vision or color blindness may have difficulty reading these tab labels, impeding navigation.
How to Fix
Increase the text contrast by using a lighter color or make the font weight bolder to improve visibility.
Issue Highlights
Weak Visual Hierarchy in Profile Statistics
Moderate
Content Readability & Clarity
The Problem
The profile statistics ('312 Followers', '18 Following', '4.5 Rating', '3x Collaborated') have very similar font sizes and styles, causing them to blend together and making it hard to quickly parse the different metrics.
Why it Matters
Users may find it difficult to scan and comprehend the key profile statistics at a glance, reducing the effectiveness of this important info.
How to Fix
Use size, weight, or color contrast to create stronger hierarchy and separation between each statistic so users can easily distinguish them.
Issue Highlights
Inconsistent vertical alignment of header navigation items
Moderate
Visual Consistency, Imagery & Media
The Problem
The navigation items "Discover", "Feeds", "Collaborations", "Messages", and "Wallet" at the top are not perfectly aligned vertically; the "Messages" item with badge appears slightly off in vertical position compared to others.
Why it Matters
Misaligned navigation items create a sense of visual imbalance and reduce the overall professional appearance of the UI.
How to Fix
Adjust the vertical alignment of navigation items to ensure they sit on the same baseline and have consistent vertical padding.
Issue Highlights
Inconsistent button styling and interaction elements
Moderate
Visual Consistency, Imagery & Media
The Problem
The "Get in touch" toggle button and the "Get in touch" button on the profile card use different styles and interaction types (toggle vs outlined button). The share icon button also uses a different shape and border style. This inconsistency in button form and style can confuse users.
Why it Matters
Consistent button styles help users quickly recognize clickable elements and understand interaction patterns.
How to Fix
Standardize button styles and interaction states for similarly purposed actions, for example, use consistent button shapes, colors, and toggle vs standard button usage.
Issue Highlights
No active state visible in global top navigation
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The top navigation bar with 'Discover', 'Feeds', 'Collaborations', 'Messages', and 'Wallet' links does not visually indicate which section is currently active or selected.
Why it Matters
Without an active state, users struggle to understand their current context in the app, leading to confusion and disorientation.
How to Fix
Highlight the currently active navigation item with a distinct style such as underline, bold font, or color change to improve clarity.
Issue Highlights
No clarification on 'Get in touch' toggle function
Moderate
Tone, Friendliness & Delight
The Problem
The 'Get in touch' toggle switch lacks supporting text or trust signals to explain what enabling it entails, what data might be shared, or privacy protections involved.
Why it Matters
Users may feel uncertain or hesitant about enabling contact availability due to lack of transparency, reducing trust and potentially decreasing engagement.
How to Fix
Add reassuring copy near the toggle explaining its function clearly and any privacy or contact expectations, along with optional link to privacy details.
Issue Highlights
Toggle and Button for 'Get in touch' Creates Redundant Steps
Moderate
Efficiency & Cognitive Load
The Problem
The interface has both a 'Get in touch' toggle switch and a separate 'Get in touch' button, which causes duplicated actions requiring the user to decide twice on the same intent.
Why it Matters
Users may be confused by having to interact with two controls for the same purpose, increasing mental effort and reducing efficiency.
How to Fix
Consolidate the 'Get in touch' functionality into a single control, either a toggle or a button, to reduce cognitive load and steps needed.
Issue Highlights
Unclear purpose and function for 'Get in touch' toggle
Moderate
Flow & States Completeness
The Problem
The 'Get in touch' toggle button is active but does not indicate what happens when toggled on or off, creating ambiguity about its function in the current context.
Why it Matters
Users may be unsure if toggling this controls availability for contact, messaging permissions, or another feature, creating confusion about how to proceed.
How to Fix
Add a clear label or tooltip explaining the toggle's effect and, if relevant, a call-to-action or next-step button related to 'Get in touch'.
Issue Highlights
Off-grid alignment of stats and action buttons in profile sidebar
Moderate
Visual Consistency, Imagery & Media
The Problem
The follower/following/rating/collaborated stats bar is not horizontally aligned with the "Edit profile" and "Edit link" buttons below it. The buttons appear shifted more to the right causing visual imbalance.
Why it Matters
When related components are not consistently aligned, it increases cognitive load and distracts users from quick comprehension of available actions.
How to Fix
Align the left edge of the action buttons directly with the left edge of the stats bar to create a clean vertical alignment.
Issue Highlights
Metrics section missing clear labels or legend for icons
Moderate
Visual Consistency, Imagery & Media
The Problem
The stats row showing followers, following, rating, and collaborations uses numeric values with star and 'x' icons but lacks clear labels or legends. For example, '3x' next to Collaborated is ambiguous without explanation.
Why it Matters
Users may misinterpret numbers and icons without clear labels, leading to confusion about what metrics represent.
How to Fix
Add explicit labels or tooltips describing each metric and clarify what '3x' represents.
Issue Highlights
Crowded interactive elements in profile header
Moderate
Navigation & Structure
The Problem
The profile header area has several buttons and toggles ('Get in touch' toggle, share icon, 'Edit profile', 'Edit link') tightly grouped together with limited spacing, risking confusing users regarding click targets.
Why it Matters
Crowded interactive elements increase the chance of misclicks, reduce usability especially on touch devices, and may frustrate users trying to navigate quickly.
How to Fix
Increase spacing between buttons and toggles, visually separate different groups of actions, and consider grouping related actions under a single menu where appropriate.
Issue Highlights
Vague 'Get in touch' button in top right of profile preview
Moderate
Conversion & Actions
The Problem
The 'GET IN TOUCH' button in the profile preview is outlined but lacks clarity about next steps or consequences of clicking it.
Why it Matters
A vague CTA can cause hesitation and reduce click-through rates because users are unsure what to expect.
How to Fix
Make the CTA more action-oriented by specifying the next step, e.g., 'Contact Jenny Lee' or 'Send Message'.
Issue Highlights
Small spacing between 'Get in touch' toggle and share button
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Get in touch' toggle and the circular share button are placed very close together with less than 8 pixels between their touch areas.
Why it Matters
Closely spaced interactive elements can cause users to accidentally tap the wrong control, leading to increased input errors and frustration.
How to Fix
Increase horizontal spacing between the toggle and share button to at least 10-12 pixels.
Issue Highlights
Too Many Profile Action Buttons in Close Proximity
Moderate
Efficiency & Cognitive Load
The Problem
The profile area includes separate buttons for 'Edit profile', 'Edit link', 'Get in touch' toggle, and a share icon all clustered together, forcing users to decide quickly among multiple similar action controls.
Why it Matters
Having multiple action buttons together without clear separation or prioritization adds decision complexity and slows task completion.
How to Fix
Group related actions better, prioritize primary actions, or use progressive disclosure to reduce immediate choices.
Issue Highlights
No clear call-to-action after interacting with media cards
Moderate
Flow & States Completeness
The Problem
The media cards at the bottom of the screen show visuals with labels and stats but provide no clearly visible button or prompt for the user to know what action to take next after selecting or viewing them.
Why it Matters
Users might not know if clicking a card opens a detailed view, allows them to interact further, or what goal the section supports, leading to hesitation or drop-off.
How to Fix
Add explicit action buttons or hover states on media cards to guide users on possible actions like 'View Details', 'Share', or 'Comment'.
Issue Highlights
Location Label Lacks Clear Context
Minor
Ambiguous Date/Time/Timezone
The Problem
The location 'Melbourne, Australia' is shown without any context (e.g., current location, residence, timezone), leaving it ambiguous.
Why it Matters
Users might be confused about what the location signifies, leading to misinterpretation of geographic or timezone relevance.
How to Fix
Add clarifying text or an icon to specify the meaning of the location (e.g., 'Based in:', 'Timezone:' etc).
Issue Highlights
Dense content cards with similar visual weight
Minor
Navigation & Structure
The Problem
The carousel or horizontal list of content cards at the bottom of the screen contains multiple images and text blocks close together with similar visual weight and minimal spacing.
Why it Matters
This dense layout can cause visual clutter and makes it harder for users to focus on a single item, potentially reducing click accuracy and interest.
How to Fix
Increase horizontal spacing between cards and consider adding subtle visual hierarchy cues to distinguish selected or featured items.
Issue Highlights
Unclear Meaning of Collaboration Metrics Without Labels
Minor
Efficiency & Cognitive Load
The Problem
Numbers for followers, following, rating, and collaborations appear with small labels but the metrics '3x Collaborated' may require user memory of exact meaning or system rules.
Why it Matters
Users may have to recall definitions of these metrics from prior experience rather than seeing context or explanation inline.
How to Fix
Add brief tooltips or hover explanations to clarify measurement definitions.
Issue Highlights
Static 'Work' tab with no visible interaction or next step
Minor
Flow & States Completeness
The Problem
The tab navigation bar highlights 'Work' as active but does not display or indicate any interactive elements or prompts to engage further within the current screen.
Why it Matters
Users could feel stuck on this section without cues on what to do next, which can reduce engagement.
How to Fix
Provide interactive elements, instructions, or guidance within the content area under the active tab to enable user actions.
Issue Highlights