Rethinking e-commerce for JBL audio

JBL's e-commerce website, which operates across 40 countries, had not been updated for a long time. The design was inconsistent and outdated. To address these issues, we revamped the website with a fresher look, improved user experience (UX), and introduced innovative shopping experiences.

Rethinking e-commerce for JBL audio

JBL's e-commerce website, which operates across 40 countries, had not been updated for a long time. The design was inconsistent and outdated. To address these issues, we revamped the website with a fresher look, improved user experience (UX), and introduced innovative shopping experiences.

Rethinking e-commerce for JBL audio

JBL's e-commerce website, which operates across 40 countries, had not been updated for a long time. The design was inconsistent and outdated. To address these issues, we revamped the website with a fresher look, improved user experience (UX), and introduced innovative shopping experiences.

Company

JBL Audio

Role

Product Designer

Year

2020 - 2021

JBL's website before our redesign

The website suffered from inconsistent design throughout, and global design considerations were not taken into account. The layout was not responsive and appeared outdated. Additionally, the brand experience and user flow were in need of improvement.

JBL's website before our redesign

The website suffered from inconsistent design throughout, and global design considerations were not taken into account. The layout was not responsive and appeared outdated. Additionally, the brand experience and user flow were in need of improvement.

JBL's website before our redesign

The website suffered from inconsistent design throughout, and global design considerations were not taken into account. The layout was not responsive and appeared outdated. Additionally, the brand experience and user flow were in need of improvement.

Research & discovery

Brand representation

Step one involved multiple meetings with stakeholders to determine the project scope, business needs, and timelines. These discussions provided valuable insights into the brand and helped me understand how to better represent it through the website redesign.

Usability testing

In order to find out the pain-points of our current user base, I conducted user tests on the existing website. The target audience, comprising of individuals aged 20-40 years old and interested in consumer audio, were given specific tasks to perform. The key user insights obtained from these tests provided valuable guidance for our redesign efforts.

Insight from competitors

I conducted an analysis of JBL's competitor sites, and the key takeaways were enlightening. Customers desire to connect with a brand before purchasing their products. Mobile optimization is of paramount importance, and information should be presented in a way that can be quickly digested at a glance. These insights were invaluable for shaping our approach to the website redesign and ensuring a more engaging user experience.

Mobile first approach

Sales through the mobile site surpassed desktop, which led us to shift our focus towards a mobile-first approach. This change in strategy aimed to prioritize the mobile user experience and ensure that our website provided a seamless and user-friendly interface for mobile users, reflecting the growing importance of mobile commerce.

Research & discovery

Brand representation

Step one involved multiple meetings with stakeholders to determine the project scope, business needs, and timelines. These discussions provided valuable insights into the brand and helped me understand how to better represent it through the website redesign.

Usability testing

In order to find out the pain-points of our current user base, I conducted user tests on the existing website. The target audience, comprising of individuals aged 20-40 years old and interested in consumer audio, were given specific tasks to perform. The key user insights obtained from these tests provided valuable guidance for our redesign efforts.

Insight from competitors

I conducted an analysis of JBL's competitor sites, and the key takeaways were enlightening. Customers desire to connect with a brand before purchasing their products. Mobile optimization is of paramount importance, and information should be presented in a way that can be quickly digested at a glance. These insights were invaluable for shaping our approach to the website redesign and ensuring a more engaging user experience.

Mobile first approach

Sales through the mobile site surpassed desktop, which led us to shift our focus towards a mobile-first approach. This change in strategy aimed to prioritize the mobile user experience and ensure that our website provided a seamless and user-friendly interface for mobile users, reflecting the growing importance of mobile commerce.

Research & discovery

Brand representation

Step one involved multiple meetings with stakeholders to determine the project scope, business needs, and timelines. These discussions provided valuable insights into the brand and helped me understand how to better represent it through the website redesign.

Usability testing

In order to find out the pain-points of our current user base, I conducted user tests on the existing website. The target audience, comprising of individuals aged 20-40 years old and interested in consumer audio, were given specific tasks to perform. The key user insights obtained from these tests provided valuable guidance for our redesign efforts.

Insight from competitors

I conducted an analysis of JBL's competitor sites, and the key takeaways were enlightening. Customers desire to connect with a brand before purchasing their products. Mobile optimization is of paramount importance, and information should be presented in a way that can be quickly digested at a glance. These insights were invaluable for shaping our approach to the website redesign and ensuring a more engaging user experience.

Mobile first approach

Sales through the mobile site surpassed desktop, which led us to shift our focus towards a mobile-first approach. This change in strategy aimed to prioritize the mobile user experience and ensure that our website provided a seamless and user-friendly interface for mobile users, reflecting the growing importance of mobile commerce.

Brainstorming

Sketches and discussion

We delved into the current site to review the current user experience (UX) and identify challenges and opportunities for improvement. To gather insights, we requested design critiques and held design sessions with both team members and stakeholders. During the ideation phase, we started with rough sketches and further refined our ideas, which eventually led us to wireframing the new website design. This iterative process helped us build a solid foundation for the redesign.

Brainstorming

Sketches and discussion

We delved into the current site to review the current user experience (UX) and identify challenges and opportunities for improvement. To gather insights, we requested design critiques and held design sessions with both team members and stakeholders. During the ideation phase, we started with rough sketches and further refined our ideas, which eventually led us to wireframing the new website design. This iterative process helped us build a solid foundation for the redesign.

