Rio — Design System for Electric Scooters

Meet the new Rio.

Rio is a completely ready for development electric scooter/bike sharing project. It can be used for other renting projects by the way. Renting and sharing projects have changed the way people move in cities. We designed Rio with the data that we collect from other major apps and benchmarks. We defined and tried to solve the pain points for these type of projects with brand new interface.

It contains 45 well designed UI screen and 20+ components with Figma variants. Color, text and effect styles all defined well and used in the project. Also Rio uses 8px grid system.

Prototyping is an important point for understand the userflow. We prepared prototyping in Rio and you can tour in the project via just click the play button in Figma.

(Demo images are not included in the design file)

List of Screens

Splash screen
Login
Login / Phone number
Login / Phone number [Filled]
Login / Verify phone number
Login / Verify phone number [Resend disabled]
Login / Apple ID
Home / First ride
Home / First ride [Setup]
Home / First ride [Setup Verified]
Home
Home / Zoomed number
Home / Vehicle selected
Main menu
Start with QR
Start with code
Reservation [Modal]
Ring [Modal]
Unlocking [Modal]
Start riding [Modal]
Reserve in progress
Ride in progress
Ride is paused
Lock the vehicle
Take a shot
Complete ride
Ride history
Ride detail
Payments
Payments [Full]
Payments / Wallet balance
Payments / Custom wallet balance
Payments / Custom amount [Modal]
Payments / Custom amount [Modal / Filled]
Payments / Add credit card
Payments / Add credit card [Filled]
Payments / Add coupon code [Filled]
Invite
Gift
Processing modal
Settings
Settings / Profile
Settings / Profile [Full]
Change language
User agreement

Credits

Font: Be Vietnam – https://www.fontsquirrel.com/fonts/be-vietnam
Icons: Flaticon free – http://flaticon.com
Images: There is only placeholder images in design file