Tidefinder

a tide & weather progressive web app

Project Overview

Tidefinder is a progressive web app that displays weather and ocean data in a single screen.

Tide charts contain a lot of data by nature. There are usually two low tides and two high tides per day, and the times and water levels vary drastically.

Tidefinder creates a simple snapshot of this data so that users can determine the best time and day to accomplish their goals, from discovering tide pools to catching the perfect wave on the hottest day.

Role:

Product Designer

Timespan:

October 2020 - February 2021

Tools:

Figma • InVision • UsabilityHub

Design Process

I knew that this project would require displaying a lot of text in an elegant way. I began the design process with low fidelity wireframes to brainstorm solutions. My goal was to make the design intuitive and easy to read on a single smartphone screen.

Problem Statement:

Users need to be able to find weather and tides in a single screen in order to save time when determining the best day to go to the beach.

While working on the sketches, I refined the design by removing unnecessary text, such as repeated dates, and adding background blocks to create a visual separation the days.
I wanted users to be able to switch easily between the daily, weekly and monthly view, so the top navigation was consistent across the screens.
My sketches helped to inform the design as I began creating digital wireframes in the next step.

User Research & Personas

I interviewed a casual beach-goer, a surfer, and a sailor. Their responses provided insights that were unique to their goals:

Marina sails in the San Francisco bay, and wanted to know very granular wave data within the bay.
Cassie lives in LA where the weather can vary 10 degrees from the east side to the west side, so some weather apps can be inaccurate if they use only a general region for temperature data.
Gwen likes to surf during a rising tide, so she wants to scan the weekly view to choose the best time to go.

I reflected on the personas to refine the layout. I redesigned the daily weather view in a horizontal bar with 3 hour increments of weather in order to make the day easier to read at a glance.

Comparative Research

I looked at several tide and weather charts to determine the most intuitive layout.

The main competitors are Surfline, NOAA, and US Harbors. Surfline has a beautiful UI, but only displays data for surf spots. NOAA provides an API for tide data, but their app is very technical and difficult to understand. US Harbors lists the lows in one column and the high tides in another column, which I find confusing. Many other tide charts are difficult to read or lacking weather data.

Based on these observations, I decided to order my low and high tides chronologically. I also realized that weather predictions are usually provided ten days in advance, so the monthly view should not include a weather column.

Journey Mapping

I created a journey map to understand how the app can thrive within the product ecosystem. Other tide, surf, and weather apps don't have a space for local businesses to advertise. I included this feature in my design in order to generate interest in local businesses near popular beaches, drive revenue to the app, and cycle it back to the businesses with in-app coupons.

Medium-Fidelity Wireframes

I used the medium-fidelity wireframes to create a prototype in Invision so that I could conduct user tests online. I observed users click through the prototype and noticed that my design didn't clearly explain that the grey color block was intended to highlight the times between sunrise and sunset. I replaced these color blocks with larger containers that separated each day and subsection of data. As I began to add color, these containers also made the type easier to read.

High-Fidelity Wireframes

I continued to refine the design during this stage. I made the background containers equal widths to create a more cohesive look. I also double-checked all of my icons and containers to ensure that the design was pixel-perfect and aligned to my grid.

Lessons Learned

This project was created for my User Interface Design Certificate through CareerFoundry. The course prompted me to use a moodboard and develop a style guide based on the mood board, which informed my design from the beginning. The design ended up looking more artistic and less app-like than I had originally envisioned. In the future, I need to focus on the research phase and let that guide my decision making first. I also need to ensure that the user flow is well-defined before jumping into the wireframing phase. In my second iteration, I redesigned it to organize the tide data in more defined columns and rows so that the app looks more like a chart but is also pleasing to look at. I also incorporated an "Explore Nearby" section which could be a good opportunity for advertising from local businesses.