UX/UI Design • Mobile App

Outdoor Kiosk Experience

Optimizing the bike renting process at the kiosk

Client

PBSC Solutions

Duration

3 Months

My Role

Lead UX Designer

Flow Analysis User Flows Wireframes Prototyping
Second Screen Experience App

Project Overview

The city bike share solution provider PBSC Solutions approached us to redesign their outdoor kiosk experience to make bike rentals more accessible and efficient for urban commuters. The goal was to create an intuitive interface that would streamline the rental process while accommodating users of all technical abilities.

The challenge was to design a system that could handle complex transactions and user verification while maintaining simplicity and speed of use, especially during peak hours and varying weather conditions.

Objectives

  • Reduce rental transaction time to under 1 minute
  • Improve user confidence through clear visual feedback
  • Simplify the bike selection and payment process
  • Enhance accessibility for users of all technical abilities

Target Audience

  • Urban commuters looking for quick and convenient transportation
  • Tourists exploring the city on bikes
  • Regular cyclists who need occasional bike access
  • First-time users of bike-sharing services

Key Challenges

  • Weather conditions can affect screen readability and interactivity
  • Old and slow legacy system
  • Complex payment and verification process
  • High-traffic usage during peak hours

Design Process

User Flow Analysis

Existing Flow

Welcome Screen
Bike Selection
Payment Screen
Pain Point 1

Lack of transparency in pricing and process steps, causing uncertainty and hesitation among users

Pain Point 2

Poor communication during waiting periods, leaving users unsure about system status and next steps

Pain Point 3

Inefficient screen navigation requiring users to go through unnecessary steps to complete their rental

Optimized Flow

New User Flow
Optimize for speed
  • • Rearrange or merge screens
  • • Group options logically
  • • Transform a screen into a button
  • • Ensure unambiguous copy for effective communication
  • • Harness the power of visuals, acknowledging that an image speaks volumes
Be transparent
  • • Display the price as soon as possible
  • • Explain what the machine does in the background, particularly during waiting times
  • • Provide reassurance regarding the necessity of personal information and credit card details
  • • Incorporate a progress tracker to visually indicate the user's advancement through the process
Anticipate user needs
  • • Adjust on-screen choices according to the linked credit card account
  • • Provide a solution following an error message
  • • Keep users informed or entertained during wait times, such as displaying the upcoming weather
  • • Clearly display the end date and time of the plan

Wireframes

Wireframes

Early wireframes exploring different navigation patterns and content organization

User Flow

User flow for the synchronization and interactive features during viewing

Payment Flow Wireframes

Payment flow wireframes showing streamlined transaction process

Information Architecture

Information architecture diagram mapping the complete rental journey

Key UX Decisions

Limited Options

Simplified decision-making by displaying no more than 5 options per step, reducing cognitive load and improving completion rates.

User Control

Empowered users with clear navigation controls, easy access to previous steps, and the ability to modify choices at any point.

System Transparency

Provided clear feedback about system processes, including card verification, bike unlocking status, and estimated wait times.

The Solution

Our final design delivers a streamlined bike rental experience that reduces transaction time while maintaining clarity and user confidence. The kiosk interface guides users through each step with clear visual cues and real-time feedback, making the rental process quick and intuitive even for first-time users.

Final Mockups

Home Screen

Home Screen

Sync Screen

Step 1 : Select number of bikes

Prediction Game

Step 2 : Select trip duration

Character Profile

Step 3 : Insert card

Outcomes & Impact

The redesigned kiosk interface has significantly improved the rental experience, with users completing transactions in just 42 seconds on average. The streamlined process and intuitive design have resulted in a remarkable 92% user satisfaction rate, demonstrating the success of our user-centered approach.

42 sec

Average rental completion time

92%

User satisfaction rate