An interactive website experience allows your customers to take charge of their experience and encourages the sharing of said business to future potential customers. Making this a responsive web design provides optimal viewing across a wide range of devices. (visualmatter.com, n.d.).

The first example I want to explore is the Nike Reactor website. The main purpose of the site allows the audience to explore the new shoe collection by playing with an interactive user interface. It uses appealing colour schemes and amusing animations to give visitors information on their products. Some of the catchphrases they include are ‘soft as a stress ball’, ‘responsive as bouncy balls’, and ‘light as soap bubbles’. When you first arrive on the homepage, an animated figure will appear which enlightens customer’s along the process/sensations of creating the shoes. The main process includes customising the shape, shoe edition, and its running style. By building a website like this, it helps visitors to have the most realistic feeling about the products and allows the company to raise the chance of turning potential customers into actual ones. (blog.magezon.com, 2022).

A video demonstrating the Nike Reactor initial animation on the homepage before going through the process on designing the shoes. This was recorded on a desktop website screen.

A second video reviewing the final design animation created on the mobile site in comparison. It proves interactive design elements and conforms to responsive design.

The responsiveness from desktop to mobile is very versatile and automatically adjusts to fit the mobile screen. This allows the interactive experience to be enjoyable no matter what size display used. Responsive design not only accommodates for existing devices, but takes into consideration new gadgets that will be released as technology continues to progress. Due to the scale of Nike as a brand, they have the funding and teams in order to achieve high standard technological advances so the successfulness of this project is no surprise. On all platforms at the end of the react sequence, it gives clear options to share the unique creation which expands Nike’s brand awareness allowing other target audiences to access the material and so on. The layouts and responsiveness have been cleverly thought out in order to positively impact the sales. There is no real need for improvement on a product branding that is clear and immersive for the audience. (Staff, 2021).

Both image screenshots explore steps in the Nike Reactor interactive process and ensures the layout is clear for the viewer to use.

The next set of images explore the same few steps in the Nike Reactor process but on a mobile screen instead of desktop. This proves Nike’s impressive responsive design layouts are successful as these are the two major platforms it will be used on.

The next example I wanted to focus on for interactive responsive design is Gucci’s Floral Fantasy campaign landing page. Gucci is well known for producing high-quality campaigns for their perfume but this is by far their most advanced example. This interactive web page explores appealing animations and an extremely collaborative experience. Initially, the user is brought to a colourful introduction page with button animations and a logo sequence which already attracts the audience to click. You are then brought to this almost overwhelming page full of different aspects including sounds and moving images. The colour scheme is very calming and relaxes the viewer ready for an immersive shopping experience.

A video run through of the Gucci Flora interactive website that includes onboarding for the tutorial and extreme creative elements that allow the user to guide themselves through the stages. https://florafantasy.gucci.com/

The Gucci Flora website is also successful and compatible on the mobile site and works just as well as the desktop. The elements are all identical except for the smaller screen meaning we need to scroll left and right further than needed on the website. The buttons still allow the same message through animations however you cannot hover over them on the phone so then sequence completes once you’ve clicked on them. The shop now icon is a great way to allow the audience to be redirected immediately to purchase the fragrance after completing the storyline and provides great accessibility for the brand. Due to the responsive layout, the interactive element remains practical and doesn’t lose its usability. I especially enjoyed how popups were produced after hovering over elements as it didn’t clog up the initial site space and the viewer can get further information on the products they choose to learn about.

Both of the above images explore the Gucci Flora campaign landing site and how this is responsive on mobile and desktop. The functions and interactiveness impress the audience and produces positive brand awareness. The added sounds and animations make this experience immersive.

The final visual responsive website I wanted to discuss is Carolina Herrera’s 212 Heroes Skate Game. Carolina Herrera is a cosmetics company that advertises its new products through a fun, interactive skateboard game in which you collect items in order to earn rewards. It certainly fills the customer with excitement and promotes the brand well in order to vary its target audience. The site is elaborate which emphasises the unusual fragrance being promoted (shaped like a skateboard). It allows the fashion brand to explore new and unique paths in order to reach new audiences. The entire experience is interactive with not a single part having the website as the lead. The high-quality production and audience participation will engage the viewers, wanting to purchase the same high-quality product. The site was designed around the content and prioritises the audience engagement. The design is perfect for the target audience and allows them to further learn about Gucci’s product advertisement.

The two images present stages from the 212 fragrance skateboard game. This demonstrates key interaction from the user choosing the skateboard they want to continue the game with.

A video exploring the website version of Carolina Herrera’s interactive skateboard game. This contrasts the delicate fragrance brand they base their products around. https://www.carolinaherrera.com/campaigns/212-heroes/game/

Prior to researching, I thought the responsiveness would be difficult to achieve due to the amount of creative elements included and customised experience it is showcasing. However, I was pleasantly surprised when I came to find the game worked flawlessly on my mobile screen. The layout was similar to the website page with resizing of logos and typography; the loading of the page could’ve improved as this was definitely quicker on my laptop but that is a small improvement compared to the scale of how successful this is. The fact that an interactive game even works on a mobile browser instead of an app is impressive. There was no scrolling involved in this page as every stage was automatic and appeared after the click of a button so the project hit all the positive accessible user needs. If this site was loaded on an older device using a slower browser launcher, it may not load as quick and could be quite laggy as it is a large file. To enhance the interactive game further, it should’ve been developed into a mobile app as it would have accessed a much larger target audience besides the previous smaller one who are exploring new fragrances.

These two images explore the 212 skateboard game on a mobile site and how the animations and interactive elements continue to be successful.

To conclude, all three separate examples of interactive, responsive designs are successful and unique within their own projects and allow the audience to spend a good amount of time exploring the products being promoted.

References

blog.magezon.com, 2022. 20 Interactive Website Examples That Keep Your User Engaged. [Online]
Available at: https://blog.magezon.com/captivating-interactive-website-ecm/#:~:text=1%201.%20The%20Nike%20Reactor%20The%20Nike%20Reactor,…%208%208.%20Prometheus%20Fuels%20…%20More%20items
[Accessed 22 October 2022].

Staff, R., 2021. What is Responsive Web Design and How to Do It. [Online]
Available at: https://www.renderforest.com/blog/responsive-website-design#:~:text=How%20to%20Design%20a%20Responsive%20Website%201%20Have,…%205%20Use%20Tools%20to%20Test%20Responsiveness%20
[Accessed 22 October 2022].

visualmatter.com, n.d. Responsive Website Design. [Online]
Available at: https://www.visualmatter.com/responsive-web-design#:~:text=Responsive%20web%20design%20%28RWD%29%20is%20a%20web%20design,with%20a%20minimal%20amount%20of%20resizing%20and%20scrolling.
[Accessed 22 October 2022].