# Cooter — E-bike Rental Smartwatch Experience > A smartwatch-based e-bike rental interaction and UX concept. Canonical case study: https://uditha.design/projects/cooter.html Created by Uditha Prabhasha Dharmarathna. This page summarises the published case study; claims about testing and outcomes are limited to those stated in the original. CASE STUDY 03 / E-bike rental · Smartwatch UX/UI ## A simpler ride, right from your wrist. Cooter — an e-bike rental app designed for a smartwatch. **Project:** Cooter **Platform:** Smartwatch app **Focus:** E-bike rental **Discipline:** UX/UI design PROJECT AT A GLANCE ### A smaller screen for a familiar journey. Cooter is a smartwatch rental concept designed around the daily routines of university students and office workers in Colombo. It explores how users could locate a nearby vehicle, compare rental options and manage a ride through an Apple Watch interface. **DESIGN CHALLENGE** Make a multi-step rental experience understandable on a compact display, with clear actions and useful ride information. **PROJECT FOCUS** Research synthesis, personas, empathy mapping, paper wireframes and high-fidelity watch screens. 02 / PERSONAS ### Two people. Different priorities. Two personas from the original case study connect everyday travel needs to interface decisions. 01 #### Kasun Perera · Student 21 years old · Nugegoda. Travels between classes, libraries and extracurricular activities. A limited transport budget and a large campus make affordable, flexible options important. 02 #### Chamodi Rabukwella · HR Executive 35 years old · Maharagama. Balances daily office travel with work and personal commitments. Commute delays and competing responsibilities make speed and reliability priorities. 01 #### Make comparison easy For Kasun, show vehicle options, example prices and range clearly before starting a rental. 02 #### Keep the next action clear For Chamodi, prioritise nearby options and visible ride status, with a direct path to the next rental action. 03 / RESEARCH ### What the research revealed. The original case study describes an online survey with open and closed questions exploring commuting habits, desired features, motivations and pain points. Personas and an empathy map organise those needs into a design direction. #### User-friendly interface **81.8%** Selected a user-friendly interface as an essential rental app feature (9 selections shown). #### Mobile integration **63.6%** Selected seamless mobile integration as an essential feature (7 selections shown). #### Affordable pricing **54.5%** Selected affordable pricing as an essential feature (6 selections shown). #### Daily commuting **36.4%** Reported commuting within the city every day in the original chart. The research emphasises ease of use, technology integration and affordability. Those themes informed a straightforward rental flow, relevant vehicle details and recognisable actions. 01 #### Understand the service Users need to know which vehicle is available and what its displayed price and range mean. 02 #### Support confidence Clear ride status and feedback are important when moving from selection to unlocking and riding. Source note: percentages are reproduced from the original survey charts. The charts label 37 responses, while the displayed feature counts and percentages imply 11; the sample total needs confirmation. Feature questions allowed up to three selections. [View original survey graphics](https://uditha.design/assets/cooter/survey.png) 04 / JOURNEY ### Plan the journey before styling. The proposed journey follows five tasks: locate, compare, prepare, unlock and manage the ride. 01 #### Find and compare A map provides location context. A vehicle list presents names, displayed range and example prices so users can compare options. 02 #### Prepare and unlock A payment concept and vehicle detail screen lead to an Unlock action. The technical authorisation method remains to be validated. 03 #### Manage the active ride Elapsed time and distance appear alongside Pause and End Ride controls. 04 #### Close the journey A summary state brings the ride to a clear conclusion. This sequence interprets the displayed screens; a functioning vehicle integration is not established in the supplied material. 05 / WIREFRAMES ### Explore the flow on paper. Paper wireframes explore map, selection and rental states before the interface receives its visual treatment. [![Original Cooter paper wireframes](https://uditha.design/assets/cooter/wireframes.webp)](https://uditha.design/assets/cooter/wireframes.webp) 06 / INTERFACE ### Make each watch screen count. The interface uses a dark background, compact vehicle cards and prominent green actions. Each state focuses on the information needed for the next decision. [![Cooter location, selection, payment, unlock, ride controls and summary watch screens](https://uditha.design/assets/cooter/user-interface.webp)](https://uditha.design/assets/cooter/user-interface.webp) 01 #### Location and selection Maps help users locate an option, while separate vehicle cards support comparison. 02 #### Ride controls at a glance Unlocking, active ride management and the summary each receive their own focused state. The documented typography uses SF Pro and SF Pro Rounded. The original product visuals are preserved within the portfolio’s existing presentation. 07 / DESIGN SYSTEM ### A consistent language for a compact screen. I created a small design system to bring consistency to Cooter’s watch experience. Shared foundations and reusable component variants connect vehicle selection, unlocking and ride management. COLOUR VARIABLES #### Semantic palette examples Brand #6DBE0F Pressed #55A00B Accent #E8B109 Background #10141C Surface #1C212B Raised surface #2A303B Dark palette shown. Semantic colour variables support Dark and Light modes. TYPOGRAPHY VARIABLES #### Type styles **Display / 32**SF Pro Rounded — 40 px line height for primary information. **Heading / 22 & 17**SF Pro Rounded — 28 and 22 px line heights for compact hierarchy. **Body / 15 & 13**SF Pro — 22 and 18 px line heights for readable supporting content. **Button / 15**SF Pro — 20 px line height for action labels. **Caption / 11**SF Pro — 14 px line height for compact metadata. CORE COMPONENTS #### Reusable UI building blocks ##### Button Primary, Secondary and Outline; Default and Compact sizes; Default, Pressed and Disabled states. ##### Scooter card Default and Compact variants group vehicle, range and price. An outline identifies selection. ##### Price & battery Brand and Muted price tags; High, Medium and Low battery indicators. ##### Vehicle avatar Orange motor-scooter and blue kick-scooter variants identify the available vehicle types. [Open design system in Figma](https://www.figma.com/design/T8Xz3XXPI4DZsXH3TVotjs/COOTER?node-id=3009-20) 40 variables across Primitives, Color, Spacing and Radius collections. Spacing: 4, 8, 12, 16, 24 and 32 px. Radius: 6, 10 and 16 px, plus full-round. 08 / OUTCOMES ### What the concept demonstrates. Cooter brings the rental journey into a tangible set of smartwatch screens supported by research material, personas, empathy mapping and paper wireframes. 01 #### Design lesson A compact display demands prioritisation. Each screen should make the immediate task and available action understandable. 02 #### Product lesson A smooth interface depends on reliable availability, range, pricing and ride status information. #### What I would test next Ask participants to find a vehicle, explain its price and range, start a rental, pause it and end it. Observe comprehension, completion, errors and assistance needed. Check legibility, touch targets and confirmation feedback on an actual watch, then test unavailable vehicles and failed unlock or payment states. **Concept-stage outcome** · The supplied material does not document measured usability improvements or launch results.