Purple Flower

BeActive - Redesigning the E-Bike Booking Experience

BeActive - Redesigning the E-Bike Booking Experience

My role

Led the UX and interface design process, from user flow planning and responsive UI design to developer handoff and WordPress implementation support

Services

UX/UI Design, Booking Flow Optimization, Mobile-First Design, Information Architecture, Responsive Design, CMS Structure Planning, Developer Collaboration

Tools

Figma, Adobe Illustrator, WordPress

Year

2023

Focus

Booking Flow, Accessibility, Mobile UX, Information Architecture, CMS Scalability

A mobile-first booking platform concept designed to reduce booking friction, simplify decision-making, and improve accessibility for users with different levels of technical confidence.

A mobile-first booking platform concept designed to reduce booking friction, simplify decision-making, and improve accessibility for users with different levels of technical confidence.

Context

BeActive is a concept redesign for an e-bike rental platform focused on improving the booking experience for tourists and casual riders.

The project explored how a mobile-first product experience could reduce booking friction, simplify decision-making, and improve accessibility for users with different levels of technical confidence.

The Problem

The original booking flow created unnecessary friction during the reservation process.

Users could only access basic information such as bike model and frame size before entering checkout. Technical specifications, rental conditions, and riding difficulty were hidden behind additional screens.

As a result, users often left the booking flow to search for missing information, interrupting the decision-making process and increasing the risk of cart abandonment.

The challenge was especially important for older users and first-time e-bike riders who needed a more confidence-building and accessible experience.

Context

BeActive is a concept redesign for an e-bike rental platform focused on improving the booking experience for tourists and casual riders.

The project explored how a mobile-first product experience could reduce booking friction, simplify decision-making, and improve accessibility for users with different levels of technical confidence.

The Problem

The original booking flow created unnecessary friction during the reservation process.

Users could only access basic information such as bike model and frame size before entering checkout. Technical specifications, rental conditions, and riding difficulty were hidden behind additional screens.

As a result, users often left the booking flow to search for missing information, interrupting the decision-making process and increasing the risk of cart abandonment.

The challenge was especially important for older users and first-time e-bike riders who needed a more confidence-building and accessible experience.

Project Goals

The redesign focused on improving clarity, reducing unnecessary navigation, and creating a more accessible mobile booking experience.

Key UX priorities included:

  • simplifying the rental flow,

  • reducing cognitive load,

  • improving mobile usability,

  • increasing information visibility before checkout,

  • supporting older and less technical users,

  • and creating a more scalable product page structure.

Project Goals

The redesign focused on improving clarity, reducing unnecessary navigation, and creating a more accessible mobile booking experience.

Key UX priorities included:

  • simplifying the rental flow,

  • reducing cognitive load,

  • improving mobile usability,

  • increasing information visibility before checkout,

  • supporting older and less technical users,

  • and creating a more scalable product page structure.

Research & UX Decisions

To better understand friction points, I analyzed booking flows used by competing rental platforms and mapped the user journey from product discovery to checkout.

The main UX priority was reducing the number of steps required to access essential rental information.

Instead of separating pricing, specifications, and rental conditions across multiple screens, I consolidated all decision-critical content into a single product page.

The experience was designed with a mobile-first approach, simplified navigation, and clear visual hierarchy to reduce cognitive overload during booking.

To support the WordPress development process, I prepared modular page sections, reusable UI patterns, and responsive layouts that could be efficiently translated into a CMS-based environment.

The project involved close collaboration with the developer during implementation to ensure consistency between the design system and the final product experience.

Research & UX Decisions

To better understand friction points, I analyzed booking flows used by competing rental platforms and mapped the user journey from product discovery to checkout.

The main UX priority was reducing the number of steps required to access essential rental information.

Instead of separating pricing, specifications, and rental conditions across multiple screens, I consolidated all decision-critical content into a single product page.

The experience was designed with a mobile-first approach, simplified navigation, and clear visual hierarchy to reduce cognitive overload during booking.

To support the WordPress development process, I prepared modular page sections, reusable UI patterns, and responsive layouts that could be efficiently translated into a CMS-based environment.

