Lune

iOS App Concept
A Paddling Trip Tracker

Overview

Lune is a conceptual iOS app for exploring and logging popular paddling routes. Similar to apps that allow you to explore local hiking trails, I wanted to visualize what that experience could look like for paddling trips. With Lune, you can easily find, record paddling stats, and keep track of all the paddling trips you’ve completed. Now paddlers finally have a way to find and paddle popular trips nearby.

Origin

During my own paddling adventures, I’ve often found it difficult to find, plan and record paddling trips, especially designated river trips. Where are they? Is there any nearby? Is this river free from downed trees at the moment? How long will it take me to go down this river, and how long is it? And other questions like, how much longer do I have left to paddle? Can I somehow inform others of this downed tree? How fast am I moving? I wanted to design an app that could solve these questions in a simple, intuitive manner, making paddling trip planning and recording an easy and fun experience. For this exercise, I focused on users that are familiar with paddling, who have their own canoe or kayaks.

Problems to Solve

With conceptualizing Lune, I wanted to solve the following problems and include them as features:


Process

Feature/User Flow Map

I decided to break down the app's features into three main views, Explore, Paddle and Journal to keep the interface as simplistic as possible. The Explore view would act as the landing view, offering the user a way to quickly dive into the most popular, local paddling trips. The Paddle view would provide the user with tools to simply start recording a trip, or to create and plan their own route ahead of time. And finally, the Journal view keeps track of all of the user’s paddling activity, like stats, completed trips, and any trips they’ve saved for later.

Wireframing

Explore & Single Trip

The Explore view allows the user to browse and discover paddling trips nearby. If they know exactly what they’re looking for, a search bar and filtering tools are offered at the top of the page, allowing them to quickly narrow down the results. If they’re not sure what they’re looking for, curated sections are displayed featuring rows of Trip Cards. Scroll down to reveal more sections, and swipe through each section to reveal more trips. Each Trip Card shows the trips expertise level, it’s rating, and how long it is. A bookmark icon is available here to save each trip for later as needed.

Tapping on a Trip card will take the user to the Single Trip view (seen above), showing an overview of the trip they’ve selected. Here they can view photos, the map, trip details and trip reviews. Scrolling down reveals more details about the trip, including information on what to expect, where to park, what to pack, etc. Tabs to switch between details and reviews is available to get the information the user may want to see sooner and to eliminate unnecessary scrolling. At any point on the Single Trip view, the user has several action buttons along the bottom. From left to right, these are start recording, download the trip map, navigate to the trip, bookmark the trip, and mark the trip as completed. The option to add a review for the trip can be found within the Reviews tab, or from the modal that appears after marking the trip as complete.

Trip Recording

Selecting the record button from the main Paddle page, or from within a Single Trip view will take the user to the Trip Recording view. Like GPS navigation, this view highlights the path ahead, indicates points of interest, shows trip statistics, and offers ways to add photos or points of interest. Selecting a point of interest on the map will show further information, allowing the user to mentally prepare for that grueling portage ahead, or know how much longer until they can rest at camp tonight.

The user can select the Add Marker icon on the Trip Recording view to place a marker where they're at and contribute to the trip’s details. The Add Marker Panel will allow them to pinpoint the marker exactly, select a marker type, add a description and add any photos. Then, once they’ve finished a trip, they can tap the recording button to bring up the Finish Trip panel. Here they'll see an overview of their trip and a button to finish it for good. This will mark the trip complete, and allow them to add 5 star review or add any photos taken along the way.

Paddle & Journal

The Paddle view provides the user with tools to simply start recording a trip, or to create and plan their own route ahead of time. Selecting the 'Plus' button in the top right would start the workflow to creating a route (not mocked up for this exercise), and selecting the 'Record' button in the bottom left would begin a recording.

The Journal view provides the user a way to view everything they’ve logged while using Lune. View paddling stats along with trips made, trips completed, bookmarks, reviews, and any markers or photos they’ve added along the way. Scroll down within the journal view to see a timeline of all activity in a card based format. This is a great way for the user to view their full paddling journey from start to finish. Within the Journal view, a Profile view is also available to adjust various settings and preferences as well.


Visual Design

With Lune, I wanted to create a sophisticated ruggedness to the brand, to match the sophisticated ruggedness of a well planned paddling trip. I chose a headline serif font that I felt matched this criteria, featuring jagged edges with a geometric structure. I wanted the colors to capture a playful, outdoorsy vibe that also maintained a sophisticated appearance. For my own experimentation, I also played around with using border radiuses, and what happens if you remove a radius from one side while keeping the other side's radius intact.

The following are the final visual designs, including text highlighting any changes that were made coming from the wireframes.

Explore

For the Explore page, switching between the map and grid view was made into one button, instead of two tabs in order to simplify the interface. The typography of the section titles was made smaller and more compact to allow the trip cards to sit higher up in the page's hierarchy. Subtle map imagery was added to the background of the Explore and Journal pages in order to provide depth, and allow interactive white elements to pop against a lighter background.

Explore - Search

Upon selecting the search bar from the Explore view, you're greeted with a search panel and can begin typing your search. A list of recent searches, and popular trips or destinations nearby are also offered. Once you begin typing, results begin to display, and options to filter the results by trips or places, and a way to see the results on a map are also available.

Single Trip

An additional screen for the Single Trip view was added to showcase how the page looks when scrolled. As the user scrolls down, the Trip Title will transition to the top of the screen within the image gallery, which will also shrink to make room for the content below. The trip's action buttons, and it's map will remain fixed, and the main navigation will slide down and out of view until the user scrolls back up again. As the user continues to scroll, I imagine the Trip Details and Reviews tab bar will become fixed when it hits the top, allowing the user the option to switch between sections whenever. This tab bar was also added to allow users to quickly jump to reviews, instead of having to scroll all the way past the Preparation section.

Paddle & Trip Recording

From the wireframes, the Paddle screen now shows pre-made trips that the user could view and record from within. Starting a recording from within a trip that already exists would allow the user to have a better navigation experience, getting insights on how much longer they have left, any points of interests, etc.

Additional functionality was added to the Trip Recording screen to allow the user a way to quickly see a brief overview of the trip's details. The user can now sipe down from the top where the trip statistics are to view more information (seen above). Additionally, a back arrow was applied to all trip recording screens to return to the previous screen. Doing so will keep the trip recording, and would show a trip recording indication element, which could be tapped to return to the trip recording screen (not mocked up).

Journal

To keep the different actions of the journal view visually interesting, each button was given a different color. A Profile / Settings button and screen was also added to allow the user to adjust various preferences.

Logo / Brand Design

On my own paddling journeys, the fondest memory I have is within the Canadian wilderness watching the crescent moon glimmering off the lake in front of me, as I listened to the Loons make their calls for hours on end. So, the name 'Lune' for this project comes from the name of the aquatic bird native to North America, the Loon. And well, also the more literal term Lune - the concave region of two intersecting circles. The word Lune derives from the latin word 'Luna' meaning moon.

featured.

past work.

The following projects have been completed in the past and don't necessarily showcase my current skills as a designer. However I think it's interesting to see my progress, so I keep them around.