top of page

Rethinking e-commerce
for JBL audio
About the project
JBL's e-commerce website, which is spread over 40 countries, has not been updated in a long while. The design was inconsistent & outdated. We gave it a fresher look, with better UX & innovative shopping experiences.
Role: UX research, design, project management
Team: Subi, Jeff, Joseph
Duration: 2020, 2021
JBL site, before our redesign
The website had inconsistent design throughout & global design considerations were not accounted for. The layout was not responsive & looked outdated. Brand experience & user flow needed improvement.


Usability tests
We conducted user tests on the existing website. JBL's target audience (20 - 40 years old, interested in consumer audio) were given some tasks to perform, to uncover the pain-points of the site.
Users felt that the site was functional, but it was old-fashioned and lacked branding.

Key user feedback
_edited.png)
Site has all the basics
_edited.png)
Good brand recognition & trust

Information heavy & cluttered

Too generic & old fashioned
Brand representation
Step one was multiple meetings with stakeholders, to figure out the project scope, business needs & timelines. This gave me insight into the brand & how to better represent it.

Sales through the mobile
site surpassed desktop, which made us focus on a mobile-first approach.

Insights from competitors
I conducted an analysis of JBL's competitor sites. The takeaways? Customers want to buy into you as a brand before they buy your products. Mobile optimization is key & information should be digestible at a glance.

Sketches & discussion
We dived down into the current site, to review the current ux & identify challenges & opportunities for improvement. We had request design critiques & design sessions with both team members & stakeholders. Ideation was done with rough sketches & refined further, which lead us to wireframing.





Style guide
Since the JBL sites across 40 countries were inconsistent in design, we created a design system to unify everything.

Mood boards
The aim was to keep the designs light & fresh, while adding pops of orange (JBL's brand color) & colorful images, without overpowering the user.

Home page: an immersive brand experience
Pops of bright colors, while maintaining JBL's signature look & giving the website a fresh, light feel. Focus was on lifestyle elements & rethinking shopping experiences.

Checkout: fast & efficient
We revised userflows to improve the overall user experience & to reduce cart abandonment during checkout. We also included multiple payment & design considerations for multiple regions.

Product detail page

Product landing page

Ambassador page

Home page

User account

Navigation

Final Design
Things that added complexity to the project
-
Getting stakeholders on board with design decisions.
-
Stuck on an iteration loop
-
A multitude of design considerations for different countries.
-
Insufficient communication with developer team
-
Too many screens, too many files
-
Time management

bottom of page