The design team explored many different hero options to celebrate the new OS. Ultimately we landed on a grid of endless devices, all featuring updated or entirely new screens. This gave users an immediate sense that there were many new updates to explore.
To help navigate the very long page, a new side navigation was developed. This breaks down the experience into digestible pieces, and allows easy access to sections of the page. Color was also used to differentiate each section of the site. When the headline color shifted, users were subconsciously aware they were on a new section of the page. On mobile, the side navigation moved to a fixed top bar.
Cards were used to highlight each new feature of the OS. This was both for functional reasons and aesthetic, as the rounded edge of the card mimics the new rounded corners of the UI. On desktop, the larger screen size was utilized by showcasing cards on the right column, with large headlines and navigation on the left. On mobile, the headlines and navigation stacked, allowing the cards to span the whole width of smaller devices
To keep the page interesting, and to showcase new UI features, animations were used throughout the page. They were created through a combination of code and video. The animations are triggered on scroll, and play for one cycle. After a video is played, a replay button appears on screen. Code animations have no replay button, but will replay on page refresh. We worked closely with the Motion Graphics and Creative Tech teams to storyboard and QA each animation.