Motion X GPS Redesign
Overview of the Project
This was my final project for ‘Advanced Interaction Design’ at the University of Maryland. The instructions for the assignment were broad; the class was simply asked to redesign any app of their choosing, and to create a case study documenting that process.
Motion X is a GPS app that I have personal experience using. Though its utility is undeniable, its interface can make it difficult to use at times, which is why I chose it for this project.
This case study is pretty long, so please feel free to skip to the ‘Redesign’ section!
UX Methods Used:
User Research
Ideation
Wireframing
Prototyping
Tools Used:
Figma
Concepts
Timeline:
4-weeks
Solution:
My Experience with Motion-X
I began using Motion-X in 2017. A friend of mine turned me on to the app as a cheaper alternative to a standalone GPS device. I had just bought my first dual-sport motorcycle and was a bit strapped for cash but eager to hit the dirt, so it sounded like a perfect fit for me!
My dreams of effortlessly navigating to dual-sport heaven dimmed slightly after opening Motion-X for the first time — I immediately felt very challenged by its interface. The app was technical and purpose-built, which was exciting, but it lacked some features I was used to, like… back buttons. Be it as it may, I wrote off Motion-X’s difficulty as user error and I began to look forward to the learning curve.
Over time, Motion-X’s rich feature set slowly exposed itself to me and, in not long, I was able to use the app with reasonable fluency. Three years in, Motion-X has helped me navigate through some of the most memorable experiences I’ve had on two wheels, but I still wish there were back buttons…
I bought an iPad recently and one of the first apps I wanted to install was Motion-X. I was excited to finally be able to plan a trip on a screen larger than my iPhone 7’s, but I was surprised to find the app had disappeared from Apple’s App Store.
Goals and Motivations for the Project
As the features of the app are what kept its fanbase loyal, my goal for this project was to keep 100% of its features intact, while making them more accessible to users through a restructuring of its architecture, and redesign of its UI. Motion-X obviously put a lot of thought into what features would be most important to their users, so I also won’t be adding any additional features.
From concept to prototype, this project was solely my own undertaking. These were my intentions, going into the project.
My goals:
- Deliver a more intuitive interface while maintaining all the great features that motion-x users enjoy.
- Update the look and feel of the app in order to provide a more engaging experience for the user.
My motivations:
- Take full ownership of the various roles involved in redesigning a product i.e., User Researcher, User Experience Designer, UI Designer.
- Further develop my ability to challenge design decisions and address their solutions.
App Analysis
My first step to prepare for the redesign was to do an in-depth analysis of the app. I began by listing out every single function I could find, and then I organized them with Motion-X’s existing architecture. I wanted to be as informed as I could about Motion-X’s design decisions before getting into exploring pain points from user research.
Online Research
Since Motion-X is no longer available for download, and none of my riding buddies still owned had it installed, the scope of my research was somewhat limited. I planned to scour the web, searching specifically for user reviews relating to the information architecture, user interface, or ascetics of the app. I was concerned with both the good and the bad because, although I plan to completely overhaul the interface, I don’t want to completely take away what people love about the app. Fortunately, Motion-X has a healthy presence online. I ended up finding the majority of my data from outdoor-sports forums such as Single Track World and ADV Rider, as well as third-party app stores that hadn’t caught on to the fact that Motion-X is no longer offered. I saved all relevant information to a database, categorizing each entry by the type of feedback and whether it was positive or negative.
Defining the Problem
After analyzing the user feedback from my online research, I was able to define the following pain points:
Pain Point #1 — Unconventional UI
Multiple users complained that Motion-X’s outside-of-the-box approach to UI design made it difficult to use at times. The “Search Wheel” and the menu overlay, in particular, came up several times.
(Pointing at the Search Wheel) “I know the interface seems a little cluttered, and it is, but once you get used to it, it’s kind of simple” — AppStoreReviewer, Youtube
Paint Point #2 — Poor use of signifiers
As is common with a lot of software, there are many online forum threads online where users ask how to perform certain tasks within Motion-X. The resolutions are almost never obvious, and they can usually be blamed on a lack of clear affordances.
“You need to click that “Import” text at the top of the screen that is a little greyed out. It’s just bad UI design, and a dumb user (me).” — SmallBore4Lyfe, ADVRider
Pain Point #3 — Confusing Organization
The structure and labeling within the app’s menus also cause confusion for users. Features that users ask about are frequently in places where they wouldn’t have thought to look.
“You’re looking in the wrong place. Go to Menu → Setup → Map Downloads. You’ll be able to see your imported maps there.” — BigPig87, Mountain Project
IDEATION
Information Reorganization
Having defined ‘confusing information architecture’ as a key pain point, I returned to my app analysis drawing where I had listed and mapped out all of Motion-X’s features. I then started looking for opportunities to consolidate and restructure the information, going through each item, noting my thoughts for its possible relocation, rewording, redundancy, etc. Eventually, I was able to put together an entirely new menu flow, which I believe is much more intuitive.
Wireframes
Now that I had a better idea for what information needed to be displayed, it was time to move on to wireframes. Having used Motion-X pretty extensively in the past, I must admit that I was eager to pen down some ideas that have sprouted over the last few years. That said, I wanted to challenge myself by giving each frame a minimum of three iterations, thereby forcing my decision process to be a bit more objective.
The Redesign
After picking out my best ideas, it was time to boot up Figma, to see how they pan out in high-fidelity!
1) The “Map” screen
My goal here was to reduce clutter so users can focus on what’s important — the map.
Solutions
Footer Nav- Completely reworked to enable quick navigation to the core of the app’s functionality. Buttons are enlarged slightly to allow for ease of use while wearing gloves. The hamburger icon, which served as a button for “Map Options” was replaced with a gear icon to differentiate it from the new Menu icon in the footer nav.
Header Nav — The earth icon serves to keep users informed of their connection to the GPS signal. It turns red when the GPS signal is lost. Although it isn’t shown in the image above, I’ve moved the visibility of the system’s status to the arrow icon. Freeing up that space, additionally by removing the unnecessary “Map” title, allowed me to move the “Speed Overlay”, as well as the search button, into the header, greatly reducing clutter on the map.
New Compass — The compass was replaced with a design inspired by a compass’s turn dial. The linear design fits snuggly under the header, creating a cleaner border for the map.
2) Waypoint Screen
The original waypoints screen can easily induce bouts of information overload. I felt that too many labels were being presented on the screen at once. The interface also lacks clear affordances for how the user might interact with the screen.
Solutions
View Selection- Adding a way for users to sort their waypoints, while at the same time reducing the number of pages.
Waypoints Layout — Enlarging the waypoint cards gives the selections a bit more breathing room and also makes them easier to make a selection with gloves on.
Swipe to change the order or delete — Previously, there was no way for users to reorganize their waypoints or tracks within folders (now lists). I couldn’t help but change that. Swipe left to expose the delete button; swipe right to expose the reorder button.
Location Reference: Including the region where the waypoint is located adds context to help speed up the user’s recall.
3) Track Navigation & Recording Screens
There is no separate view for navigating with tracks in the original version. I wanted to add an element of feedback to give the user a sense of affirmation as they begin following a track. Note: the additional information on the screen is available in other menus, and totally within the realm of Motion-X’s capability.
Solution
Status Pop-up: Once the app picks up that the user is navigating on a track, a pop-up will appear on the lower portion of the screen to give some basic status information — that is, time till the destination is reached, distance, and time on arrival. The user can hide this information by swiping down or dismiss it entirely.
4) Recording
Solution
Live Tracker: The navigation and recording modes have a similar issue where, in the original design, the default screen shown when the user begins recording a track is a collection of stats, along with control buttons, and the additional speed and elevation graphs available with a vertical swipe. The user can switch to the map view fairly easily, but navigating back to the track stats screen takes a couple of dextrous taps. In order to make these three views more readily available to the user, I incorporated a swipe gesture in the aforementioned “status pop-up”, as well as in the new default map view screen for track recording.
Reflection
As this was my first redesign project, there were a couple of learning curves I had to approach for the first time, the most challenging aspect being the reengineering of the original information architecture. It was an extremely tedious process to make sure I accounted for every label on every page. However, once I developed a more complete understanding of what was going on, I was rewarded with a great sense of satisfaction and felt I had more freedom to think creatively about how to restructure the information in a more useable way.
My largest concern with this redesign is that the changes might be too jarring for many Motion-X loyalists. Users may become frustrated if they’re forced to relearn an app that, in its original design, already required a substantial amount of time to gain proficiency. As a follow-up for this project, I think it would be interesting to recreate the original Motion-X screens, and from there create iterative versions with subtle updates, heading towards something similar to the significant overhaul that I proposed here. If Motion-X were still around, I think this would be a more strategic way to update and modernize the app.
