Swapfiets
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. At Swapfiets, I work alongside a passionate and supportive team of designers, collaborating with various departments to foster growth and development. My primary focus has been improving the website's user experience through close cooperation with the Marketing team and developers.
Project Overview
Why redesign the site navigation?
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
UI design
Wireframe
Design critics
A/B Testing
Prototyping
Research
Analyze user behavior
To identify the problems with the site's navigation, I analyzed user behavior to understand how users searched 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.
Here are the problems.
The current navigation 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.
Link hierarchy
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 inclusion of the Swapdesk phone number in the menu gives the impression that customers should call for assistance, leading to a high volume of phone calls and increased company expenses.
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.
We are going to create more topic-specific landing pages.
We created two landing pages: Test Ride and Service. These pages aim to provide detailed information about our service and encourage users to try our e-bikes, ultimately increasing conversion rates.
Contact info
Following an interview with the Help Desk, I decided to reduce service phone calls by removing our contact information from the menu. Users can still reach us through the Help Center, where they can find contact info for urgent assistance.
Social media icon
We prefer not to direct users to third-party platforms. While supporting social media is important, users should find social media links in the footer. therefore I decided that the menu was not in the right position.
E-bike
Users can check out all bike information from the product overview page.
Stay
New
Remove
-
All bikes
-
Help
-
Language setting
-
Account
-
Test ride
-
Service
-
E-bikes
-
Contact info
-
Social media
UI 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.
I would replace the "See bikes" CTA with the right side. then we keep potential customer interactions left and customer interactions on the right.
I would put the language select on the right, that's how I am used to it from other websites.
I do like the design of the mega menu but I think it adds unnecessary complexity and a product overview page will probably fulfill the needs of the customer much better than the mega menu element.
I like this the best. but below items "e-bikes" and "city bikes". I would put something like "all bikes", and then remove the CTA.
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
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
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.
Default
Open region menu
Next Step
Throughout this projects, I have come across numerous opportunities for further enhancements and improvements to our website. These findings have revealed exciting possibilities for advancing our website and paving the way for the next steps in its development.
Top promotion banner
Opportunity
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
