“Bottom Up City” — Improve & share public services for efficient mobility and sustainability

This project was carried out as part of the TechLabs “Digital Shaper Program” in Dortmund (summer term 2021).

In a nutshell:

We created a web app that helps people find services to be mobile in an environmentally friendly way, like bike-sharing services or electric charging stations, additionally co-working spaces or other information that might be interesting for people to improve their lives and mobility around and in a city.

Idea: People do not want to move between different areas within a city; they search for solutions nearby. As some people prefer to use a map to find the spots they are looking for and some others prefer to have these spots on a list, we implemented both types (map and list) and presented these on the web app. We aimed at designing a web app that can be used on a desktop computer and on a mobile device.

Introduction:

Smart mobility is a topic that concerns many areas and activities of our daily lives. The struggles of climate change are real and smart mobility can contribute to achieving the goals needed to fight it. Three of the biggest goals to keep climate change at the lowest level possible are: the reduction of human-produced emissions, like CO2, noise, and noxious particles; less consumption of energy, resources, and space; and last but not least, the creation of a new mindset for the people, where they are able to find a positive feeling about mobility chains, on-demand systems and shared use of things, services and mobility, which is designed for sufficiency and sustainability.

Cities can be seen as a mainstay of life — there we find thousand of people living, studying, working, and — moving. Living in a city often also means that there are many and different kinds of offerings to commute from point “a” to point “b”. There are bike-sharing stations, e-scooters, trams, and cars, of course.

But how do we motivate more people to change their behavior of moving through the city? To achieve this, alternatives need to be accessed as easily and comfortably as using a car. Or even easier.

With our project, we tried to simplify the way of using public resources for moving, working, and meeting within a city. Our web app intends to collect all important data about public transfer methods and offerings and data about public working spaces and to provide these data in an easy and user-centric way.

Methodology:

As the first step of our project, we worked on the design of our product. We decided to create a web app that can be used in a browser and on mobile devices.

For the design of our web app, we got inspired by current design trends such as those employed by Google Maps and OpenStreetMaps. We use warm colors and smooth curves, which our users know from different apps by Google and Facebook, to arouse confidence. We also looked for inspiration on websites like yelp, where maps and information about certain topics are displayed together. We then decided on the layouts for the web version and the mobile version of the website. To have better usability, we created categories for each branch of information (bike-sharing stations, charging stations, and shared venues). We created some drafts and decided together on which one had the best usability for the user.

To develop the front end of our web app, we used technologies like react.js, a framework that permits our website to render quickly and reliably. It allows the development of a website or app that is compatible with most mainstream internet browsers and that, at the same time, is responsive. React.js is also one of the main frameworks being used by most developers in the industry at present, and therefore we wanted to gain practical experience using the tools that are relevant in the branch.

To write the code, we used the Visual Studio Code editor, and to create the map and map markers, we used leaflet.js. We implemented the API of OpenStreetMap to overpass their data to our web app. Some other web developers also used the data of OpenStreetMap to leaflet.js before and provided the code on npmjs.com to make queries to OpenStreetMap’s overpass API. As written before, the web app already gives important information about the results. As there is more data and different information about the offered categories, more data could be implemented in the future.

We did not use a back end to feed data into the app, as we did not have a team member with the skills to take care of the tasks involved. To overcome this problem, we initially created a json file with a portion of the information that was big enough to feed the app. Later we implemented the overpass API, which gave us access to more information available at overpass-turbo.eu.

To collect all the code we wrote during the project phase, we used the given GitHub repository.

Results:

The final solution of our project offers data to find bike-sharing stations, charging stations, and shared venues. We created a web app with a search bar, a map that displays all offers of bike-sharing stations, electric charging stations, and a list of these on a sidebar.

The first step to using our web app is the search bar: The user types in the place where she or he wants to see the results. With a click on a “search”-button, the map changes to the user-given place. As a next step, the user can decide between the three given kinds of data. To get the data on the map and in the list, the user clicks on the three buttons. After that, the map and the list show the data the user is searching for. The results are also given in a list because some people struggle with the handling of maps, so that also people who do not like to use maps or do not know how to read them can use our web app. Additionally, we provide all the information possible to deliver the best service possible, like the name and operator.

Image 1: Exeplary image of the web app.

With this web app, we created the first draft of a single point of all the data people need to move in a good and economical way. Our web app is easy to access and use.

In the future, the next steps could be to continue using different sources to have access to more offers of mobility categories such as carsharing, scooter-sharing, or even the public transportation systems. OpenStreetMap also gives, for example, data about the capability of bike parking stations, which could also be useful to improve environmentally-friendly mobility. Our web app could also be used to provide ratings and experience reports as much as photos of the given results.

There is also a possibility of gamification in our web app. Giving rating points to users when they use bicycles instead of cars might increase the use of the web app because it poses a way of economic competition and fun.

We could offer the web app as an open-source program so that everyone around the world could improve the web app and the data. Working with companies that offer e-scooters or shared bicycles or cars could improve the quality and amount of data available at the very beginning — because, with these companies, we would get the very original source instead of public data. To make the web app accessible for everyone, we should also focus on barriers that are given by the first version of the web app.

So as a long-term goal, we see an open-source program that offers every kind of data to support environmentally-friendly mobility.

GitHub repository:

Team Members:

Web Development:

UX-Design:

Team Mentors:

  • Lara Stahl, Project Manager TechLabs

Sources:

Disclaimer:

This project was carried out as an unpaid cooperation with the company bottom-up.city. This consisted of the support of the techies in terms of technical and thematic aspects.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store