Elevating Brand Identity with a Comprehensive Icon System 

When a mattress retailer came to us needing a complete icon set, we didn't just draw 60 symbols - we engineered a scalable visual system.

The real challenge was making technical bed mechanics feel intuitive, not cluttered. A quick audit revealed the store relied strictly on photos, with zero visual cues. We built a unified design language from scratch: consistent stroke weights, uniform corner radii, and smart dual-tone accents with directional arrows to explain positions and features without a single word.

Every icon was engineered to scale seamlessly across every touchpoint - staying razor-sharp on compact mobile screens, desktop feature lists, and printed store flyers.

A digital project overview page for a Fosters Mattress case study, featuring client details, a quote, and several design brief cards on a clean white background.
Client
E-commerce Mattress Retailer
Service
Custom Icon Design, Visual Identity System, Motion Graphics
About the project - Stage 1

Stage 1 - Strategic Audit & Concept Sketching

  • Strategic visual audit: Analyzed the client's digital presence first to pinpoint the exact stylistic direction before drafting.
  • Multi-angle concept sketching: Hand-sketched all 60 icons, exploring alternative perspective options for complex items to guarantee instant clarity.
  • System-first framework: Established strict design parameters - uniform stroke weights, matching corner radii, and shared geometry- making future library expansions completely seamless.
About the project - Stage 2

Stage 2 - Vectorization & Refinement

With the core framework approved, we transitioned from sketches to crisp vector graphics. 
During this phase, a few specific product features required deeper visual exploration to accurately capture their exact meaning. We provided additional design variations for these nuanced items, collaborating closely with the client to refine every detail before finalizing the complete vector illustration set.

About the project - Stage 3

Stage 3 - Visual Routing & Attention Management

To maximize visual clarity, we ran a series of design tests to find the most effective visual language for complex features:

  • Dual-tone hierarchy testing: Experimented with black-and-gray line combinations to isolate primary actions from secondary details, instantly guiding the viewer’s eye.
  • Schematic motion testing: Tested directional arrows against dashed-line trajectories to discover the cleanest, most minimalist way to show bed adjustments and mechanics.
  • Zero-label readability: Refined each solution until every complex icon could be understood immediately on its own, without relying on descriptive text.
About the project - Bonus

Bonus: Bringing Icons to Life

To elevate user engagement beyond static imagery, we offered an added-value bonus: bringing 5 key icons to life through motion.

By transforming flat linework into dynamic, schematic micro-animations, we made complex functionalities - such as bed positioning and vibration settings - instantly tangible and engaging. Delivered as lightweight, web-ready assets, these animations provide intuitive visual feedback and bring an extra layer of digital polish across the brand’s website and social media campaigns.

PROJECT SCOPE

Audit & Visual System Development
Brand audit and a scalable design system for long-term consistency.
Adobe illustrator
Translating concepts into a cohesive library of 60 vector icons.
After Effects
Creating five lightweight animations to drive digital engagement.
After

The Results

We delivered a highly adaptable, cohesive visual system of 60 custom icons that looks flawless and maintains absolute clarity across all devices and print mediums. This comprehensive design language not only elevates the client's current brand aesthetics but provides a robust, scalable foundation for effortless future product expansions.

review

Client Quote

★★★★★ 5.0 / 5.0 on Trustpilot

Great company to work with and they handled all of our needs

Charles Foster
Fostersmattres, US

Ready for Results-Driven Design?

Let’s build not just visuals, but a scalable design system for your brand.

Before - after

From Visuals to Measurable Business Results

More real examples 

Pro Max Exteriors

A SCALABLE CROSS-CHANNEL DESIGN SYSTEM

Visual Icons Identity & Canva System

Operating with a fragmented DIY visual identity, Pro Max Exteriors needed a unified cross-channel presence. Through an audit-first strategy, we engineered custom iconography based on their logo geometry and delivered a modular Canva ecosystem for complete content autonomy.

FinTech Company

An interactive mascot for a FinTech app

Motion Graphics & Gamification

A mobile app developer for FinTech was looking to humanize their product. They reached out to us after discovering our work ...

Cybersecurity Company

A cohesive visual identity for a cybersecurity website

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