Sonos
Premise
Sonos Radio offers not only a high-quality streaming platform but also design that facilitates listening effortlessly, endlessly.
Goal
Build a digital home for the Sonos Radio brand that showcases its premier offering as a discovery and listening platform devoted to expanding the experience and importance of music.
Archives, Records, and Power
Founded in 2002, Sonos has been an industry leader in sound system technology for decades. With Sonos Radio comes their organic evolution as curators offering experiential programming that positions the brand as a powerful cultural driver. An immersive library of programming and product—and with it, the power over memory and brand identity.
![](https://varyer.imgix.net/Sonos-Home-3D-Space.jpg?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=723&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=51205482c63fb6296f8810fc4e6deba5 1200w, https://varyer.imgix.net/Sonos-Home-3D-Space.jpg?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1446&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=01bf96004bcf0cbbb52963775f77a0c2 2400w, https://varyer.imgix.net/Sonos-Home-3D-Space.jpg?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=597&ixlib=php-3.3.1&q=82&usm=20&w=992&s=0456c924fd0e484c518e8558cb09e0e3 992w, https://varyer.imgix.net/Sonos-Home-3D-Space.jpg?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1195&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=4b5447a99a96c6119d66f68d066c48e0 1984w, https://varyer.imgix.net/Sonos-Home-3D-Space.jpg?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=462&ixlib=php-3.3.1&q=60&usm=20&w=768&s=491ba2ba9fdd5276d8dd5b1f74981ce6 768w, https://varyer.imgix.net/Sonos-Home-3D-Space.jpg?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=925&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=fbde1f4ff33bb0f9924d24f14a138d21 1536w, https://varyer.imgix.net/Sonos-Home-3D-Space.jpg?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=347&ixlib=php-3.3.1&q=60&usm=20&w=576&s=44a6803fbcd65b2faaf36d3c2a7c8e4d 576w, https://varyer.imgix.net/Sonos-Home-3D-Space.jpg?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=694&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=cecf107c8a82397c3f0e6ce89e55d694 1152w)
To engage visitors with an immersive experience upon visiting the site, the homepage hero module features a beautiful, clean transition with albums floating in 3D space on a dark background.
Setting the Mood
We developed two directions—one that drew from Sonos' existing branding but punched up with more immersive user experience and vibrant, fun colorways, and a second, moodier direction that prioritized discovery to mimic the “record store” appeal. Both directions feature moments that engage users with fun interaction and styling.
Direction A
![](https://varyer.imgix.net/Direction-A-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1084&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=43ea9a545d83d8b56d402124dab87677 1200w, https://varyer.imgix.net/Direction-A-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2169&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=7892e6c403e968a1d74198b29f182428 2400w, https://varyer.imgix.net/Direction-A-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=896&ixlib=php-3.3.1&q=82&usm=20&w=992&s=b7ee2af06c0d3a8f58fb6a2e3abb3601 992w, https://varyer.imgix.net/Direction-A-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1793&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=efbff2865b771ef7febfa85dc2a9f20f 1984w, https://varyer.imgix.net/Direction-A-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=694&ixlib=php-3.3.1&q=60&usm=20&w=768&s=104f7961a114fdf5735979b1a44e9b73 768w, https://varyer.imgix.net/Direction-A-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1388&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=d900a39937ae0b2f2acf1b18c5ed5df7 1536w, https://varyer.imgix.net/Direction-A-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=520&ixlib=php-3.3.1&q=60&usm=20&w=576&s=83e59c8600595e72d5d6754260ed49f5 576w, https://varyer.imgix.net/Direction-A-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1041&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=966ed868b888c66191ca6d054efca3d6 1152w)
![](https://varyer.imgix.net/Marquee-Direction-A_2022-05-26-170309_cxei.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=726&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=756d83310580e1d028b2926898f1fe48 1200w, https://varyer.imgix.net/Marquee-Direction-A_2022-05-26-170309_cxei.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1453&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=14ad76081c3b08345d5c708873ebeb96 2400w, https://varyer.imgix.net/Marquee-Direction-A_2022-05-26-170309_cxei.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=600&ixlib=php-3.3.1&q=82&usm=20&w=992&s=e3d7e5e201b18be1da9cd97ac9048a0b 992w, https://varyer.imgix.net/Marquee-Direction-A_2022-05-26-170309_cxei.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1201&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=4bbede335920ba1783b38e653d47cc1f 1984w, https://varyer.imgix.net/Marquee-Direction-A_2022-05-26-170309_cxei.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=465&ixlib=php-3.3.1&q=60&usm=20&w=768&s=c8b15fd8c7463a2809f65e592248093d 768w, https://varyer.imgix.net/Marquee-Direction-A_2022-05-26-170309_cxei.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=930&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=5962a75e850983e66a3782f5b930b033 1536w, https://varyer.imgix.net/Marquee-Direction-A_2022-05-26-170309_cxei.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=348&ixlib=php-3.3.1&q=60&usm=20&w=576&s=d3c286fa46befe5bc0b36a0454afd8c2 576w, https://varyer.imgix.net/Marquee-Direction-A_2022-05-26-170309_cxei.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=697&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=92251bf3ff8f163f1afe86b7aed67cec 1152w)
In early versions of Direction A, marquees offered a modern web experience, allowing the user to click and discover possible mood stations.
![](https://varyer.imgix.net/Early-Mood-Slide-Direction-A_2022-05-26-220150_cpwc.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=848&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=f4964ab69684c9c4daf3c10390c3eaa2 1200w, https://varyer.imgix.net/Early-Mood-Slide-Direction-A_2022-05-26-220150_cpwc.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1696&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=553649cd17c604cad1df0c4ae0caf716 2400w, https://varyer.imgix.net/Early-Mood-Slide-Direction-A_2022-05-26-220150_cpwc.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=701&ixlib=php-3.3.1&q=82&usm=20&w=992&s=f869c3a65fe44346e913e52ebb1b3598 992w, https://varyer.imgix.net/Early-Mood-Slide-Direction-A_2022-05-26-220150_cpwc.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1402&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=493bd20adcf551aa72763dcb1b459340 1984w, https://varyer.imgix.net/Early-Mood-Slide-Direction-A_2022-05-26-220150_cpwc.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=542&ixlib=php-3.3.1&q=60&usm=20&w=768&s=3c53b86fe55ac3e84a11ac24ec54bab7 768w, https://varyer.imgix.net/Early-Mood-Slide-Direction-A_2022-05-26-220150_cpwc.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1085&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=2937e5fa86a1197a575cd8e87bbeb8f5 1536w, https://varyer.imgix.net/Early-Mood-Slide-Direction-A_2022-05-26-220150_cpwc.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=407&ixlib=php-3.3.1&q=60&usm=20&w=576&s=bc47f86802cb89c3a19b67e11abfe168 576w, https://varyer.imgix.net/Early-Mood-Slide-Direction-A_2022-05-26-220150_cpwc.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=814&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=d4175e3f9dfdf0c1d450bc7ec0b1207f 1152w)
This early version of our interactive hero moments served as a way to discover new music through mood, color, and images.
![](https://varyer.imgix.net/Mobile-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=3008&ixlib=php-3.3.1&q=82&usm=20&w=960&s=c1c86b11ed4946595a6425cf044baaee 960w, https://varyer.imgix.net/Mobile-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=6016&ixlib=php-3.3.1&q=61&usm=20&w=1920&s=c4bd631d861e49a9eea8de0453fa1217 1920w, https://varyer.imgix.net/Mobile-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2406&ixlib=php-3.3.1&q=60&usm=20&w=768&s=15766dfc2dc00ae264075c33d1e7c76b 768w, https://varyer.imgix.net/Mobile-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=4812&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=b0a0a6f9282420d756637284c85b8df9 1536w, https://varyer.imgix.net/Mobile-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1804&ixlib=php-3.3.1&q=60&usm=20&w=576&s=03e09975dece9eca4ea0402a0a500334 576w, https://varyer.imgix.net/Mobile-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=3609&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=b71e14d3cdeace194efa69d814f57ed0 1152w)
![](https://varyer.imgix.net/Mobile-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=3107&ixlib=php-3.3.1&q=82&usm=20&w=960&s=9085fc2a85574ec94f45686ff9464b95 960w, https://varyer.imgix.net/Mobile-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=6215&ixlib=php-3.3.1&q=61&usm=20&w=1920&s=c4a53fe932b1d3dfbbdb33f7f65beb77 1920w, https://varyer.imgix.net/Mobile-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2486&ixlib=php-3.3.1&q=60&usm=20&w=768&s=ee9dcf781ba7420fe49f42a8a0738c1c 768w, https://varyer.imgix.net/Mobile-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=4972&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=bd01453d4a3961b28c3f4b318edb2bc6 1536w, https://varyer.imgix.net/Mobile-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1864&ixlib=php-3.3.1&q=60&usm=20&w=576&s=74a0e3cc0a6b4e5b337827ce56a1058f 576w, https://varyer.imgix.net/Mobile-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=3729&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=373356ade3d1fc16a033a3ff4a2911ba 1152w)
![](https://varyer.imgix.net/News-Mobile.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=3850&ixlib=php-3.3.1&q=82&usm=20&w=960&s=fac128340a79871da8fbb8a81be1feae 960w, https://varyer.imgix.net/News-Mobile.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=7700&ixlib=php-3.3.1&q=61&usm=20&w=1920&s=476609d03bc29a7c241af98ec0e6c91c 1920w, https://varyer.imgix.net/News-Mobile.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=3080&ixlib=php-3.3.1&q=60&usm=20&w=768&s=407364979ee6a39bf45261c6c4b5922e 768w, https://varyer.imgix.net/News-Mobile.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=6160&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=7cae8f1852a9230f41aae8117e0eeda7 1536w, https://varyer.imgix.net/News-Mobile.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2310&ixlib=php-3.3.1&q=60&usm=20&w=576&s=9a65c611a36508d927a9b758fb8ee78c 576w, https://varyer.imgix.net/News-Mobile.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=4620&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=531055027fdd4e0204b5d6288ebd1a7d 1152w)
Direction B
![](https://varyer.imgix.net/Homepage-Module-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=674&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=669f371bffb4813b28c3d2011a05773b 1200w, https://varyer.imgix.net/Homepage-Module-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1349&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=a0df4a46e154eb26d90f66f5f008018a 2400w, https://varyer.imgix.net/Homepage-Module-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=557&ixlib=php-3.3.1&q=82&usm=20&w=992&s=109a8606f19987db9c1f07228de367fa 992w, https://varyer.imgix.net/Homepage-Module-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1115&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=7a92d04a77811416375ef4cf38846a5c 1984w, https://varyer.imgix.net/Homepage-Module-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=431&ixlib=php-3.3.1&q=60&usm=20&w=768&s=ca2db750b2569d66bb41d2a4cfcc0dd1 768w, https://varyer.imgix.net/Homepage-Module-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=863&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=e4590ccf8f908287148ab781efee100d 1536w, https://varyer.imgix.net/Homepage-Module-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=323&ixlib=php-3.3.1&q=60&usm=20&w=576&s=e67069cd9be8b6416777357349bc5f10 576w, https://varyer.imgix.net/Homepage-Module-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=647&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=480a91bdc5c7340b648ebbd3a2126dae 1152w)
![](https://varyer.imgix.net/Direction-B-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1350&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=b28461868610da48b6f1ef690a392ba5 1200w, https://varyer.imgix.net/Direction-B-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2700&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=632ae20b5e752b7696dd9db5e5ea70ce 2400w, https://varyer.imgix.net/Direction-B-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1116&ixlib=php-3.3.1&q=82&usm=20&w=992&s=1d5b3104b01d9bce2ceeeecb8b28625a 992w, https://varyer.imgix.net/Direction-B-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2232&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=f13c473d556c3165baf786f0e28ec55b 1984w, https://varyer.imgix.net/Direction-B-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=864&ixlib=php-3.3.1&q=60&usm=20&w=768&s=2310aed7ef714c6ce737f401ef65cdb7 768w, https://varyer.imgix.net/Direction-B-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1728&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=095db08d4c6b04934457564c10aa60cf 1536w, https://varyer.imgix.net/Direction-B-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=648&ixlib=php-3.3.1&q=60&usm=20&w=576&s=b86084d5427d3cbb2045d283a59d741e 576w, https://varyer.imgix.net/Direction-B-Colors.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1296&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=8f26b6c660f169009fb683734fcbb96d 1152w)
Compared to direction A, direction B utilized a rich, moody color palette.
![](https://varyer.imgix.net/Generator-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=759&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=c4d54e1ff16ec5e0a68e5b67ffe896c4 1200w, https://varyer.imgix.net/Generator-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1518&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=1f385559921c7e82728b6e98514a2b95 2400w, https://varyer.imgix.net/Generator-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=627&ixlib=php-3.3.1&q=82&usm=20&w=992&s=7474007374e778dca73fce6ff5143b65 992w, https://varyer.imgix.net/Generator-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1255&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=bd4086d06570ea5c827b20a9245b4c22 1984w, https://varyer.imgix.net/Generator-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=486&ixlib=php-3.3.1&q=60&usm=20&w=768&s=fcc83e6256f17174ba8bcd47d69cc926 768w, https://varyer.imgix.net/Generator-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=972&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=227c2bb8f89a1c233c14c85925b7df2a 1536w, https://varyer.imgix.net/Generator-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=364&ixlib=php-3.3.1&q=60&usm=20&w=576&s=e6eb2fe49a5f6a04ba946d95c94082ee 576w, https://varyer.imgix.net/Generator-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=729&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=de28c42c71e5600ffe4dc2a8b0ce51eb 1152w)
![](https://varyer.imgix.net/Generator-B-Direction-B_2022-05-26-220347_hbrg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=759&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=06d0e04749aebbfdbe3290dd5d46cf21 1200w, https://varyer.imgix.net/Generator-B-Direction-B_2022-05-26-220347_hbrg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1518&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=40f7fbcc14143f05c285ec0cf09ec0c3 2400w, https://varyer.imgix.net/Generator-B-Direction-B_2022-05-26-220347_hbrg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=627&ixlib=php-3.3.1&q=82&usm=20&w=992&s=29fb5e68016fa0aaef55f5da1a051a4d 992w, https://varyer.imgix.net/Generator-B-Direction-B_2022-05-26-220347_hbrg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1255&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=120250cf6e39cce97023f6c4618a0eed 1984w, https://varyer.imgix.net/Generator-B-Direction-B_2022-05-26-220347_hbrg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=486&ixlib=php-3.3.1&q=60&usm=20&w=768&s=930bf6ddad8bba813c512bc20820c152 768w, https://varyer.imgix.net/Generator-B-Direction-B_2022-05-26-220347_hbrg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=972&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=0e9c01c88b26c61dc918b542a5b47340 1536w, https://varyer.imgix.net/Generator-B-Direction-B_2022-05-26-220347_hbrg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=364&ixlib=php-3.3.1&q=60&usm=20&w=576&s=cf8af680484a8e03b95ef33cdc78da72 576w, https://varyer.imgix.net/Generator-B-Direction-B_2022-05-26-220347_hbrg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=729&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=7d32b2808d453604a7ab51add4fb4334 1152w)
![](https://varyer.imgix.net/3D-Carousel-A-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=860&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=554fec2b59a0976a3380fc47266510cf 1200w, https://varyer.imgix.net/3D-Carousel-A-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1720&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=5df109d99d459b9df827a1c7a4c935ce 2400w, https://varyer.imgix.net/3D-Carousel-A-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=711&ixlib=php-3.3.1&q=82&usm=20&w=992&s=064c643e5ade6eba665879ab1ac10f65 992w, https://varyer.imgix.net/3D-Carousel-A-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1422&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=a89c0f3f9d0c2dd9b394761508825455 1984w, https://varyer.imgix.net/3D-Carousel-A-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=550&ixlib=php-3.3.1&q=60&usm=20&w=768&s=967a32cc3dc7894bc117d7832a682fbe 768w, https://varyer.imgix.net/3D-Carousel-A-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1101&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=7be556cf9c9f3dc3c8b4158af788734b 1536w, https://varyer.imgix.net/3D-Carousel-A-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=412&ixlib=php-3.3.1&q=60&usm=20&w=576&s=78c8f7640bbd23f85561d8b51060f17a 576w, https://varyer.imgix.net/3D-Carousel-A-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=825&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=549b5220cd1ea9287798ffeeb1ff0620 1152w)
![](https://varyer.imgix.net/Collection-Drawer-Detail-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1800&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=cc149910218ba02b2697576adab52ae9 1200w, https://varyer.imgix.net/Collection-Drawer-Detail-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=3601&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=6970a2da907e41bc945f287c05faa56a 2400w, https://varyer.imgix.net/Collection-Drawer-Detail-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1488&ixlib=php-3.3.1&q=82&usm=20&w=992&s=12aa607e40176589009cd85b81935dba 992w, https://varyer.imgix.net/Collection-Drawer-Detail-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2977&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=dd049c17641ad2d32aae49e1a4d65bcc 1984w, https://varyer.imgix.net/Collection-Drawer-Detail-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1152&ixlib=php-3.3.1&q=60&usm=20&w=768&s=8f98c4fc36d54af90afd352584ff7437 768w, https://varyer.imgix.net/Collection-Drawer-Detail-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2305&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=d9ea1eb23648e58cc2f04709e42b0309 1536w, https://varyer.imgix.net/Collection-Drawer-Detail-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=864&ixlib=php-3.3.1&q=60&usm=20&w=576&s=44d254d991da09c4ecc417dc2d97c355 576w, https://varyer.imgix.net/Collection-Drawer-Detail-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1728&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=17acd027a688bd72246a09798f65ab12 1152w)
![](https://varyer.imgix.net/3D-Carousel-B-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=860&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=88d0640dd705218da98f166596f9f8db 1200w, https://varyer.imgix.net/3D-Carousel-B-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1720&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=560e68e712dca268c466b5beae466cd2 2400w, https://varyer.imgix.net/3D-Carousel-B-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=711&ixlib=php-3.3.1&q=82&usm=20&w=992&s=5b9c54ad074e053433b8e613fa08fcbc 992w, https://varyer.imgix.net/3D-Carousel-B-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1422&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=a6ddd483abf6cf039fafbfe196366f21 1984w, https://varyer.imgix.net/3D-Carousel-B-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=550&ixlib=php-3.3.1&q=60&usm=20&w=768&s=12d2e96c0d3a36e444360d4347a7bc1d 768w, https://varyer.imgix.net/3D-Carousel-B-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1101&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=b58c0d4cda655f9c3e94fabf75b97ea5 1536w, https://varyer.imgix.net/3D-Carousel-B-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=412&ixlib=php-3.3.1&q=60&usm=20&w=576&s=a1ac94cb7e1fd6add5c14c5270665327 576w, https://varyer.imgix.net/3D-Carousel-B-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=825&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=732330d508dc78cc22c86b6de77af3b3 1152w)
![](https://varyer.imgix.net/Collection-Drawer-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1196&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=9a1509d54c65859f370988525cc3c32e 1200w, https://varyer.imgix.net/Collection-Drawer-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2392&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=6eca2c481b7efda92463a28dba1fe919 2400w, https://varyer.imgix.net/Collection-Drawer-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=989&ixlib=php-3.3.1&q=82&usm=20&w=992&s=0329f7b40ca67efef164c863b1167c2b 992w, https://varyer.imgix.net/Collection-Drawer-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1978&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=7946022eee429dbbbc94a4f3f03fcdbd 1984w, https://varyer.imgix.net/Collection-Drawer-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=765&ixlib=php-3.3.1&q=60&usm=20&w=768&s=2375cf89d6c90bae4a121fd264117bb9 768w, https://varyer.imgix.net/Collection-Drawer-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1531&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=7449c08a1a71f4635f7f144fdd26d790 1536w, https://varyer.imgix.net/Collection-Drawer-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=574&ixlib=php-3.3.1&q=60&usm=20&w=576&s=df85d5695ac0497ba655260b49d4ce53 576w, https://varyer.imgix.net/Collection-Drawer-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1148&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=999e1c24802d0553f878075b4b160822 1152w)
![](https://varyer.imgix.net/Original-Content-Hover_Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=883&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=cfde3b725a54e7ec3f3bdc1a437b0c28 1200w, https://varyer.imgix.net/Original-Content-Hover_Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1767&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=600d7a843ab1de9be833079311fd94d1 2400w, https://varyer.imgix.net/Original-Content-Hover_Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=730&ixlib=php-3.3.1&q=82&usm=20&w=992&s=e95270acaba7f8c0d861954ffec9c804 992w, https://varyer.imgix.net/Original-Content-Hover_Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1461&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=09935c40d63fa83459b2bd4fe811cb57 1984w, https://varyer.imgix.net/Original-Content-Hover_Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=565&ixlib=php-3.3.1&q=60&usm=20&w=768&s=c0a4eaa06dc4d08ac535460c67cade56 768w, https://varyer.imgix.net/Original-Content-Hover_Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1131&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=ce8d19da83bab9b3ec9529bad680396a 1536w, https://varyer.imgix.net/Original-Content-Hover_Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=424&ixlib=php-3.3.1&q=60&usm=20&w=576&s=a0b6a1684f78b06421d32e0ac425547c 576w, https://varyer.imgix.net/Original-Content-Hover_Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=848&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=352fc0cf6ec63deccf45abe537494fde 1152w)
![](https://varyer.imgix.net/Search-Results-Closed-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1541&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=de38c6f276200317cb6cf371be27f14f 1200w, https://varyer.imgix.net/Search-Results-Closed-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=3082&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=02d014e66328aa323a426cfd661f1d7c 2400w, https://varyer.imgix.net/Search-Results-Closed-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1274&ixlib=php-3.3.1&q=82&usm=20&w=992&s=f0f4e4d029cd86d12a06fb0233e46486 992w, https://varyer.imgix.net/Search-Results-Closed-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2548&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=ed59b11bd380eb64a7d5fae91dbf0bf2 1984w, https://varyer.imgix.net/Search-Results-Closed-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=986&ixlib=php-3.3.1&q=60&usm=20&w=768&s=334e38deee44530e82e7fe68c68cf326 768w, https://varyer.imgix.net/Search-Results-Closed-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1973&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=32cb98a06e057e7cdd1cd29157e2713a 1536w, https://varyer.imgix.net/Search-Results-Closed-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=739&ixlib=php-3.3.1&q=60&usm=20&w=576&s=bfe9fa20c7d14bb3c49e1a7bcfb7b368 576w, https://varyer.imgix.net/Search-Results-Closed-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1479&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=bf9ef0b5653af9fbb2c743fff6bad62c 1152w)
![](https://varyer.imgix.net/Search-Results-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=887&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=134de5f39fff7e2102c9afbe4a830052 1200w, https://varyer.imgix.net/Search-Results-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1775&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=fc176396a3951694464e96f54a77c659 2400w, https://varyer.imgix.net/Search-Results-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=733&ixlib=php-3.3.1&q=82&usm=20&w=992&s=b305ea052afe4c1e7b8a6128879b15c6 992w, https://varyer.imgix.net/Search-Results-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1467&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=e0edffc5e90d94ad490d903e9e0d9c8b 1984w, https://varyer.imgix.net/Search-Results-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=568&ixlib=php-3.3.1&q=60&usm=20&w=768&s=1fbe2152c78e2a660e5e3b8a8142656d 768w, https://varyer.imgix.net/Search-Results-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1136&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=941f56912d08442f2d7b612a3abb008e 1536w, https://varyer.imgix.net/Search-Results-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=426&ixlib=php-3.3.1&q=60&usm=20&w=576&s=aeb4a5fb93e5cd72ba3fe7bd1e8280b1 576w, https://varyer.imgix.net/Search-Results-Open-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=852&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=542925b3ebf7e9f9db43f895ee5070a0 1152w)
![](https://varyer.imgix.net/Search-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1035&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=90d2ec370f64ca4e3d730971a0a9ebc4 1200w, https://varyer.imgix.net/Search-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2070&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=c6832d8d929e1b41194319fc7700e649 2400w, https://varyer.imgix.net/Search-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=855&ixlib=php-3.3.1&q=82&usm=20&w=992&s=1f2b0324c32991ce43ec816a10332812 992w, https://varyer.imgix.net/Search-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1711&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=38d83b88a382da0724e380db9f3d2115 1984w, https://varyer.imgix.net/Search-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=662&ixlib=php-3.3.1&q=60&usm=20&w=768&s=93f4501e64e085fb7717c1d24ab7663c 768w, https://varyer.imgix.net/Search-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1324&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=bad95957741edf3e2adb72d3724c919a 1536w, https://varyer.imgix.net/Search-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=496&ixlib=php-3.3.1&q=60&usm=20&w=576&s=5e06cc5244ecc8b547ab6fa2c6e5aa68 576w, https://varyer.imgix.net/Search-Direction-B.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=993&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=3a8159a80f5b27c166cc785326383a44 1152w)
For Every Moment
The final web design uses simple development to align with Sonos branding, combined with more immersive, interactive blocks to promote shows and original content.
![](https://varyer.imgix.net/Show-Grid-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1058&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=3d14def556274df61fdbd2dc4287af50 1200w, https://varyer.imgix.net/Show-Grid-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=2117&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=6d4a29239147cd5245f7d85bac3ede81 2400w, https://varyer.imgix.net/Show-Grid-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=875&ixlib=php-3.3.1&q=82&usm=20&w=992&s=1b1062c90d387ae9990113ea11fe4da7 992w, https://varyer.imgix.net/Show-Grid-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1750&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=2fc2e11b69f422781198b1695561834e 1984w, https://varyer.imgix.net/Show-Grid-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=677&ixlib=php-3.3.1&q=60&usm=20&w=768&s=078e3f04dd1981828ff774b00e5d145b 768w, https://varyer.imgix.net/Show-Grid-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1355&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=b14117e0734464fd9a7a2d62eb23f863 1536w, https://varyer.imgix.net/Show-Grid-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=508&ixlib=php-3.3.1&q=60&usm=20&w=576&s=2815b0582425befda8945ce4fd8b5925 576w, https://varyer.imgix.net/Show-Grid-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1016&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=5bdb137cd7a71bac30838cd4f575c9d3 1152w)
![](https://varyer.imgix.net/Search-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=778&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=d1fccaf0be30c96b62f577f45baeba4e 1200w, https://varyer.imgix.net/Search-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1557&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=c706c1324584da08a5cb578c21a9c87a 2400w, https://varyer.imgix.net/Search-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=643&ixlib=php-3.3.1&q=82&usm=20&w=992&s=3ca78d3148c84c7440b9bbe6fef95584 992w, https://varyer.imgix.net/Search-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1287&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=bdfd088bab8b0512b6856c646efd214b 1984w, https://varyer.imgix.net/Search-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=498&ixlib=php-3.3.1&q=60&usm=20&w=768&s=1d1025c9560c395a895ddd693102dd0e 768w, https://varyer.imgix.net/Search-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=996&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=da7b163fed8008234fc51d4142b05771 1536w, https://varyer.imgix.net/Search-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=373&ixlib=php-3.3.1&q=60&usm=20&w=576&s=768092c66879c6703e085e5689540a8c 576w, https://varyer.imgix.net/Search-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=747&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=a94dff09ccdecb2f696decac509b65b3 1152w)
A functional search page that filters shows and stations through relevance and offers a filtered search of shows, stations, and environments for further discovery.
![](https://varyer.imgix.net/Genres-Direction-A_2022-05-26-170417_vqjg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=703&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=6be5bb2d5e44101b62bab4ab1d20e0c4 1200w, https://varyer.imgix.net/Genres-Direction-A_2022-05-26-170417_vqjg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1407&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=033ad7bd1877e31baf5fb1bd178de9a3 2400w, https://varyer.imgix.net/Genres-Direction-A_2022-05-26-170417_vqjg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=581&ixlib=php-3.3.1&q=82&usm=20&w=992&s=5e39d95c2d6c1828d8d96af454defb7c 992w, https://varyer.imgix.net/Genres-Direction-A_2022-05-26-170417_vqjg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1163&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=a4b6c7c80613c1efbccf6b700b6a72bd 1984w, https://varyer.imgix.net/Genres-Direction-A_2022-05-26-170417_vqjg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=450&ixlib=php-3.3.1&q=60&usm=20&w=768&s=c25e27d74d687a49845c087f8c22d9a7 768w, https://varyer.imgix.net/Genres-Direction-A_2022-05-26-170417_vqjg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=901&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=2d987afedbbae591f8658487711fe539 1536w, https://varyer.imgix.net/Genres-Direction-A_2022-05-26-170417_vqjg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=337&ixlib=php-3.3.1&q=60&usm=20&w=576&s=fc20fb84ce0dd7f5bb72218b386a4318 576w, https://varyer.imgix.net/Genres-Direction-A_2022-05-26-170417_vqjg.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=675&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=115436f01ae9072d8c80157e7dc224a4 1152w)
An original design featured a wave of twelve colors that embraced the genre buttons. Upon further discovery, we adjusted the rows to be more readable and introduced the Sonos muted grayscale to stay on brand.
![](https://varyer.imgix.net/Station-Purple-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=750&ixlib=php-3.3.1&q=82&usm=20&w=1200&s=c05242e91840e18eb8e270e2a0d73578 1200w, https://varyer.imgix.net/Station-Purple-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1501&ixlib=php-3.3.1&q=61&usm=20&w=2400&s=fd1faf75d9a97a7773c582b351f68207 2400w, https://varyer.imgix.net/Station-Purple-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=620&ixlib=php-3.3.1&q=82&usm=20&w=992&s=744b8308555a84b24a4b0513a60a55ec 992w, https://varyer.imgix.net/Station-Purple-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1241&ixlib=php-3.3.1&q=61&usm=20&w=1984&s=c4dfd569e559dd4c8106636011c11744 1984w, https://varyer.imgix.net/Station-Purple-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=480&ixlib=php-3.3.1&q=60&usm=20&w=768&s=144313f1322b6ea188024540c4acede1 768w, https://varyer.imgix.net/Station-Purple-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=961&ixlib=php-3.3.1&q=45&usm=20&w=1536&s=49f20f7a8b486ff00ff65171f41e3ba5 1536w, https://varyer.imgix.net/Station-Purple-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=360&ixlib=php-3.3.1&q=60&usm=20&w=576&s=0d6dd9ec1cb98ceb3acefb4bf2698ce1 576w, https://varyer.imgix.net/Station-Purple-Direction-A.png?auto=format&crop=focalpoint&domain=varyer.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=720&ixlib=php-3.3.1&q=45&usm=20&w=1152&s=98784b5ecd297c69c12d28eb4571bf79 1152w)