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

Item Content

.fig file that contains documentation, color styles, text styles, components with variants
.pdf documentation file

A propos

Développeur : pikselmatik