WayFinder

Your personal tool to navigate the seas and plan your sessions.
Mock-up photos of WayFinder app with background photo of a surfer on the beach.
Overview: WayFinder is an app featuring simple yet comprehensive and beautifully designed maps, weather forecast models, and an interactive platform for those who are preparing for and participating in recreational water activities.

Roles: UX Researcher, UX Designer, UI Designer

Company & Project: CareerFoundry UX Design Program: Immersion Course

Timeline: November 2020 - March 2021

- Examining Competitors -

Problem Statement

Our water sports enthusiast users need a way to easily and efficiently receive key information from weather data and reports in order to responsibly have fun while out in the water for their activities. We will know this to be true when we track how many water sports athletes use our app to plan their days on the water before and/or on the day of.

Competitive Analysis

I conducted SWOT analyses on two major competitors, Windy and WindFinder, to gain a better understanding of the existing market and discover potential gaps that my app could fill to stand out among other apps. For additional insight, I also created overviews, marketing profiles, and a UX analysis on the WindFinder app.

See it all here.

- Understanding Users -

User Interviews

Overview & Rationale:

I interviewed three interviewees in their 20s and 30s located in the Southern California region. Two were surfers as part of my target audience and one was a non-surfer but participated in other outdoor recreational activities.

I chose this method because one of my biggest challenges in this project was that I knew nothing about surfing or water sports! Thus, directly interacting with those in my target audience seemed to be the most natural, effective way to gather insight and data.

Goals:

  • To better understand user behavior around the activity of surfing and other water/outdoor activities.
  • To determine which tasks users would like to complete using a weather app.
  • Documenting user pain points and useful features with existing apps on the market.
  • Collecting data on the context in which users would use a surfing/weather app.

Affinity Mapping

I sorted my findings into themes to gather additional insights I might have missed looking solely at interview notes. For my affinity map, I chose to create one physically so I could quickly write key quotes and easily group them into clusters.

Photo of an affinity map for interviews created with sticky notes pasted on a wall.
Photo of my physical affinity map using sticky notes and a wall

Cluster 1:
Tools & Learning

It seems like there are a good amount of users who self-teach sports and weather. We could incorporate tips and resources in an app to help users as they learn.

However, we will need to make sure the app is simple and easy to use while
informative. We may also need to look into how to make it more appealing to unmotivated users.

Cluster 2: Improvements

There are many improvements that can be made. Major points seem to be facilitating their commute, offering insight into the community, and providing notifications and alerts.

Users also seem to value visuals (surf/weather cams), an affordable price, and safety/privacy.

Cluster 3:
Social / Behavior

Unlike many other activities, surfing seems to often be enjoyed alone. It also inherently has to be performed alone as it’s difficult/infeasible to share a wave.

This means I must
reevaluate how to incorporate and design the social aspect of my app. I may need to look into something like Reddit as opposed to Facebook.

Card Sorting

I conducted a closed card sort to determine how users would group items into predetermined categories. This allowed me to get a better understanding of what users may expect and how they may navigate through my app.

From the results, I adjusted the cards for weather reports, download spot summary, help, FAQ, and notifications/alerts, and tweaked some terms and paths in my revised sitemap.

- Designing for Users -

Personas

Based on the initial research, I developed 2 personas with needs & goals, frustrations, motivations, quotes, and basic demographic information.

  • Ryan represents an experienced surfer who is looking for an effective and reliable method to plan his surf sessions.
  • Zach represents a complete beginner who wants to learn how to surf but is a bit intimidated. He's looking for resources to help get started and a community to possibly make friends.

These personas affected the design by emphasizing the need to cater to both experienced and inexperienced users.

New features resulting from my personas included a Calendar page with a feature to create plans as well as a Tips and Forum page to provide helpful information and foster discussion.

User Journeys & Flows

Utilizing the personas, I created user journeys and flows to better visualize potential Ryan and Zach's needs and tasks within my app to develop simple straightforward flows.

I also kept in mind distractions they could face and how to make the flows more fluid in case of interruptions. This process refined my design for an optimal user experience.

- Foundational Design -

Low & Mid-Fidelity Wireframes

From my research, personas, and sitemap, I had the foundation for WayFinder to begin drafting the interface with sketches.

Then, I moved onto Balsamiq to rapidly brainstorm and get ideas out and focus on functionality.

High-Fidelity Wireframes (Version 1)

After sketching, I translated my initial wireframes into a grayscale high-fidelity prototype for usability tests.
To experiment with multiple software, I created the first version of my prototype with Adobe Photoshop and InVision. Check it out if you're interested or see some initial mockups below.

- Usability Testing -

Testing the Prototype

Test Details:

Once the first version high-fidelity prototype was complete, I conducted six remote-moderated usability tests to assess the functionality, learnability, and errors for new users interacting with the mobile WayFinder application. Participants were in the 25 - 44 age range and included both those that did and did not fit in my target audience.

View test plan | View test script

Test Objectives:

  • Observe how easily users navigate through the app, can they successfully find what they’re looking for?
  • Determine if users find the app enjoyable and useful, would they be interested in using the app and its features?
  • Record most common errors users make during these usability tests.

Affinity Mapping for Usability Tests

To effectively analyze the data, I created another affinity map to visualize and organize the data into any repeats and patterns. This time I created a virtual one as I felt it would be more time efficient since there was so much data to go through.

Image of affinity map and main takeaways from usability test sessions. Categories include observations, positive quotes, negative quotes, and errors.
Affinity map with observations, positive quotes, negative quotes, and errors

Rainbow Spreadsheet

I then further broke down the data and created a rainbow spreadsheet to analyze possible solutions and changes to improve the next iteration of my prototype. Scroll down further to see the changes implemented in my designs.

View complete rainbow spreadsheet

Screenshot of rainbow spreadsheet created to analyze usability test data and possible solutions.
Rainbow spreadsheet for WayFinder usability tests

- Refining the Design -

Iterative Design Process

For the next version of my high-fidelity prototype, I translated my design to Adobe XD. Below are some snapshots of WayFinder's iterations after I received feedback from my usability tests and from professionals and peers.

Errors & Updates to
Spot Overview

(medium severity)

Suggested Change: Change “reports” to “weather” so users are no longer confused about what to expect.

Evidence: Half of the participants in my usability tests were unsure what “reports” meant in the Spot Overview. While being unsure isn’t always bad, these participants guessed reports would be related to legal issues, such as lawsuits, which is drastically different from it is (weather reports). Therefore this text should be updated to clarify the content.

Reflection

Having another pair of eyes, whether in the design field or not, in addition to looking at other designers' work opened my eyes to users' wants and needs, their struggles, and their thoughts so I could predict and troubleshoot problems in addition to improving the look and feel of my design.

While it can be nerve-wracking, difficult, or unpleasant at times, I've embraced receiving critique and listening to differing opinions in order to grow. Thus I could improve my designs to better the user experience.

On that note, please explore my prototype below and let me know your thoughts!