“Running MS” — Collecting Münster’s most scenic running tracks for more variety in your running routine.
This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (Term 2020/01).
Abstract: Anyone who runs frequently knows the problem: You always run the same route that gets boring at some point. Therefore, our goal was to design and program a website where users can upload their favorite tracks in Münster and inspire other runners.
At first, we created a design prototype with Figma, later implementing it using HTML, CSS and Java Script. Our website has an upload function for new tracks, users can log in into their account and comment on existing tracks. A filter function in order to filter track criteria such as track length or the starting point is in progress.
The idea: Keeping the Running — hype alive.
Our TechLabs-semester started in the middle of the Covid-lockdown. Everybody was staying home and social activities were quite limited. Going to the gym and taking part in group fitness classes were not possible. As a result, many people started to work out at home. But besides home fitness there was another quite popular trend: Going for a run. It seemed like these days everybody was starting to run. Even people that usually did not run started and tracked their progress via Adidas Running or Strava.
In general, going for a run seems to be easy: Supposedly, all you need are sports clothes and running shoes. Nevertheless, our team identified another big question that might be an obstacle to a) start with running and b) build a habit and keep on running:
“Which route should I run? Is there a nice running route nearby?”
Many people do not know which route to run or are bored by always running the same track. Our team wanted to remove this barrier by collecting and displaying different running tracks in Muenster. Our goal was to motivate people to go for a run and to help regular runners to keep their motivation by suggesting interesting and diverse running tracks in Muenster.
Our methodology: Thinking like the user.
Our team consisted of three “soon-to-be” Web Developers, Helen, Max and Niklas and one aspiring UX-Designer: Chris. Before diving right into the project, we brainstormed how our final product should look like. Therefore, we used a Milestone-Template that was handed to us by the TechLabs-Journey-team. Together, we defined the vision of our project, the specific goal we wanted to achieve and the milestones that will bring us there. As a second step we defined tasks for each team member by using a Kanban board in Notion. We quickly realized that we should define features we want to offer to future users. As we considered ourselves part of the target group as well, we started by collecting features that ourselves would appreciate in the final product.
These were:
- Different tracks presented in an attractive way
- Having a good overview over the tracks
- Enabling the user to upload tracks (picture + text) in order to grow the collection of running tracks
- Being able to filter the running tracks by different criteria
- Having a rating system in place that would allow users to rate the different tracks
In addition, we collected “nice to have”-features that we could add once the main features have been implemented:
- Enabling uploads of gps-files that can be downloaded by users and used in their GPS-watches to follow tracks
- Routes for Bikes
In order to validate these features, Chris insisted on doing a survey among our friends. Therefore, we built a typeform which we forwarded and analyzed afterwards. Eventually, it was really helpful to get an outside perspective that helped us to evaluate whether the features we had in mind made sense. Our survey confirmed that the most essential feature was to give an overview over the listed tracks. Furthermore, we found out that the length of the track and the track’s underground (e.g. asphalt/concret, forest, …) were the most relevant filter criteria.
Thereafter, we quickly agreed on the main features we wanted to implement and started the main part of our work: Chris designed a prototype of our website in Figma and the Web Development-team started to build the web app with its core functions.
Our result and learnings: Starting small!
In the beginning our priority was to build the structure of our web app and to get a webpage up and running. For that, our learnings of the udemy course “The Web Developer Bootcamp”, that was part of our TechLabs track, were very helpful. We decided to set up our web app similar to the approach that was presented in the course.
We used HTML to program the basic framework, implemented functions with Java Script (upload tracks, log in, redirect to other subpages) and styled the web pages using CSS. Instead of making different files for the HTML- and Java Script-code, we used EJS-files that allowed us to embed Java Script into HTML-files.
Soon our first milestones were achieved: A running website hosted via Heroku and two core functions implemented. Now users were able to sign in and upload running tracks by themselves.
Thereafter, the Web Dev-team tried to incorporate the second essential feature of our web app: The filter function for our tracks. What seemed easy at first glance was not easy to implement. Setting up the basic HTML-structure for a drop-down menu was done quickly, however, coding the underlying JS-function, saving the user’s selection to a variable and getting frontend and backend to communicate correctly turned out to be difficult. After we had been experimenting with this function for quite a long time the remaining project time was getting short. Therefore, we decided to focus on the frontend instead, i.e. to implement Chris’ beautifully designed prototype. In the end, we were able to redesign our landing page.
Our impact: Personal growth.
Even though we were not able to deliver a ready- and easy-to-use app that inspires more people to run, we learned a lot about ourselves during our project. Especially Max, our lead developer, got hooked on web development: He is doing an internship as a developer at the moment and decided to start studying business informatics in October. Chris, our Design-Guru, learned a lot about UX-design which now also helps him at his current job at the BASF. Our tech-girl Helen was able to deepen her frontend-skills and is now even more motivated to further develop her coding skills. Niklas, who is also part of the Techlabs-Management-team, learned a lot about efficient time management and setting priorities.
Ultimately, we all agree that the project phase was the best part of our TechLabs-Semester. Especially with regard to the 100% remote semester, it was nice to work closely with other participants and to get to know other techies. We all really enjoyed to also meet offline as a group, which made it easier for us to work on the project.
Thanks to TechLabs and especially to the Journey-team that kept us motivated and engaged even without meeting in person!
Take a look what we have done so far:
Our survey
Our design prototype
Our website
The Team:
Christian Schimetschka
- UX-Design: User-Survey, Personas & Wireframes, Prototype
Max Heimsath
- Web Development
- Lead Developer, Backend
Helen Keiper
- Frontend, implementing the new design to the landing page
Niklas Steinfurth
- Frontend-support, blog article
Mentor:
Jannik Weichert
