Swapfiets
Improved the site navigation
Project Overview
Swapfiets, an Amsterdam-based company, provides a B2C bike subscription service across eight European countries.I joined Swapfiets in 2023 as an intern and have since advanced to the role of UX Designer. My primary focus has been improving the website's user experience through close cooperation with the Marketing team and developers.
Overview
Redesign the site navigation to establish a clear hierarchy, providing users with an intuitive path and better information visibility.
Key Result: Improved navigation experience, measured by increased conversion rates.
Project goal
Redesign the website's navigation to create a clear, intuitive path for users, enhancing the display of information and overall user experience.
Process
Research
Analyze user behavior | Competitor research | Define problem
Ideate
Redefine hierarchy of site map
Design
Wireframe | Design Critics
Prototype
A/B Test
Research
Analyze user behavior - heatmap
To identify the problem with the site's navigation, I analyzed user behavior to understand how users serached for and accessed information, and determined what information they sought.
Competitor research
To find out the information hierarchy, I researched 4 competitors. two of them are direct competitors, and two of them are indirect competitors. the reason why I choose 2 indirect competitors is, they have a good feature and a nice hierarchy of site navigation.
Problem
The current naviagtion bar is hidden behind the hamburger menu, making it less accessible.
The current navigation bar lacks proper hierarchy and deliberate decisions on which information to display and which to hide.
Problem details
Link Hierachy
The current navigation menu lacks relevant content and some of the items can be removed. It is necessary to redefine the hierarchy of links to improve its usability.
Contact Information
The current navigation menu lacks relevant content and some of the items can be removed. It is necessary to redefine the hierarchy of links to improve its usability.
Language / Country setting
Users may experience confusion when attempting to select their preferred country and language. Improvements should be made to facilitate easy changes to language and country settings.
Social media Icon
By including our social media icon on the navigation bar, users may be enticed to explore other social media platforms.
Ideation
Redefine site hierarchy
I made this decision based on customer behaviors and user needs, identifying information that users seek but isn't currently displayed, as well as determining which information could be moved to other sections instead of the site navigation based on my research.
Design
Wireframe
Before diving into high-fidelity design, I created wireframes to focus on the information hierarchy. This helped me organize the content and made it easier to compare different approaches.
Approach 1: Top banner navigation
I have updated the site navigation by placing it in a visible banner instead of a hidden menu.
Also, keep the "See bikes" button for the primary call to action.
As a result, contact information, e-bikes, and social media icons have been removed. they are going to be in the footer.
Approach 2: Top banner navigation with mega menu (while hovering)
Approach 2 features the identical navigation structure to approach 1, but we are interested in experimenting with a mega menu for site navigation. The mega menu adds an enhanced and enjoyable experience for users, and we anticipate that users will be able to promptly filter products directly from the mega menu.
Design Critique
After finalizing the initial lo-fi wireframe, I requested feedback from 5 developers and 3 UX designers in the internal team.
I applied feedback to create the final A/B test.
Prototype
A/B Testing
The final A/B test design was decided based on the feedback received from co-workers and re-examining the reference.
For the UX writing improvement, I worked with UX writer regarding the site menu titles.
Approach 1
Visible Top Navigation Menu - Desktop
Approach 1
Visible Top Navigation Menu - Mobile
Clear hierarchy
We have redefined the site menu by removing the "e-bike" section and adding a new category called "Test ride." Our data research shows that 70% of users who participate in the test ride ultimately sign up for a membership, resulting in a significant increase in conversion rates.
Simplify the menu
We have made a significant update by replacing the hidden hamburger menu with a more prominent top banner menu. As part of this change, we have relocated all contact information and social media icons to the footer, allowing users to focus solely on site navigation.
Primary CTA "See bikes"
We have made the decision to retain the fixed Call to Action on the navigation, ensuring that it remains easily accessible to users. Additionally, users will be able to locate the CTA from the mobile menu as well.
Improved UX copy
UX writer crafts seamless and cohesive link copies, allowing us to present a unified and polished title structure.
All bikes -> bikes / Book a test ride -> Test ride / Help -> Help center
Approach 2
Visible top navigation menu with mega menu (while hovering) - Desktop
Approach 2
Visible top navigation menu with mega menu (while hovering) - Mobile
Mega menu
For the desktop, while hovering the "Bikes", a mega menu will appear. users can filter the product types. It helps to prevent information overload and minimize the need for excessive scrolling or clicking through multiple layers of navigation.
Enjoyable image
To enhance the visual appeal and engagement of the menu, we have incorporated stunning sportive images. These captivating visuals not only add a touch of aesthetic appeal but also grab the attention of users, creating a more immersive.
Improved UX copy
I have engaged our UX writer to craft engaging and compelling copy for the overview descriptions of the Bikes site, which will be showcased within the mega menu.
Language & Region selector
To accommodate the transition in the navigation bar, I have redesigned the language selector. As part of this update, I have integrated the language and region options into a single modal, providing a more streamlined and efficient user experience.
Opportunities
Top promotion banner
A big ask from marketing is to include a banner at the homepage to increase awareness. At the moment more or less 40% of all visitors start at the homepage. We miss out on an opportunity to highlight our super amazing promo.
Footer
The transition from a hidden hamburger menu to a prominent top navigation bar menu resulted in the removal of several contents, which can now be relocated to the footer section for display.
This presents an opportunity for us to redefine the site hierarchy and realign essential elements such as language settings, contact information, and social media links to ensure a seamless user experience.
