Paddlr_MainGraphic_Work.jpg

PADDLR Mobile App Case Study

Planning for a paddling trip can be a daunting task of pulling information from several different resources, asking friends for their favorite spots, and staying on top of weather & water conditions. The goal of this project was to develop a product that would make the planning experience more streamlined, by trying to create a “one stop shop” for all your paddling needs.

 
Paddlr_MainGraphic_CasePage.jpg

CHALLENGE

As a new kayaker, and new to the New England area, I found it challenging to find accurate information about bodies of water, which was accessible for paddlers. Information about parking, travel time, fees, water restrictions, and weather conditions are all factors that can play a major role in a paddler’s trip planning. After talking to other kayakers and canoeists, everyone uses and depends on several different resources for collecting this information.

This problem got me thinking “What if there was a product where someone could access all this information they needed, in one location, for planning paddling trips?”. I used this question as my platform for jumping into the research and development of an end-to-end mobile application, specifically geared towards paddling enthusiasts.

PROCESS

Before getting started, I decided the best approach for this project was the double diamond method. This method guided me to discover and define the real problems paddlers were currently having, while planning for upcoming trips, and any frustrations they experienced during those trips. This way I could weed out any assumptions and focus on real solutions.

doubleDiamond_EventsPro.png

DISCOVER

To kick off my research, I wanted to gain a better understanding about what type of paddling products were currently offered in the market. I also wanted to take a look at other successful, and similar, applications that could translate to a paddler’s experience.

Competitive & Comparative Analysis: For the competitive and comparative analysis portion of my research, I decided to look at five different mobile apps. I wanted to observe the features offered and how they functioned. I also read the customer reviews to gain some insights on current users’ frustrations and wishes.

Kayaking_Competitive_ComparativeAnalysis.jpg

Questionnaire & User Interviews: After getting a quick sense of the market place, I sent out a questionnaire and collected responses from 42 paddlers. The purpose of the questionnaire was to develop a general baseline about a paddler’s needs and frustrations, while planning for a trip. These results were used to help guide the interview questions.

I conducted user interviews with 3 frequent kayakers, who paddled once a week, to once a month. The purpose of the interview sessions was to gain a better understanding of how paddlers plan for a trip, what tools they use, and what information is important to them. In addition, I wanted to discover any frustrations that they may run into while on the water.

DEFINE

Taking the data collected during the discovery phase, I began to synthesize the information. By looking for similarities and groupings within the data, I was able to define the following insights.

  • Weather plays a major role when planning for a trip, and while on the water. All users who participated (in survey and interviews), stated weather was their biggest frustration, and weather alerts and real-time local weather information would be very helpful.

  • It can be a struggle to find accurate and current information on paddling locations, and sometimes it is a challenge to find the public boat launch locations. When a product provided the essential and accurate information, during the planning process, users became loyal and added this product to their “planning toolbox”.

  • Paddlers depend on friends and others to find new locations, to get tips and shared features of new locations. When users get the opportunity to read/receive shared reviews, including photos and tips about locations, it built an inviting paddling community.

  • Navigation is important to reach the paddling destination and to be used on the water. Users were using multiple products to fulfill their navigation needs.

How Might We: To help guide the development phase of this project, I wanted to construct a HMW that would take into consideration the user’s needs, as well as the business goals for the product. I decided on 3 statements:

  1. How might we make it easier for paddlers (of all skill levels) to plan and manage upcoming paddling trips, so they can stay safe and enjoy the adventure of the outdoors, as well as, discover new places to paddle.

  2. How might we build a product that provides the essential information for paddling trips, and builds product loyalty while drawing users to the exclusive advanced features.

  3. How might we create an enjoyable and helpful experience that builds a healthy community, where users feel comfortable and safe to share their experiences.

To influence my decision making, during the design and ideation phase, I created a persona, storyboard and a business goals diagram. I would refer back to these to remind myself of who I was designing this product for, and what problems we needed to solve, while keeping in the mind the business goals for developing a MVP.

Persona

Persona

Storyboard

Storyboard

The project goals document became very useful during the develop phase of the project. It acted as reminder that I was creating a MVP (minimal viable product). As I started to develop the interface, these goals helped me to consider the different phases of product development, “What features were essential for a first release, and what others could happen later”.

This project goals document was helpful for keeping perspective during development.

This project goals document was helpful for keeping perspective during development.

DEVELOP

INFORMATION ARCHITECTURE

Story Map:  To configure the structure of the product, I chose to create a story map. This “living” document would allow me to think through the different types of tasks users needed to complete, what actions were important, the information hierarchy, and what functions were possible. As the development process moved forward, I could update this document, and troubleshoot any hiccups.

Story Map

Story Map

