BEMRIX / MOBILE APP DEVELOPMENT
Nocturne.
Move beautifully.
A map-first ride-booking prototype that turns a destination into a complete, considered journey.
Watch the experience ↓Self-initiated portfolio project · Flutter- Our role
- UI/UX, Flutter development & motion
- Experience
- Ride selection to trip receipt
- Visual direction
- Charcoal surfaces. Mint accents.
- Project type
- Working interactive prototype
THE IDEA
A calmer way
to get moving.
Booking a ride involves a sequence of small decisions: where to go, which vehicle to choose, where to meet the driver and when the trip is complete. The design goal was to make each step clear while keeping the city in view.
BEMRIX built Nocturne around a fullscreen map and floating controls. A glass-style destination bar and snapping bottom sheet keep the interaction focused, while a consistent mint accent identifies the route, current selection and primary action.
THE APP IN MOTION
One journey.
Every state connected.
A 39-second walkthrough captured on a physical Android phone. It shows destination selection, driver matching, pickup, the simulated trip and a rated receipt.
Read the walkthrough
The user opens the destination chooser and selects Ferry Building. After an edit to shorten ride selection, the app matches a Premium ride with Alex. The driver approaches, and the app waits for “I’m onboard” before starting the trip. The car travels along the route. A $26.80 demo receipt appears, followed by a five-star rating. No real ride or payment occurs.
SEVEN MOMENTS / ONE EXPERIENCE
Designed around
the next step.
Real screen captures from the same phone recording, with system bars cropped for presentation. Open any image for a closer look.
Choose your ride.
Compare Standard, Premium and XL with visible prices and pickup estimates. The booking action stays within reach.
A place in mind.
Pick one of two demo destinations. The estimated trip duration and fare update together.
Know what happens next.
A dedicated matching state gives the request a clear beginning and offers cancellation before pickup.
Meet your driver.
Driver identity, vehicle details and arrival progress sit together while a simulated car moves toward pickup.
Ready when you are.
The app waits for an explicit onboard confirmation before beginning the journey.
Enjoy the city.
A moving marker and progress indicator follow the selected route without leaving the map screen.
Beautifully arrived.
A demo receipt, star rating and repeat-booking action bring the journey to a clear finish.
DESIGN THAT SUPPORTS THE JOURNEY
A booking action that stays visible.
The primary button sits outside the scrolling ride content. Users can explore the sheet and still take the next step.
Motion with a purpose.
Ride selection reveals the route and adjusts the map camera. Driver movement then communicates arrival and trip progress.
Feedback beyond the happy path.
Map loading includes a timeout and retry. Cancelling before pickup stops the simulation, and users can begin another journey.
BEHIND THE EXPERIENCE
Built in Flutter.
Structured around states.
The interface uses Flutter, flutter_map with OpenStreetMap tiles, and flutter_animate. A custom JSON color matrix gives the raster map its dark palette, while custom markers and animated polylines connect the floating interface to the city.
A dedicated ride-session controller manages choosing, matching, arrival, pickup, travel and completion. Driver positions interpolate by route distance so different segment lengths produce consistent movement. Progress updates rebuild the driver layer and trip panel; camera framing responds to journey changes.
- Five automated tests cover journey transitions, cancellation, rebooking, route interpolation and small-phone interactions.
- Flutter analysis and the web build passed during development.
- The walkthrough was recorded from the app on a physical Android phone.
PROJECT SCOPE
A working prototype with a clear boundary.
Nocturne is a self-initiated BEMRIX portfolio project, not a live transport service. Destinations, routes, driver identity, arrival estimates, fares and payments are simulated. Search, live routing, location tracking, dispatch and payment providers are not connected. Android footage demonstrates the current experience; an iOS release is not claimed.
Device mockups are AI-assisted presentation artwork and may differ in small details from the app. The video and seven screen captures are taken from the working prototype. No client results or user-research outcomes are implied.
YOUR NEXT PRODUCT
Have an app idea?
Let’s shape the first journey.
Start with the people using it, the task they need to complete and the features that make a useful first release.