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:
Who would want to utilize this kayaking app?
Why would people want to use this kayaking app?
When would they use this kayaking app?
What makes a person seek out a kayaking app?
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:
Competitive Analysis
What I found:
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.
The Users
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.
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.
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.
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
Can you save the Rock River route from the main destination screen to a new plan?
Can you easily navigate to your profile?
Can you easily search for a destination?
Can you add a filter search?
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:
User patterns: Users like to scan the main screen and use content that has been placed in a hierarchy for them
Potential solutions: Building out the prototype further
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.
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.