Visualizing Motorcycle Motion
Tags: showdev, blog, ux, startup
Published: 2020-01-02 03:23:35

---
title: Visualizing Motorcycle Motion
published: true
description: Motorcycles, love em or hate em you probably have an opinion. I'm in the love em camp. 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/oj0qetye95k72zt4tx8e.jpg
tags: #showdev, #blog, #ux, #startup
---


Motorcycles, love em or hate em you probably have an opinion. I'm in the love em camp. Like most people who ride for fun, I think the best roads are the curvy ones. Every turn, hill, valley or canyon presents itself as a series of challenges. 

Each turn is putting your life in the mercy of gravity and traction, as you lean over centrifugal force keeps you from crashing as long as you have traction.

Unlike a car there is no room for error. You can't bounce off the guard rail in an attempt to "debug" your driving style, or to launch your new fender design. Every movement counts and even what would be a minor threat in a car is more likely to be deadly. 

With great risk comes great reward, riding to the mountains is what forces me to confront my fears and abandon them in the wind. The scenery is epic, the air is fresher, even the bugs splatter a little better across the front of my bike. I can't help but to feel very alive.

<img src="https://thepracticaldev.s3.amazonaws.com/i/fmeodea6el4weev36dlf.jpg" />

It’s hard not to appreciate the moment when the last one was filled with reacting to a semi truck or minivan turning in front of you 😂 a misjudged corner or a 2x4 flying out of a truck at your face going 80mph could've ended your life and getting home is a reminder of the most precious things. I get home and my problems that felt overwhelming before I left feel far less significant. 

It doesn't feel like being in a car because everything you experience is much more raw. You smell the rivers, you feel the bugs hit you, the pot holes begin to hurt after a few hours, you're part of it not just traveling along complaining about bumps making you spill your food. If it rains, you get wet. If it's hot you sweat. If it's cold you hug the engine for warmth. If there's lightning or a freak hail storm you can crash and die. Even a strong enough gust of wind over the top of a 14,000 ft mountain will send you off the side without a guardrail. 

There's something truly epic about it because when you get home it's after an adventure and just arriving home is reason to be happy. In a car it's not quite the same, especially a modern luxury car that can cost more than a house in some places. 

The idea of turning those movements and that adventure into numbers saved into a database in an app? It captivated me. The result is an app I made called <a href="https://motorift.com">MOTOrift.com</a>

It's really two Android apps and a web app. 

One app records data, IMU and GPS data, the others analyze it and let you view it back. You can see stats about your ride like 0-60 times or 1/8 mile times. 

You can select any corner or series of corners and see your gravity or IMU data from there. Data exports to CSV or KML to put in videos with Adobe product or on Google Earth. It has heatmaps, analysis, graphs, and weather data to round off the current beta version. 

The goal is to Visualize Motorcycle Motion.

I should say... it's a work in progress but it's also been "beta launched" for a year now. The project originally started as RideData.net with an Arduino Bluetooth project back in 2015. About a year after I launched the first version, I dropped support for it (2016) and pulled the app from the play store. 

It was a cool idea, it just wasn't good enough execution tho. Motorsports and motorcycle telemetry has been around for a few decades now so it isn’t like it’s a completely new idea. 

I needed to rebuild everything and after a year of planning and developing another app I started in on the new version of what would become MOTOrift in late 2017. It took another year to launch to the beta version in October 2018 and it's been in beta for a year. 

That's where I'm at now. In the next few months I plan to add more features, redesign the web app and launch the full version as a freemium style product. 

So... what does it look like?

<img src="https://thepracticaldev.s3.amazonaws.com/i/likikpqnp6bd9vesdj6d.png" width="50%" alt="MOTOrift app map view" />

#That's a live map view

I tried to make it interesting, I didn’t want to do another material design outright. I regret it occasionally but most of the time I’m glad I went the route I did. I did the graphics with Adobe[]. The button icons are from flaticons.net


You can choose from a variety of theme styles for day or night mode.

<img src="https://thepracticaldev.s3.amazonaws.com/i/8pdg9bffeqy2yam4lc70.png" width="50%" alt="MOTOrift app main screen" />

<img src="https://thepracticaldev.s3.amazonaws.com/i/e43uo7ihdp9in1y73jop.png" width="50%" alt="MOTOrift app graph screen" />

<img src="https://thepracticaldev.s3.amazonaws.com/i/6tstejunz3mxgthu03f5.png" width="50%" alt="MOTOrift app graph screen"/>

Maps are a big part of the app, I use mapbox and there are 20+ map styles to choose from. Some were the standard mapbox styles others ones I made or customized. There's the live map and maps in the RideView companion app, a heatmap with more details and a point map you can select from.

<img src="https://thepracticaldev.s3.amazonaws.com/i/dusbnkjzhjpyf9btmxzv.png" width="50%" alt="MOTOrift app map screen IMU heat map" />

##That's a heat map you can select between data sets

<img src="https://thepracticaldev.s3.amazonaws.com/i/hz76suxfk0wwdqqo9g99.png" width="50%" alt="MOTOrift app map screen point map" />

On the point map you can select two points and dig into the data between them.

I still have some major features to develop but it’s getting closer to being “done” or at least what I’ll consider to be a full version. 

I tried to take some risks designing it and hopefully once it’s further along it’ll be more worth it 🤨 sometimes I consider redesigning it as a material design but I also like what I’m making. 

I tried to make some digital art for it to make it look interesting. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/re2vly6132gayfvpexsc.png" width="50%" />

<img src="https://thepracticaldev.s3.amazonaws.com/i/7ei6oi222dwhmpkfr6x9.png" width="50%" />

<img src="https://thepracticaldev.s3.amazonaws.com/i/71n18zxtvwr4vg1eb1f2.png" width="50%" />

Keyword is try 😂 I'd love to hire a designer to make some art for it one day but for now I just gotta do the best I can with the (lack of) design skills I have.

This is my attempt at visualizing motorcycle motion, tell me what you think? It works with high performance vehicles of all kinds too not just motorcycles (it's just a GPS+IMU data logger). If you'd like to try it, <a href="https://motorift.com">MOTOrift.com</a> will get you started. 

You can read my intro here {link once published}, it pretty much says the same thing as this (not worth your time tbh 😂).

For the new year, I'm launching a new version of the marketing landing page (1/1/20!) and I'm starting a new blog. After that I'm planning a new version of the web app.  

I'm writing a case study about my most recent web redesign that'll probably be out in the next few days or so. I'm trying to ramp up the website so it's ready for the next round of app updates and eventually premium features. 

Well, this is me. Tell me what you're working on or hit follow I'll follow you back 👍