Priority Mapping & Feature Road Map: To decide which features were most important, and should be included in the MVP, I created a priority map. Using my research findings, insights, persona, and projects goals, I ranked the different features by level of importance and difficulty to create. This priority map was then used to build a feature road map, and then to update the story map with a Phase 1 and Phase 2 release plan.

PaddlingApp_PriorityMap_REVISED.jpg
PaddlingApp_FeatureRoadMap.jpg

INTERACTIVE DESIGN

Task Flows: Before moving into wireframes and UI development, I created some basic task flows that users would be performing, while using this product. These helped to layout the framework for some of the features.

Task Flows

Task Flows

Service Blueprint: When discussing the task flows and story map with my mentor, he challenged me to create service blueprint for this product. I enjoyed this challenge…I treated this document as a way to dive deeper into the user experience, and experimented with a new tool. What I liked about creating this service blueprint, was that it forced me to think beyond the app and to consider the actual service being provided.

My first attempt at a service blueprint.

My first attempt at a service blueprint.

WIREFRAMES

Using the story map, task flows, as well as my research into common UI design patterns, I started with a quick brainstorming session of sketches to figure out how the navigation would be presented.

Ideation wireframe sketches for Explore, Destination and Trip Planning screens.

Ideation wireframe sketches for Explore, Destination and Trip Planning screens.

I used these sketches to kick-start my low-fidelity wireframes. During this process, I made decisions on the organization of the information provided and how that visual hierarchy would be presented. To get a better sense of the hierarchy and user flow, through the mobile app, I decided to also start figuring out the copy and microcopy.

Lo-Fi wireframes for PADDLR.

Lo-Fi wireframes for PADDLR.

DELIVER

Prototyping: The next step was building a prototype. Using InVision, I constructed the prototype with lo-fi wireframes that were uploaded through Sketch. This prototype was built to test the process of searching and finding a paddling destination, creating a new trip, finding another destination and adding that spot, to your trip.

Usability Testing: To test how the user experience would be while perform these tasks, I performed usability testing sessions with 3 individuals. The results from the testing were as follows:

  • 100% of users found the overall interface clear, clean and easy to use.

  • 100% of users liked current map capabilities, but would like more robust options in future.

  • Users want to hold onto completed planned trips, so they can update data for revisiting in the future.

  • Some users thought there could be more information provided on the pop-up labels in the map view.

  • Overall Complete Rate: 100%

  • Error-Free Rate: 90%

After reviewing these findings, I decided to make the pop-up label on the map view larger, so more information about that pinpoint, could be provided (like number of parking spots). Next, I created a new subsection in Planned Trips, where users would find completed trips, for future reference. Into my action plan for Phase 2 release, I added the research and development of more robust map features.

Changes made after feedback received in usability testing.

Changes made after feedback received in usability testing.

UI DESIGN

Taking the information gained from the usability testing, I made the adjustments to my wireframes and moved into the high-fidelity phase of the UI Design.

Mood Board: I started this phase by taking a few moments to develop a mood board of color, illustrations, branding, etc., that would express the overall look and feel of the PADDLR branding.

PADDLR mood board

PADDLR mood board

Color Palette: Since I wanted this product to be accessible to everyone, I decided to push myself further by developing a color palette that would be Double A accessibility rated. Using a palette generator, I began developing several color palettes, and tested them at the different levels of color blindness. Next I selected the 2 best color palettes, and used a contrast checking website to verify the rating.

Potential color palettes I created to test for AA accessibility rating.

Potential color palettes I created to test for AA accessibility rating.

Logo Development: A part of this project was also creating the PADDLR logo. I started by sketching out quick ideas and thoughts. Then I selected a couple that I would push further, before landing on the final design. You will see below in the sketches, I decided to change the name from Paddle Planner to PADDLR.

Sketch page for potential logo designs. As you can see, the name changed during this process.

Sketch page for potential logo designs. As you can see, the name changed during this process.

Final logo design shown with logo spacing and on different background colors

Final logo design shown with logo spacing and on different background colors

FINAL DESIGN & UI KIT

After developing the PADDLR brand style guide, I moved into building a UI Kit and applied those guidelines to the PADDLR hi-fidelity wireframes.

UI Kit for PADDLR

UI Kit for PADDLR

Below is a gallery view of the hi-fidelity wireframes. Click through to review.

In order to demonstrate the user flow of planning a trip, I created a video of a high-fidelity prototype.

NEXT STEPS

  • Begin research and development into more robust map features. For example, plotting routes with multiple stopping points.

  • Explore the development of tracking features for distance and speed.

  • Develop a review process, where users can track their progress and improvement, in their desired paddlesport.

  • Start building the weather and water conditions alert feature.