Brainstorming

Sketches and discussion

We delved into the current site to review the current user experience (UX) and identify challenges and opportunities for improvement. To gather insights, we requested design critiques and held design sessions with both team members and stakeholders. During the ideation phase, we started with rough sketches and further refined our ideas, which eventually led us to wireframing the new website design. This iterative process helped us build a solid foundation for the redesign.

Design phase

Style guide

Since the JBL sites across 40 countries had inconsistent designs, we decided to create a design system to bring uniformity to the brand's online presence. The design system would serve as a centralized resource, ensuring consistent elements, styles, and components were used throughout all the websites. This approach would not only improve the overall user experience but also make it easier to manage and update the websites in the future.

Design phase

Style guide

Since the JBL sites across 40 countries had inconsistent designs, we decided to create a design system to bring uniformity to the brand's online presence. The design system would serve as a centralized resource, ensuring consistent elements, styles, and components were used throughout all the websites. This approach would not only improve the overall user experience but also make it easier to manage and update the websites in the future.

Design phase

Style guide

Since the JBL sites across 40 countries had inconsistent designs, we decided to create a design system to bring uniformity to the brand's online presence. The design system would serve as a centralized resource, ensuring consistent elements, styles, and components were used throughout all the websites. This approach would not only improve the overall user experience but also make it easier to manage and update the websites in the future.

Moodboards

The aim was to keep the designs light and fresh, while incorporating pops of orange (JBL's brand color) and colorful images to add vibrancy. The goal was to strike a balance and avoid overwhelming the user with excessive visual elements. By implementing these design choices, we sought to create an engaging and enjoyable user experience while staying true to JBL's brand identity.

Moodboards

The aim was to keep the designs light and fresh, while incorporating pops of orange (JBL's brand color) and colorful images to add vibrancy. The goal was to strike a balance and avoid overwhelming the user with excessive visual elements. By implementing these design choices, we sought to create an engaging and enjoyable user experience while staying true to JBL's brand identity.

Moodboards

The aim was to keep the designs light and fresh, while incorporating pops of orange (JBL's brand color) and colorful images to add vibrancy. The goal was to strike a balance and avoid overwhelming the user with excessive visual elements. By implementing these design choices, we sought to create an engaging and enjoyable user experience while staying true to JBL's brand identity.

Prototypes

Home page: an immersive brand experience

Exactly! Pops of bright colors were used strategically to maintain JBL's signature look while also infusing the website with a fresh and light feel. The primary focus was on incorporating lifestyle elements and rethinking shopping experiences to enhance user engagement and create a more enjoyable and immersive online shopping journey for JBL's customers.

Prototypes

Home page: an immersive brand experience

Exactly! Pops of bright colors were used strategically to maintain JBL's signature look while also infusing the website with a fresh and light feel. The primary focus was on incorporating lifestyle elements and rethinking shopping experiences to enhance user engagement and create a more enjoyable and immersive online shopping journey for JBL's customers.

Prototypes

Home page: an immersive brand experience

Exactly! Pops of bright colors were used strategically to maintain JBL's signature look while also infusing the website with a fresh and light feel. The primary focus was on incorporating lifestyle elements and rethinking shopping experiences to enhance user engagement and create a more enjoyable and immersive online shopping journey for JBL's customers.

Checkout: fast and efficient

We made revisions to the user flows to enhance the overall user experience and reduce cart abandonment during checkout. Additionally, we incorporated multiple payment and design considerations tailored to different regions. These efforts were aimed at providing a smoother and more user-friendly shopping experience for JBL's diverse customer base.

Checkout: fast and efficient

We made revisions to the user flows to enhance the overall user experience and reduce cart abandonment during checkout. Additionally, we incorporated multiple payment and design considerations tailored to different regions. These efforts were aimed at providing a smoother and more user-friendly shopping experience for JBL's diverse customer base.

Checkout: fast and efficient

We made revisions to the user flows to enhance the overall user experience and reduce cart abandonment during checkout. Additionally, we incorporated multiple payment and design considerations tailored to different regions. These efforts were aimed at providing a smoother and more user-friendly shopping experience for JBL's diverse customer base.

Complexities and learnings

There were some challenges that prolonged the completion time of this project:

  • Dealing with numerous design considerations for different countries.

  • Insufficient communication with the developer team.

  • Dealing with an overwhelming number of screens and files.

  • Time management issues.

    Despite these challenges, we persisted in addressing them and ensured a successful outcome for the project.

Complexities and learnings

There were some challenges that prolonged the completion time of this project:

  • Dealing with numerous design considerations for different countries.

  • Insufficient communication with the developer team.

  • Dealing with an overwhelming number of screens and files.

  • Time management issues.

    Despite these challenges, we persisted in addressing them and ensured a successful outcome for the project.

Complexities and learnings

There were some challenges that prolonged the completion time of this project:

  • Dealing with numerous design considerations for different countries.

  • Insufficient communication with the developer team.

  • Dealing with an overwhelming number of screens and files.

  • Time management issues.

    Despite these challenges, we persisted in addressing them and ensured a successful outcome for the project.

Let's work

together.

subikshasureender@gmail.com

Let's work

together.

subikshasureender@gmail.com

Let's work

together.

subikshasureender@gmail.com