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
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!