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.

Prototyping & Testing

The wireframes for Lune were added to InVision and prototyped, to get a better feel for how the app would work and function. Prototyping also allowed me to showcase some of the interactions that weren't 100% clear from the still wireframe screens. Checkout the Wireframe Prototype.

With the wireframes prototyped, I was able to send it over to colleagues, friends, and other paddling acquaintances for feedback. I also sat down with several people as they went through the prototype in person, talking aloud as they went through it. This allowed me to see several things that should be changed, and a few things that could be added. These updates are pointed out within the next section.

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 also used a tan map background to give a more analog feel to the interface, going back to the roots of using a paper map while paddle navigating.

I wanted the colors to capture a playful, outdoorsy vibe that also maintained a sophisticated appearance. The colors have a nautical theme with the deep blue, a subtle tan, and an orange which capture a sophisticated feel, and the secondary colors (seen on the Journal page, and the trip difficulty badges) are then used as additional accents, to bring out a more playful feel.

For my own experimentation, I also played around with using large border radiuses, as opposed to working with smaller radiuses or sharper corners. The large radiuses give off a feeling of flow, or fluidness that sharper corners don’t. These radiuses swoop around and flow through the composition, just as a river might flow through the mountainside.

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 wireframe testing, it was suggested a couple of times to show pre-made trips that the user could view and start a recording from on the Paddle page. 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., as opposed to starting their own blank trip, which would have none of the crowdsource features.

Based on feedback from the prototype, 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 swipe 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.

Landing Page Web Concept

As a passionate web designer, I wanted to begin exploring what the website for Lune might look and feel like. Using Webflow, I developed the concept for the Lune landing page and showcased how the site could feel with various interactions, hover effects and a couple easter eggs. Checkout the concept Figma File and the the Webflow Build.

Logo 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.

Further Findings

I've shared this project for user testing and feedback and learned about a few edge cases that I hadn't thought about originally. For example, users who might not own a canoe or kayak, or how the app will function in rapids, or extreme paddling conditions, where using the app might not be possible. If I were to expand upon the app in the future, I would enjoy designing a feature that can point users to canoe kayak rentals, and also developing an "Extreme" mode, or something similar for those times when you're unable to use the app at all due to the nature of the route you're on.

featured projects

past projects

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.