Design Patterns & Flows in MapMyRun
Running has been my primary form of exercise since college. I don’t run everyday or even that long of a distance, but man, when everything lines up, it feels great. Outdoor runs on trails are my jam, and MapMyRun helps me get through it.
The first screen upon opening the app is the workout screen. Basically, I can open the app, push “start workout” and boom — I’m already on my way. It’s apparent that this particular task of tracking a workout is one of the most common tasks performed on the app; it’s the opening screen and users don’t have to click more than necessary to get going. The task flow to log a workout is direct:
This main task is easily accessible, and MapMyRun utilizes a number of design patterns that let users continue to have a satisfying experience.
Cards
Cards are composed of different types of content and provide users quick entry to detailed information. In the “Explore” section, users scroll through cards to view posts of other users and their corresponding comments. Each post usually contains a short text, photo and stats of the workout. As someone who doesn’t post but just lurks, I can quickly scan these cards and see admire what others have done. I know, it sounds creepy, but it’s actually uplifting to see this community supporting each other.
Pull to Refresh
Pull to refresh is a design feature that’s repeated a few times throughout the app. It’s located in the “Explore” section I mentioned earlier so the screen can be updated with new posts. Additionally, I can pull down to refresh my workout summary after working out. I don’t use it too often as the newest workout usually uploads itself but it’s a nice feature to have. Plus, the animation of a little dude running while it’s refreshing is cute. While it’s convenient to be able to manually update the content, it’s still an added step for users to do.
Notifications
The little bell on the top of the screen with a number next to it informs me of any updates or timely matters that I should be aware of. It’s an important feature, especially if my app is due for an update, however, sometimes I just don’t need to know about the latest smartwatch to help me with my running. Notifications can be annoying so it’s important that users can change their notification preferences or disable them in their settings.
Dashboard
A dashboard is a screen to show the high-level overview of information at a glance. With MapMyRun, I can quickly see a week’s worth of activity: total distance/calories/time, number of workouts, and specific days of that week that I worked out. Some dashboards give companies important data so they can make changes, but with MapMyRun, I just like to see an overview of that week’s activity. It’s not necessary but kind of fun to look at.
Carousel
When users are looking for a training plan, MapMyRun displays various options using a carousel. Unlike cards when there is no priority of one card over another, a carousel is a line of items displayed horizontally in a cyclical nature. It emphasizes a particular item and gives it more hierarchy than those next to it. Carousels allow users to keep scrolling and even browse all of the items (compared to a vertical list where users might give up if the list is too long).
Settings
Settings is such an important feature since it allows customers to customize the way they want the app to behave. Though it’s not normally used frequently, being able to change preferences can lead to a smoother experience. MapMyRun prioritizes their settings into categories beginning with most commonly used features to those less frequently used.
Overall, MapMyRun utilizes a number of design patterns well to enhance my experience with the app, and I don’t think I’m alone on this. Since they launched in 2007, MapMyRun has garnered 316k ratings and 4.8 stars in the App Store. I don’t know how MapMyRun was received in its infancy, but it has been wildly popular and successful in the long run. (Sorry, had to).
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!
