One Paddle Logo.png
 
OnePaddle Hero.png

Bringing adventure to you.

Client

One Paddle (Fictional Client)

Scope

4 Weeks (160 Hours)

Role

UX/UI Designer

Tools

Figma, Adobe Illustrator

 

Context

This project came up because of a specific issue for many kayakers, including myself and my inner circle of fellow kayakers. Many kayakers face the problems of the unknown. Problems like researching locations to go kayaking and then not knowing where to safely drop their boats in or where they will be getting out. Not knowing the condition the water is in, like if it’s high, low, or if there are obstacles, like branches, etc. We are looking to solve these problems by providing accurate and up-to-date information for these users where they can easily find this information without having to look into several different apps to get the answers they are trying to find.

 

Challenge

Understanding the problems that the kayak community faces and how to create a tool that provides kayakers key information that will ensure a knowledgeable, safe, and adventure-filled experience.

 

Solution

Create an app that provides key information to users, making One Paddle the all-encompassing source for all kayakers.

These are the high-level goals and objectives:

  1. Who would want to utilize this kayaking app?

  2. Why would people want to use this kayaking app?

  3. When would they use this kayaking app?

  4. What makes a person seek out a kayaking app?

  5. Some challenges or pain points that could arise while kayaking/outdoor activities?

 

Research

 

Secondary Research

Using resources like Google, social media, and the app store, I began to collect data that deepened my understanding of the kayaking community. I was able to delve deeper into information that already exists and get a clearer direction on where to focus attention in the next steps.

What I found:

Read entire secondary research document here.

Read entire secondary research document here.

Competitive Analysis

What I found:

Competitive insights - OP.png
 

1x1 User Research

After seeing what other resources exist for users, I created a script that would help me gain insights into potential users and discover their wants and needs, what motivates them along with seeking out their frustrations.

 
User insighes - OP.png

The Users

Empathy Map

After collecting insights from the 1x1 user interviews, I had a clearer understanding of the participant’s feelings and decision-making factors.

 

User Persona

The empathy map presented a clear outline of how emotions play into the decision-making of users. Knowledge of the user’s routine, influences, motivations, pain points, and needs were uncovered. To determine which features take priority, the user persona serves as a guide in the define stage.

Define

Project goals

  • Understand user

    • Determine what the user needs, motivates, goals, and frustrations. Make their experience all together easier, so they can spend more time kayaking than researching.

  • Define problem

    • Understand the problems that the kayak community is having and dive deeper into understanding what the problem truly is

  • Deliver high-fidelity mockups 

    • Create mobile app screens for an ios platform

  • Create a prototype

    • Run usability tests to see the results of the flow and information architecture

Sitemap

Using the goals that were established, I created a sitemap to visualize the relationship between content and hierarchy.

Ideate

Task Flow and User Flow

Being able to save upcoming routes is very important to our users, so I illustrated the flow of determining a route and saving it. Building off of the task flow, I built out the flow for a user to save routes. 

 

Wireframes

Taking the same tasks that I built into the task flow, I sketched out the wireframes, showing just how many screens I would need to create to continue the process.

Low-fi and High-fi Wireframes

I developed low-fi wireframes in Figma first to get structure and placement down. Starting with the low-fi wireframes, I was able to focus on screen flows. Once I was finished creating the low-fi wireframes, I was able to add images and colors for the high-fi, I used meaningful patterns that helped create a sense of familiarity for our users.

High Fi - one paddle mock.png

Branding

Mood board

After uncovering what a common user looks like, their emotions, their decision-making process, and their common goals and frustrations, I began developing a list of adjectives that align with my research. The adjectives revealed how the brand should make our users feel. Using those emotions, I was able to create a color palette, select typography, and imagery that will evoke the brand’s messaging.

One paddle - mood board.png
 

Logo Design

Using the mood board, it was evident what the logo should look like and how it would create a sense of attraction to our users. I developed the logo using Adobe Illustrator and Figma.

 

Style Tile

After creating the logo and color concepts for OnePaddle, I took it to the next step and created a style tile. Illustrating the direction the brand needed to move forward in for the UI design.

UI Kit

Once I built out screens for the app, I saw what elements needed to be created to develop the OnePaddle prototype. The UI kit contained elements that would be shown within the whole prototype.

One Paddle Style.png
Yellow Squiggle.png

iPhone/Mobile Prototype

Using my high-fi wireframes, I began to create interactions between screens to create a prototype to begin usability testing. Once the prototype was ready, I developed a list of test objectives. 

Tasks to complete

  1. Can you save the Rock River route from the main destination screen to a new plan?

  2. Can you easily navigate to your profile?

  3. Can you easily search for a destination?

  4. Can you add a filter search?

FullTasks_OnePaddle Prototype.gif
 

Test

Usability Testing

Conducting the testing:

Gain insights on the user’s pain points, frustrations, and positive moments using the app. Evaluate the insights and take into consideration improvements to be made.

During the usability testing I learned: 

  1. User patterns: Users like to scan the main screen and use content that has been placed in a hierarchy for them

  2. Potential solutions: Building out the prototype further

  3. Confusions: Limitations in the prototype phase

Affinity Map

After I had my results from the usability testing, I organized the information into an affinity map to clearly set apart the successes, frustrations, and patterns. This illustrated a clear path that I needed to take to evaluate the insights and take into consideration what improvements needed to be made and what could be made in the next step.

One Paddle Affinity Map.png

Learnings and next steps

Learnings:

After completing usability tests, I have more of an understanding and working knowledge of what it takes to complete and end to end mobile applications. It goes to show just how simple apps need to be. Just because an app has cool features, doesn’t mean the features make sense or are even needed. If the user doesn’t catch on right away to the feature, it is useless. Users want information quickly and at their disposal in the snap of their fingers. Another thing I learned is, just because a user makes a comment on how to fix an issue doesn’t mean that comment is the best solution or if that issue, is the issue.

Next steps:

Using Figma, I would continue to build the prototype out further in order to gain more insights from further usability testing. I think the kayaking community could certainly benefit from an app like this, it would be interesting to see a fully developed app in the outdoors.