Loading ...

Responses by Marthe Siestrunck, lead designer and Bruno Simon, front-end developer, Immersive Garden

Background: The Decathlon United site is intended for both sports teams and users who like French sporting goods retailer Decathlon. The site focuses on bringing forward the different core values of the brand through incredible stories from all over the world. It acts as a medium that gathers and binds human narratives as a whole, while reaching users in an emotional and personal way.

Highlights: The double navigation between the story grid and the sequential chapters, and the line that accompanies users into the discovery.

Challenges: Coordinating and integrating the large amount of audiovisual elements. During the design and development phases, the text and visuals were still in production, and we also had to develop the site in record time.

Favorite details: The smooth horizontal line that followed users throughout the browsing experience is composed of hundreds of individual dots that—for each frame—take the vertical position of the dot to the left. The outcome is the intended spreading wave effect. Only the dot on the far left is animated; each one of the following dots ends with the same position along the spreading line. It took us a few days to find a balance between performance optimization and an organic feel.

Navigational structure: We wanted to give users the possibility of browsing stories in a distinctive way: chapter by chapter, each time discovering a new teammate’s story. Users can also choose to explore every story in a more immersive and visual approach via the grid.

Technical features: We used Vue.js to develop the site in a quick and efficient way, and also to add reactivity when loading the site. We built an API to allocate the data as soon as the content is requested; everything displayed on the screen is loaded progressively to maximize performance regardless of bandwidth. With these optimization targets in mind, the grid was developed in HTML/CSS/JS without any graphic libraries. Stylus allowed us to generate the styling, while Webpack enabled us to monitor transpiling and bundling.

decathlon-united.com/en

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In