3%20Device%20Mashup_edited.png
Rethinking e-commerce
experiences
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: Ongoing

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.
MacBook%20Pro_edited.png
Imported_Image.png
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.
www.jbl.com_ 9.png
Key user feedback
like%20(3)_edited.png
Site has all the basics
like%20(3)_edited.png
Good brand recognition & trust
Negative
Information heavy & cluttered
Negative
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.
Untitled_Artwork copy 7.png
Sales through the mobile
site surpassed desktop, which made us focus on a mobile-first approach.
www.jbl.com_ 5.png
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.
Untitled_Artwork copy 6.png
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.
www.jbl_edited.jpg
22.png
23.png
17.png
24.png
Style guide
Since the JBL sites across 40 countries were inconsistent in design, we created a design system to unify everything.
Frame 1.png
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.
Screen%20Shot%202021-05-11%20at%2012.59_
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 Description Page
Product landing page
Product Landing Page
Ambassador page
Ambassador Page
Home page
Home Page
User account
User Account
Navigation
Expanded menu
 
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
www.jbl.com_ 4.png
User_Testing_edited.jpg
Next steps
The Russian version of the website is about to be published by our developer agency. We are currently tweaking our designs to suit the American region, which will be published next.