MusicWorld.bg | Project Showcase
Redesign of a music instruments webstore
2024
My Role: UX Designer, UI Designer
About the project
MusicWorld.bg is the biggest store for musical instruments in Bulgaria. As a longtime customer, I've often had to use their website and each time I was left perplexed by its poor visual aesthetic and usability. Despite the store's overall great service, wide selection of products and superbly furnished interior, the digital experience is severely lacking. For that reason I took it upon myself to redesign their website.
Problem
There were two main problems with the website - visual aesthetic and usability. The website might've been okay a decade or so ago, but at the moment it feels quite outdated. This is a major issue when one opens their competitors' websites and sees that they are all better looking and more functional. It is easy to understand that this translates into a definite business issue, especially when paired with the poor usability of the website. Vital information is difficult to spot and content is not optimally structured, which makes finding specific products challenging.
To illustrate, following are a few snapshots from the website:
Solution
The main solution to the above-mentioned problems was simplification and structuring. My goal was to pursue a clean, minimalistic design style while maintaining the brand's identity.
In order to do so, I drew inspiration from the fashion industry. What strikes me as interesting in all clothing webstores is the focus that is put on the product. Unlike musical instruments websites where the the aim is to showcase a wide selection of products and list their features, fashion websites give much more prominence to the singular item. The visuals are larger, with less clutter around them, while product information remains secondary. To an extent, this was my strategy with this redesign. To take the best of both worlds and combine it.
User Research
Luckily, I know a lot of musicians and almost all of them use the services of MusicWorld.bg. Therefore it was easy to reach out to them and conduct quantitative research. My goal was to asses their level of satisfaction with the store's online experience and pinpoint potential usability issues. Despite being a user of the platform myself, I couldn't rely purely on my assumptions. It was quite interesting to compare my thoughts with those of my fellow musicians. Some of the hypotheses I had were validated, but there were also additional findings.
Key results
Ease of Navigation
Average rating: 2.1/5
Issue: 67% reported difficulty finding specific products or categories.
Notable Feedback:
"The homepage structure is confusing, and the search function rarely shows relevant results."
Design & Aesthetics
Average rating: 2.0/5
Issue: 73% found the design outdated and cluttered.
Notable Feedback:
"It feels like the website hasn't been updated since the early 2000s."
Overall Usability
Average rating: 2.3/5
Issue: Most users found the site challenging to use for simple tasks, such as purchasing or finding contact information.
Notable Feedback:
"I abandoned my cart twice because the checkout process was so confusing."
Wireframes
The main aim of the wireframing process was to improve the content structure and the findability of key actions. The focus was on 4 main pages: Homepage, Product Items, Product Category and Product Details.
Homepage
Product Category
Product Items
Product Details
Final Design
Below are the four main redesigned pages which make up about 80% of the website's structure. The layout of the pages follows the same logic in order to decrease memory burden on the user and provide a consistent experience. Sections for popular categories and recommendations were added to provide a mechanism for showcasing products that are relevant to business goals.
Homepage
Product Category
Product Filter
Product Items
Product Details
Product Details (Expanded Info)
Most Notable Improvements
Detailed below are the most notable changes in the design, with BEFORE and AFTER visual comparisons provided. The redesign focuses on enhancing user experience through a modernized layout, intuitive navigation, and improved aesthetics. Key improvements include a more visually appealing homepage with focus on promotional products, better structured product categories, and a simplified product browsing process.
Color Contrast
Before
After
❌ Contrast ratio - 3.57:1
✅ Contrast ratio - 7.05:1
Special offers
Before
❌ Special offers are not optimally placed and clutter the homepage.
After
✅ Special offers are structured and placed prominently in a hero section with automatic slideshow.
Products in focus
Before
❌ Promotional and business-goal-relevant products are difficult to spot among the tons of information on the homepage.
After
✅ The products are structured in two categories - Products in focus and New products. Easier to find and browse.
Products cards
Before
❌ Product cards are difficult to scan and have poor hierarchy, with more focus on the title instead of the image.
After
✅ Product cards are cleaner, put more emphasis on the visual of the product, provide a mechanism for switching images and are easier to scan.
Sorting and filtering
Before
❌ No mechanism for sorting and filtering content based on user preferences.
After
✅ Added functionality with detailed product filtering options, as well as a quick sorting menu.
