Role:

Designer and Developer.

Tools:

Photoshop, Ilustrator & Visual Studio Code.

To support the latest trend of soundbars, create a landing page that has an interactive element to provide information on all a consumer needs to know when purchasing a soundbar.

01 The Ask

Conducted online research to gain an indepth understanding of everything there is to know about soundbars.

Understanding Soundbars

02 Research

Once I had a thorough understanding of soundbars I looked at how other companies were providing information on soundbars to consumers. In particular I focused my attention to any interactive and visual components that were used.

Competitor Analysis

Buying guides are typically text heavy.
Visual representations of how a soundbar works makes it easier for consumers to digest.
An interactive component that demonstrates the different types of soundbar configurations will be beneficial.

03 Key Takeaways

04 Design

Ensuring the the design was responsive and had a clear visual hierarchy, I layed up the wireframe. This was presented to my team and client for approval.

Wireframe

Designed high-fidelity version of the landing page using photoshop and illustrator. As the buying guide is very text heavy, I broke up the content where possible by styling the fonts and with imagery to ensure the content was digestible and not overwhelming for the user.

High-fidelity

An animated slider where the user selects and visually compares the soundwaves produced from 4 different speaker configurations that range from basic to advanced set ups.

Interactive Component

05 Build

Using Visual Studio Code, I coded the landing page using HTML, CSS and Javascript.

Development

Tested the page in many different environments and browsers to ensure there was no errors or bugs in the code that would impact the design and/or user experience. The code was then sent through code check and deployed.

Testing & Deployment

Experience Better Sound