The Problem

As someone who has worked in the smart home/audio industry, I understand that many consumers don't always know which products they need when setting up their smart home/audio systems. The Sonos website features a page where users can learn more about their products, helping them make informed purchase decisions. However, it is quite lengthy, and users may not have the time to read through it all to determine which products best suit their needs.

Solution

In this project, I designed an alternative user flow for the homepage, which includes a short form that users can fill out to be shown a list of recommended products that best suit their needs based on the answers provided. This creates a quick and user-friendly experience for users to find what they need for their smart home/audio applications.

Process

I began this project by conducting research on the Sonos website to see if I could identify any potential usability issues, and see how I could improve the user experience. I noticed how the "Explore Products" button in the hero image takes the user to a page showcasing their entire product catalog. The problem with this is if someone who isn't already familiar with their products goes to this page, they're not going to know what products will best suit their needs and might become overwhelmed. Below is the original Sonos hero image.

After discovering an area for improvement on the original Sonos homepage, I started to observe the Sonos website to identify the design components they used. This would enable me to incorporate those elements into my design. I discovered that the primary font family they utilized was 'Aktiv Grotesk,' and I also noticed that the colors 'Earth Yellow' and 'Columbia Blue' were frequently used throughout the website.

Next, I started to ideate an alternative user flow so that users could more easily find the products they need for their specific application. I ultimately decided that a short form would solve this problem, but I still wanted to give users the option to explore the full catalog using the hero image button if they already knew what they needed. I took this information into consideration, and redesigned the hero image with a link at the bottom which redirects users to fill out the form if they didn't know which products they needed.

After designing the hero image, I started to design the form that users could fill out to discover products that best suit their application. The goal was to create a form short enough to make it easy for users to fill out, but also gather enough information to show users the most relevant products for their application.

In summary, this redesign was meant to be a short project to assess my problem-solving skills and come up with an alternative user flow to address a specific issue. While I didn't delve as deeply into this project as I have with others, it remains an enjoyable endeavor that, in my opinion, effectively tackles a genuine problem.