Back to projects
Might consider desktop?
While mobile is convenient, for the best experience, you may want to check this out on your desktop.

sharing mobility Price checker

Project overview

My Role

This web app is aimed to navigate users through the jungle of sharing mobility providers, uber and cabs to find the cheapest and fastest way from A to B.
• Ideation
• Design
• Development

Short summary

I developed a dynamic web application that empowers users to find the most cost-effective ride options for their travel needs. Leveraging modern technologies and APIs, I designed an intuitive interface for comparing prices from various ride-sharing services. The application helps users make informed decisions by displaying real-time ride options and estimated costs for different modes of transportation.
B2C Webapp
Transportation
Strategy
Research
Development
Deployment

| Situation

It was a late afternoon. I wanted to meet some friends in the other part of Berlin. As I am member of multiple sharing mobility services like weshare, sharenow, miles, felyx, emmy and so on, I checked which of those rides would be the cheapest and fastest for this specific route.
It was a constant switching between apps, calculating the costs by time needed depending on the traffic. There had to be a simpler way.

The challenge:

Create a web app from zero to one, that displays the cheapest and fastest ride for any route.

| Research

There were a few services at that time that offered basic functionalities but lacked diversity. So for example the app "yelbi", which at that time only offered 2 carsharing services and only in Berlin.

I decided to check, if there was a market need. Using google forms, I conducted some in-person mini-interviews. Additionally I sent the form around in some facebook-groups and to friends to get as many insights as possible.

Two insights emerged: existing user demand and the inclusion of non-self-driving options like Uber and cabs.

| Approach

Design: Sketching out functionalities

Based on the key findings I crafted a minimalist and user-friendly design, centering around familiar mental models and presenting only essential information in each context.

Start page

Embarking on a journey of iterative refinement, the startpage evolved through rigorous testing with a small audience, transitioning from displaying brands to highlighting types of transportation and integrating a location-finder to elevate user experience.

Result page

Crafting the result page was a process of uncovering user priorities, encompassing essential details such as transportation types, ride duration and the most affordable and swiftest options.

Development: Bringing the design to life

After having a understanding of what the service should look like, it was time to actually make the service work.

Figuering out the tech stack

Frontend
Backend
API & 
Deployment
HTML, CSS, Bootstrap, and JavaScript for crafting an interactive and visually appealing user experience.
Python and Flask for building robust backend routes and handling API interactions.
HERE API for geolocation and routing and Heroku to successfully deploying the application for public access.

Frontend

The frontend was crafted using HTML, CSS, and Bootstrap for a responsive design that works seamlessly across devices. JavaScript was employed to create interactive features such as autocompletion for location inputs and handling checkboxes for ride options.

Backend

On the backend, the Flask framework was used to create routes that handle user input, communicate with APIs, and render dynamic templates. I designed utility functions to work with geolocation data and the HERE API, allowing users to find the best routes and estimate prices.

Challenges along the way

Delving into the development, several challenges surfaced that demanded resolution.
HERE API Integration
One of the significant challenges was integrating the HERE API effectively. It required handling API requests and parsing responses to provide users with accurate geolocation suggestions and real-time route information.
Buttons, icons, navigation controller and many more...
Handling API responses and real time calculations
Input: Users provide starting and ending locations for their trips, along with preferences like bike or car travel and ride-sharing options.
‍
‍Data Processing: The app uses HERE Maps to convert addresses into exact coordinates, ensuring accurate route planning.
‍
‍Calculations: Based on the calculated travel time and distance from HERE, the app then estimates costs based on user preferences and quantities.
‍
‍Results: Users are shown the best routes, time, distance, and cost estimates for their trips.
Deployment
Configuring Heroku deployment required handling dependencies, environment variables, and ensuring the application was stable and secure in a production environment.

| Conclusion

The ride price comparison web application empowers users to make informed travel decisions based on cost-effective ride options. The integration of interactive features, geolocation suggestions, and real-time pricing estimation enhances user experience. The journey of building this application involved overcoming challenges related to API integration and deployment, resulting in these keyfeatures:
Dynamic pricing estimation for selected rides based on distance and real-time traffic.
Autocompletion with real-time geolocation suggestions & Checkbox-based selection of ride options.
Interactive map display of routes with start and end markers.

•  Next Case Study

gearo.de - onboarding experience

Boosting the transactions by introducing an onboarding experience.

FiTS - Design System

Redesign and enhancing the efficiency of designing, testing & coding

Back to projects