Msmap — Sustainable lifestyle made easy

5 min readApr 20, 2021

This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (winter term 2020/21).

Abstract

How can we support small sustainable businesses in Münster and at the same time help the consumers to make better choices? How can we facilitate the transition to sustainable living for the citizens of Münster? With msmap we created a platform that not just lists all the sustainable stores in your area but works as a community where everyone can share their ideas about sustainable living. It consists of a map with landmarks of places, stores and community centers which have the aims to make the city and their citizens’ lives more sustainable. Additionally, the webpage has a content page with changing articles about sustainability and tips for a sustainable lifestyle.

Introduction

We all know that climate change and its impact is becoming more and more important. The impact of climate change on humans and animals can be devastating, therefore our team agreed that it is essential to live in a more sustainable way. Our aim was to reduce our environmental impact by making small changes in our daily lives. What is sustainable living? And how can we make more sustainable choices?

When walking through the city of our hearts — Münster — we noticed there are already a lot of stores that offer organic products and sustainable alternatives. But in the hustle and bustle of our everyday lives, we often looked past these small stores. We figured out it would be great to have all these shops gathered at one place. Therefore, we created msmap — a map that makes sustainable living easier by showing you sustainable alternatives with one click.

Methodology

Within our learning tracks we had a lot of input to use for the creation of our website.

In the User Experience track our main goal was to focus on our users and determine what is important to them. First, we created Personas of our potential users to understand their needs, wishes and pains better. It helped us to identify which information about stores and sustainable living are important to our users. It also gave us new inspiration and ideas for functions we wanted to integrate on our website. After we had an idea who our users are, we created user stories. Within these user stories we went through different scenarios and thought about the steps our users need to take to fulfill different tasks. This helped us to identify unclear parts of our website and gave us new ideas for buttons, user feedback and the usability of our page.

Before coding our website, we designed wireframes in Figma to visualize our website. This helped us to think about different functionalities and the design of our pages. It also gave us the opportunity to try out different fonts, colors and designs within a few clicks, which was really handy.

When we started to code our website, we used the wireframes as an outline for our final page. Already having an outline of code provided by Figma gave us a rough estimate on the structure of our code and how some parts needed to look to transform our design into an actual website. However, what is coding without your best friend Google? Using commonly known or referred websites within the web development sphere such as bootstrap.com, stackoverflow.com or w3schools.com helped us overcome bugs and problems. We outlined a construct of our website and started to code bridges (classic href) to the included subpages.

For our content, which is similar to that of a sustainability blog with the exception of an integrated map showcasing the top sustainable spots in Münster, we mostly used simple headers, lists etc. The map was integrated via an iframe after being designed within google maps itself. This gave us the opportunity to have a seemingly integrated functioning map that had been customized before. While dividing this work within our web development team, we used github to simultaneously work on our code and then hosted our finished product on netlify to gain feedback from our UX designers. Our final action: PUSH TO GIT.

Results

To outline the impact of msmap we want to reference the sustainable development goals of the UN, where our TechLabs journey started. A sustainable lifestyle supports many of the UN development goals. Not only your personal health can be improved, but a sustainable lifestyle also reduces your carbon footprint and therefore lowers our negative impact on the environment msmap makes sustainable living easier. You can find many different stores and interesting locations all around Münster that allow you to make more sustainable choices. Additionally, we educate our users about the impact of their choices. To every store you can find information about what makes this place special and how seeking this location out can contribute to a more responsible consumption. If you want to learn more about a topic you can switch to our content site and read many articles about different aspects of sustainable living.

Msmap also helps to build sustainable communities by supporting sustainable, regional businesses and helping you to explore your neighborhood. A sustainable lifestyle can help to combat climate change and support a healthy life — so what are you waiting for to make a change?