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.