Skip to content
FR

Website design

fictional product Satellite

School project (concept)

View the prototype
Website of the fictional product Satellite shown on a tablet in tent mode: a woman wears the headphones, next to its four strengths.

Satellite is the website design for a fictional product, presented as an interactive Figma prototype. The challenge: imagine the product and the whole user journey before writing a single line of code.

Brief and goal

Imagine a fictional digital product and its whole user journey in an interactive Figma prototype, without a development environment.

Role and responsibilities

Research and mood board, low-fidelity sketches, design system in Figma (grids, typography), component architecture, building the interactive prototype and quality control.

Credits

School project. The product design, branding and images come from the original Satellite project on Behance, and all rights belong to their creator. The design system and the prototype are my work.

Use of AI

No AI was used for the project itself: I built everything by hand in Figma. I only used Claude Code to add this sheet to the portfolio. My personal contribution includes the research, the mood board, the sketches, the design system, the components, the prototype and the quality control.

Production steps

  1. Research and mood board

    Satellite is a pair of headphones that turns into a portable speaker, for listening to music anywhere. From similar products and photos, I summed up its mood in three words, rhythm, colourful and clean, then put together a mood board of interfaces, typefaces, colours and sound waves.

    Satellite mood board in Figma: the keywords Rythme, Multicolore and Épuré above interfaces, typefaces, sound waves and photos of the headphones.

  2. Visual identity & wireframes

    I started with sketches to lay out the structure, then built a design system in Figma with strict grids and modern brutalist typography.

    Wireframe of the Satellite website in Figma: the « Comment ça fonctionne ? » section with the list of the headphones’ features, the « Acheter maintenant » button and grey image frames.

  3. Component architecture

    I built reusable components (auto-layout buttons, hover states, overlays) so the browsing feels real and the prototype stays easy to edit.

    Figma components of the Satellite design system: logo, black and white buttons, coloured arrows, accordions, social media icons, newsletter button and testimonial cards.

  4. Interactive prototype

    I linked the screens in Figma: interactive components and smart animate reproduce the micro-interactions and scroll animations, without JavaScript.

    Prototyping in Figma: the « Comment ça fonctionne ? » and « Témoignages » screens of the Satellite website linked by the prototype’s interaction arrows.

  5. Quality control

    To finish, I did a five-part quality control of the file: design system, visual consistency, prototype, naming and structure. Among other things, I checked the instances, the grid, the spacing and the user journey. The file ends with a reflection on my choices: a clean tech style, a bit like Apple, with bursts of colour because the product is made for having a good time.

    Quality control grid and reflection on the project in the Satellite Figma file.

Technologies

Challenges

Making micro-interactions and scroll animations in Figma alone, without any JavaScript.

Solutions

I used Figma’s interactive components and smart animate so the prototype reacts like a real website.

Final result

A high-fidelity Figma prototype that simulates realistic navigation: auto-layout components, hover states, overlays and micro-interactions.