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.
← All projects
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.
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.
Make comparison easy
For Kasun, show vehicle options, example prices and range clearly before starting a rental.
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
Selected a user-friendly interface as an essential rental app feature (9 selections shown).
Mobile integration
Selected seamless mobile integration as an essential feature (7 selections shown).
Affordable pricing
Selected affordable pricing as an essential feature (6 selections shown).
Daily commuting
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.
Understand the service
Users need to know which vehicle is available and what its displayed price and range mean.
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 graphics04 / JOURNEY
Plan the journey before styling.
The proposed journey follows five tasks: locate, compare, prepare, unlock and manage the ride.
Find and compare
A map provides location context. A vehicle list presents names, displayed range and example prices so users can compare options.
Prepare and unlock
A payment concept and vehicle detail screen lead to an Unlock action. The technical authorisation method remains to be validated.
Manage the active ride
Elapsed time and distance appear alongside Pause and End Ride controls.
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.
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.
Location and selection
Maps help users locate an option, while separate vehicle cards support comparison.
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
#6DBE0F
Pressed
#55A00B
#55A00B
Accent
#E8B109
#E8B109
Background
#10141C
#10141C
Surface
#1C212B
#1C212B
Raised surface
#2A303B
#2A303B
Dark palette shown. Semantic colour variables support Dark and Light modes.
TYPOGRAPHY VARIABLES
Type styles
Display / 32SF Pro Rounded — 40 px line height for primary information.
Heading / 22 & 17SF Pro Rounded — 28 and 22 px line heights for compact hierarchy.
Body / 15 & 13SF Pro — 22 and 18 px line heights for readable supporting content.
Button / 15SF Pro — 20 px line height for action labels.
Caption / 11SF 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.
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.
Design lesson
A compact display demands prioritisation. Each screen should make the immediate task and available action understandable.
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.
NEXT PROJECTBright Spark