When I first tried Claude AI, the onboarding felt slightly off. The text was a bit hard to read, and the layout didn’t guide me clearly, making the experience feel less polished.
When I first tried Claude AI, the onboarding felt slightly off. The text was a bit hard to read, and the layout didn’t guide me clearly, making the experience feel less polished.
When I first tried Claude AI, the onboarding felt slightly off. The text was a bit hard to read, and the layout didn’t guide me clearly, making the experience feel less polished.
Claude AI Onboarding — Small UX Redesign
My Role: Product Designer | Duration: 7 days | Platform: Website | Tools: Figma
When I first tried Claude AI for UI/UX help, I was honestly surprised—the onboarding felt off. The text was hard to read, and the layout didn’t guide me clearly, which made the experience feel less polished than I expected.
Current Onboarding:
Original Onboarding screen
Here, we see quite a lot of design flaws.
​
-
Low CTA Prominence
→ The call-to-action button lacks visual weight, making it easy to overlook. -
Insufficient Visual Breathing Space
→ The onboarding screen feels cramped, with limited spacing between elements. -
Imbalanced Layout
→ UI elements appear tightly stacked, reducing clarity and overall visual harmony. -
Weak Visual Flow (Top → Bottom)
→ The CTA feels visually attached to the content, disrupting a natural downward scanning pattern. -
Reduced Readability
→ Text blocks appear dense and lack sufficient contrast with the background (contrast ratio: 8.22:1), affecting legibility.
So, I redesigned the Onboarding screen considering the design flaws one by one
Improved Onboarding(Redesigned):
Redesigned Onboarding screen
.jpg)
Here is what the redesigned screen exhibits:
​
-
Stronger CTA visibility
→ Larger, clearer button with better prominence -
Improved spacing
→ More breathing room between sections which makes it less cramped. -
Better layout balance
→ Content feels more evenly distributed. -
Clearer visual flow
→ Natural top-to-bottom progression ending at CTA. -
Slightly better readability
→ Spacing improves scanability, and the higher text–background contrast ratio (14.4:1) significantly enhances readability and accessibility
Onboarding Comparison:
Original Onboarding screen VS Redesigned Onboarding screen
.jpg)
Design Decisions:
-
Increased CTA prominence and text emphasis
The button size, spacing, and bold CTA label were enhanced to improve visibility and emphasis compared to the original.
→ Goal: make the primary action immediately noticeable and reduce decision friction.
​
-
Improved spacing and layout structure
Vertical spacing between sections was increased to create clear separation.
→ Goal: reduce cognitive load and allow users to process content in chunks.
​
-
Enhanced text contrast (14.4:1)
Adjusted text color against the background to meet high accessibility standards.
→ Goal: improve readability for all users, including low-vision scenarios.
​
-
Established clearer visual flow
Layout structured to guide users from heading → information → CTA smoothly.
→ Goal: create a natural progression toward action.
​
-
Optimized content grouping
Related information was visually grouped more clearly instead of appearing as one continuous block.
→ Goal: improve scanability and help users quickly understand key points.
​
​
Usability Insights:
To evaluate the effectiveness of the redesign, I conducted a quick preference test with users by showing both onboarding screens and asking a few targeted questions.
Questions included:
-
Which screen would you prefer to use daily?
-
Which screen is clearer in communicating its purpose?
-
Which screen feels easier to read and understand?
Results
-
85% of users preferred the redesigned onboarding screen
-
Users found the redesigned version clearer and easier to process
-
The CTA was more noticeable, helping users identify the next step faster
Key Takeways
-
​Improved spacing and structure led to better scanability
-
Higher contrast enhanced readability and accessibility
-
Stronger CTA emphasis resulted in clearer action guidance
Conclusion:
By refining spacing, contrast, and CTA prominence, the onboarding experience becomes more scannable and action-oriented, leading to higher user preference and better initial engagement.