M.Path

Search Migros products and add the to your shopping list
Let M.Path show you the best route to your groceries
Get recommendations for unsustainable products or see detailed information about the product
Find your way to the checkout
Finish your grocery shopping
Pixel-Model for the Store

Inspiration

Do you kow the feeling of stumbling through a store in search of this one type of product you just can't seem to find? I think most of us have had this experience... However, once you find it, the questions continue.

Furthermore, a question that continues to raise in importance is the question about sustainability... How does the product I am about to buy impact our environment? And is there a better alternative?

To help answer those questions and to playfully notch people towards a more environmentally conscious shopping behaviour, we built M.Path.

What it does

M.Path is a Mobile App designed to assist you during your shopping routine. Not only does M.Path show the user the most efficient way through a hypothetical Migros store... It also assists in finding a path forward into a more sustainable future by using the data connected to the Migros' own M-Check label. By providing the user with information about emissions and animal-welfare as well as potential more environmentally-friendly alternatives... Right then and there! In the very moment the customer takes his product off of the shelf.

How we built it

M.Path is a Mobile App, optimized for the usage on Mobile Platforms like Android and iOS, yet builds upon the leading Web Framework Angular.

Providing our frontend with the needed data, we find our Backend, a Spring-Boot REST Application written Kotlin. The data, which was provided by Migros, is stored in a MongoDB database to allow fast and uncomplicated access.

Using a highly interactive user-interface in bright colors combined with design elements that might remind you of old video-games, we are trying to keep the user engaged whilst providing the data he needs.

Modeling the store

In order to have an easy to change - easy to integrate - store model we decided to use a color coded bitmap image. Where colors represent things like shelves, product-categories or checkouts. The model is attached to this post.

Challenges we ran into

Technical

One of the challenges we faced was that no one in our team had prior experience in working with non-relational databases, like MongoDB. This meant that there had been quite a steep learning curve right at the start of the project.

Product Location Data

We knew getting into this challenge that we would not be provided with datasets concerning the location of products inside of stores. Therefore, we decided to build our own hypothetical store model to showcase our idea. This however added some more work to the little time we had from the beginning.

Accomplishments and learnings

Having said that, we did never use non-relational databases beforehand. This was actually part of the reason why we choose this challenge. Struggling with, learning, and eventually becoming proficient in a new technology is an interesting and rewarding journey to go through.

What's next for M.Path

To further improve M.Path (or however spin-offs from this idea might be called) the following things might be worth considering:

If possible, connect it to real product location data or a more realistic model
Instead of depending on user input, check the receipt after the client is done
Improve user binding utilizing gamification

Gamification ideas

Sustainable products grant you:

Green-Coins? (In app gamification currency)
Cumulus multiplier?
Faster sticker collection during promotions

Gamification

Achievements

Simple

Choosing a top tier product in regard to animal welfare n times
Choosing a top tier product in regard to emission n times
Switching to a product that is better in regard to emissions n times
Saving n amount of co2 by selecting a different product Where N gets increasingly bigger based on the users "experience" (or wealth in Geen-Coins)