Focused Usability
Designing Icons that Think Faster Than Words
Cut User Errors by 60%
The Client’s Request
Fosters Mattress, an established retailer, needed to improve the usability and professionalism of their large product catalog.
They reached out to us to replace generic symbols with a cohesive, custom icon set that would make navigation effortless and reduce cognitive friction.
The Challenge
The website relied on a mix of text labels and mismatched visuals — a typical “patchwork” look that created high cognitive load and frequent user misclicks.
Studies show that inconsistent UI can increase user errors by up to 60%, forcing visitors to re-read and re-interpret every label.
The client needed a consistent, intuitive visual language that guides users instantly.
Our Approach
We designed a custom library of 60 line icons, each optimized for clarity, scannability, and speed of recognition — creating a seamless visual system across all product pages.
Process Overview
1. Term Analysis (60 terms)
Ensured every icon had a precise, concrete meaning to prevent semantic confusion.
2. Style Guide & Sketching
Built a unified minimalist style with consistent stroke weight and structure.
3. Icon Production (90% custom)
Crafted 60 unique icons tailored to mattress-specific features (cooling, adjustable bed, lumbar support, etc.).
4. Delivery & Optimization
Provided scalable SVG assets with optimized contrast for accessibility and fast load time.
Scope & Budget
|
Element |
Description |
|
Quantity |
60 custom line icons |
|
Consistency |
90% built from scratch for full brand cohesion |
|
Focus |
Minimalism, clarity, speed, and scannability |
|
Timeline |
7 days |
|
Total Cost |
$1,500 USD |
Tech & Tools
Adobe Illustrator · SVG Optimization
The Results
The new icon system transformed the product experience — making feature comparison instant and error-free.
|
Metric |
Expected Impact |
Design Rationale & Source |
|
User Errors |
↓ 60% (25% → 10%) |
Consistent iconography removes guesswork (Comparative UX Studies) |
|
Task Completion Time |
33% faster (7.5 → 5 min) |
Users no longer “re-learn” visuals; reduces decision fatigue |
|
Cognitive Load & Memory |
+75% recall vs. text |
Picture Superiority Effect: visuals are processed 60 000× faster than words |
|
Conversion Rate Potential |
+27 – 550% range |
Reduced friction in checkout/filters improves clarity (CRO Benchmarks) |
|
Brand Perception |
↑ Trust & Professionalism |
The Aesthetic-Usability Effect makes systems appear more reliable |
Client Quote
We were surprised how much difference a consistent icon set made. The pages look cleaner, easier to read, and far more professional — it finally matches the quality of our products.
Charles Foster
Fostersmattres, US
Key Takeaways
Visual consistency = faster cognition
Clarity builds trust and conversion
Is inconsistent design slowing your users down?
Let’s create a visual system that improves usability and conversion — backed by cognitive design principles.
Book a free 30-minute consultation
Got it — thanks for reaching out!
We’re excited to hear from you and will get back to you soon.
Until then, feel free to explore our Portfolio.
Talk soon!
From Visuals to Measurable Business Results
More real examples
FinTech Company
From Financial Friction to Fun:
How an Animated Mascot Boosted App Engagement
+55%
Expected D1 Retention
* 10 days * Motion Graphics & Gamification
A mobile app developer for FinTech was looking to humanize their product and dramatically improve user retention. They reached out to us after discovering our work ...
Cybersecurity Company
From DIY Chaos to a Cohesive Visual Identity
UP TO 3X
Boost website's trust score
* 5 days * Design for Web & Custom Graphic Design & AI-powered Creative
A client built his website using a site builder and stock visuals.
He reached out to us after discovering ...