Skroutz Merchants: Revamping dashboard navigation
The sidebar menu is a vital part of any dashboard, guiding users to various features and functionalities. However, when it becomes cluttered and difficult to navigate, it negatively impacts the user experience. To address these issues, we embarked on a comprehensive redesign of the sidebar to enhance its usability and efficiency.
Company
Skroutz.gr
Founded
2005
Industry
E-commerce
Revenue
€132 million (2024)
Company size
400+
What is Skroutz?
Skroutz.gr is Greece’s leading price comparison and online shopping platform, as well as the country’s 4th most visited site. It helps users discover, compare, and purchase products from thousands of online stores while offering detailed reviews, ratings, and secure purchasing options.
Skroutz Merchants is a platform powered by Skroutz that helps over 10,000 merchants grow their online business by providing tools and services.
Overview
Challenge
The existing sidebar was a major pain point for merchants. It was oversized, cluttered with expanded submenus, and required excessive scrolling. Additionally, inconsistent categorization of menu items made it difficult for users to quickly find what they needed.
Goal
Our main goal was to create a sidebar that was both compact and intuitive. We aimed to streamline navigation, reduce cognitive load, and make it easier for users to access desired pages with minimal effort. We also wanted to modernize the menu's visual design to meet contemporary UI standards.
Research & Discovery
Click rate analysis
We began by analyzing click rates to understand the popularity and usage patterns of various menu items. This data provided a clear picture of how merchants interacted with the existing sidebar.
UMUX survey
Next, we collaborated with the UXR team to conduct a UMUX survey, gathering feedback on the current sidebar’s usability and whether it met merchants’ needs. The survey received an average score of 4.3/5 from 589 respondents.
Despite the high score, it was evident that familiarity with the existing design influenced these ratings, as the sidebar was still recognized as overly long and challenging to navigate. Below is some feedback from merchants who provided negative score:
Tree Testing
We ran a tree test to validate the new structure proposal. With 170 participants completing 10 tasks, we evaluated how easily users could locate specific items within the proposed structure. The first round of results highlighted areas for improvement, which we addressed before conducting a second round of testing. The improved results from the second round gave us confidence to proceed with the redesign.
Design Process
New icon set
With the navigation structure validated, we moved forward with the design phase. Given the extensive use of icons throughout the sidebar and header, this presented a perfect opportunity to refresh the entire icon set. The updated icons were designed to be both visually appealing and functional, ensuring clarity and consistency across the interface.
Header Redesign
We moved key features from the sidebar to the new header to enhance accessibility, including the important Help section. To ensure a smooth transition, we released an onboarding tooltip to guide merchants on the new location, reducing confusion.
Responsive design
We began to focus more on responsive design because many merchants frequently use their mobile devices in the warehouse to check and prepare orders. As a result, the prioritization of menu items in the mobile header was adjusted, with orders becoming the main focus, as it’s the most essential and necessary page.
Microinteractions
Recognizing that details make a difference, I introduced subtle hover effect on menu items, enriching the overall user experience and making navigation feel more dynamic and engaging.
Gradual rollout
Given the scale of the changes and their potential impact on merchants’ daily workflows, I opted for a gradual rollout strategy. Rather than introducing the entire redesign at once, we broke it down into several stages, releasing each update incrementally. This approach allowed merchants to adapt to the new navigation structure step by step, reducing confusion and preventing an abrupt shift in their user experience.
Future ideas
Collapsible sidebar
A future enhancement could allow the sidebar to become collapsible, showing only the icons of menu items. This would maximize screen space, especially for merchants working in smaller windows, while still maintaining easy access to key functionalities.
Promotional space
The lower section of the sidebar could be used to promote valuable information such as subscription expiry reminders, upcoming webinars, or product updates. This would allow us to engage merchants more effectively by providing timely and relevant content within their daily workflow.
Outcome
As designers, we must always push for improvements, even when they aren’t directly requested by leadership. It’s crucial to take the initiative and advocate for UX and UI enhancements, as these changes often go unnoticed but are essential for creating a better user experience in the long run.