The project involved close collaboration with the developer during implementation to ensure consistency between the design system and the final product experience.

Accessibility & Mobile Experience

The interface was designed to feel clean, calm, and approachable across devices.

Soft pastel colors, spacious layouts, and large typography helped create a more accessible experience for users of different age groups and technical confidence levels.

Accessibility considerations included:

  • readable typography,

  • strong visual hierarchy,

  • touch-friendly interactions,

  • simplified navigation,

  • and clear pricing visibility.

The platform was designed mobile-first, recognizing that rental decisions are often made outdoors and on mobile devices.

Design decisions were validated against common mobile usability principles to improve clarity and ease of interaction.

Accessibility & Mobile Experience

The interface was designed to feel clean, calm, and approachable across devices.

Soft pastel colors, spacious layouts, and large typography helped create a more accessible experience for users of different age groups and technical confidence levels.

Accessibility considerations included:

  • readable typography,

  • strong visual hierarchy,

  • touch-friendly interactions,

  • simplified navigation,

  • and clear pricing visibility.

The platform was designed mobile-first, recognizing that rental decisions are often made outdoors and on mobile devices.

Design decisions were validated against common mobile usability principles to improve clarity and ease of interaction.

Final Solution

The final solution transforms the rental experience into a simplified three-step booking flow:

  1. Explore the bike model

  2. Select rental duration

  3. Confirm the reservation

All essential information is available before checkout, reducing uncertainty and helping users confidently complete the booking process.

Expandable content sections maintain visual clarity while still providing advanced users with access to technical details when needed.

The redesigned experience improves usability across devices while creating a faster and more intuitive booking journey.

Final Solution

The final solution transforms the rental experience into a simplified three-step booking flow:

  1. Explore the bike model

  2. Select rental duration

  3. Confirm the reservation

All essential information is available before checkout, reducing uncertainty and helping users confidently complete the booking process.

Expandable content sections maintain visual clarity while still providing advanced users with access to technical details when needed.

The redesigned experience improves usability across devices while creating a faster and more intuitive booking journey.

Impact

Before the redesign, users often had to leave the booking flow to search for missing information about bike specifications, rental conditions, and riding difficulty.

The redesigned structure consolidated all key booking information into a single product page, reducing unnecessary navigation and creating a more predictable booking experience.

The project introduced:

  • a clearer information hierarchy,

  • reusable product page patterns,

  • improved accessibility principles,

  • modular CMS-ready sections,

  • and a more scalable structure for future listings.

The close collaboration between design and development also reduced implementation ambiguity and improved consistency across responsive layouts.

From a UX perspective, the redesign reduced friction during decision-making and improved usability for less technical and older users.


Reflection

This project strengthened my understanding of conversion-focused UX design, accessibility, and mobile-first booking experiences.

It also highlighted the importance of clear information architecture and implementation-ready design systems in reducing friction during decision-making processes.

Through this redesign, I explored how thoughtful UX decisions and close collaboration with development can simplify complex user journeys while supporting scalable digital product experiences.

Impact

Before the redesign, users often had to leave the booking flow to search for missing information about bike specifications, rental conditions, and riding difficulty.

The redesigned structure consolidated all key booking information into a single product page, reducing unnecessary navigation and creating a more predictable booking experience.

The project introduced:

  • a clearer information hierarchy,

  • reusable product page patterns,

  • improved accessibility principles,

  • modular CMS-ready sections,

  • and a more scalable structure for future listings.

The close collaboration between design and development also reduced implementation ambiguity and improved consistency across responsive layouts.

From a UX perspective, the redesign reduced friction during decision-making and improved usability for less technical and older users.


Reflection

This project strengthened my understanding of conversion-focused UX design, accessibility, and mobile-first booking experiences.

It also highlighted the importance of clear information architecture and implementation-ready design systems in reducing friction during decision-making processes.

Through this redesign, I explored how thoughtful UX decisions and close collaboration with development can simplify complex user journeys while supporting scalable digital product experiences.

Create a free website with Framer, the website builder loved by startups, designers and agencies.