Responsive Design · Interaction Design · Prototyping · Design Systems

A Playful Visual World for Fiber Internet

Role
Product & Interaction Designer
Date
2025
Company
Foam Internet through AllGoud
Scope
Homepage, privacy policy, responsive design, components, motion, prototyping, handoff
Tools
Figma, CSS
Foam Internet was developing the first digital experience for a new fiber-internet company. I joined as the second designer and carried the initial homepage direction through final design, responsive adaptation, interaction definition, and client handoff.
Challenges
The concept had a strong visual identity, but its typography, spacing, components, responsive behavior, and movement had not yet been standardized. The client also wanted a highly animated experience, so the challenge was translating that “make everything move” energy into intentional, repeatable behavior that could be understood and implemented.

What I Inherited

The initial designer established an expressive direction built around open skies, dimensional imagery, glass treatments, and playful movement. The concept already had a distinct personality and a strong foundation to build from.
As the homepage expanded, similar elements began using different typography, spacing, visual treatments, and responsive behavior. Interaction ideas had also been discussed, but much of the movement still needed to be defined clearly enough for implementation.
Established visual direction
The initial design introduced the atmospheric imagery, soft glass effects, and expressive tone that defined the experience.
Early motion ideas
The client shared ideas for movement, but interactions had not yet been fully designed or prototyped.
Evolving client requests
New ideas and additions continued entering the project, increasing the need for consistency across the page.
Responsive gaps
The desktop direction was further developed than the mobile experience, requiring decisions about how the visual system would adapt.

What I Contributed

I carried the visual concept through final delivery by standardizing typography, spacing, color treatments, repeated content patterns, and responsive behavior. I created reusable styles and components that formed the beginning of a more consistent design system.
I also designed most of the movement and interaction behavior, using prototypes and CSS guidance to communicate how elements should enter, move, and respond. This allowed the playful quality of the original direction to remain intact while making the experience clearer and more practical to build.
Visual standardization
I aligned typography, spacing, visual treatments, and repeated patterns so the homepage felt like one connected experience.
Reusable components
I created shared styles and components that could be used consistently across desktop and mobile layouts.
Responsive adaptation
I completed the mobile experience and determined how imagery, content, forms, and visual effects should adjust across screen sizes.
MOTION & PROTOTYPING
I translated broad ideas for movement into intentional interaction patterns, prototypes, and implementation guidance showing how key elements should enter, float, expand, and respond.
Implementation guidance
I documented timing, easing, layering, and responsive behavior so the development team could understand how the experience was intended to move and respond.

What Shipped

The final design package included a complete one-page launch experience, a supporting privacy-policy page, desktop and mobile layouts, reusable components, and a standardized visual foundation.
The handoff also included prototypes and implementation guidance communicating how the experience should move and respond. The client’s team received the completed designs and was responsible for development.
Launch homepage
A complete one-page experience introduced the company, service model, pricing approach, benefits, availability, and frequently asked questions.
Responsive layouts
Desktop and mobile designs defined how the experience should maintain its character across different screen sizes.
Component foundation
Reusable styles and components created a more consistent foundation for implementation and future additions.
Motion prototypes
Interactive prototypes demonstrated the intended movement and behavior of key page elements.
Implementation guidance
CSS direction and detailed annotations reduced ambiguity around how the visual concept should behave when built.

Delivery Impact

The project transformed an evolving visual concept into a coherent, responsive system that the client’s development team could implement with greater clarity.
Standardizing the experience also created a stronger foundation for incorporating additional client requests without introducing new inconsistencies across the page.
Consistent visual language
Repeated elements followed shared rules rather than being resolved independently each time.
Responsive behavior defined
The experience included clear desktop and mobile direction instead of relying on the implementation team to interpret missing states.
Clear handoff
Components, annotations, and system decisions reduced uncertainty during the transition from design to development.
A strong visual concept still needs a system behind it. Refinement, responsive behavior, motion, and handoff are not production details. They are part of the experience.

More Case Studies

Operational UX for Logistics & Fulfillment

Designing internal tools within complex operational systems

Information Architecture &Taxonomy System Design

Research-driven classification for scalable navigation
©2026 Kei Michisaki