GoncaloMartins

THE BRIEF

The Type

Responsive Web App (Mobile-first)

The Project

“Tide” is a seashore weather forecasting service for surfers. We are building a web app that will allow communication of forecasts to surfers and water sports aficionados. This app was designed as part of the CareerFoundry UX Design Certificate

Tools Used

Figma, Figjam, Optimal Sort, Helio app

The Duration

24 weeks (October 2022 - March 2023)

My Role

UX Researcher and UX/UI Designer

THE DESIGN PROCESS

Understand & Observe

Competitive Analysis

Interviews

Define & Synthesize

Personas

User Journeys

Problem Statement

Feature Definition

Ideate & Prototype

User Flows

Sitemap

Wireframes

Usability Testing

Usability Studies

Rainbow Spreadsheet

Revised Wireframes

Design Refining

High-Fidelity Design

Mockups

Design System

Prototype

Why this project?

I bought my first bodyboarding gear with the income from my first job, at 16 years old. I have been practicing it ever since.

This project was an opportunity to discover, understand and try to solve the difficulties that surfers have when searching for the best waves. The end result is the design of an improved digital forecasting platform.

Case Study video presentation

Initial problem statement

Surfers and sea aficionados need a way to better understand weather forecasts because they want to choose whether they go to the sea and the best time to go.

UNDERSTAND & OBSERVE

Competitive Analysis

I started by conducting an analysis of the competition because I wanted to know which features were common in these type of apps and how they were designed. I also wanted to better understand the most popular competitors, their strengths and how they approached the market.

Magic Seaweed

One of the most famous apps used in Portugal. It is well-known for its clean looking interface and excellent UI. The main features offered include surf forecasting, spot guide and live cameras. They also offer a native mobile app.

Windguru

It is regarded as the most accurate and complete web app. Offers a wide range of forecasts and forecasting methods. The main features include wind forecasts, weather forecasts, surf forecasts and spot guide. They don’t offer live cameras.

Other competitors

These competitors offer surf reports, wave forecasts, wind forecasts, tide information, real-time data, location-based features and interactive maps.

Common app features

I proceeded to gather the most common and significant features that the competition offer. This gathering was fundamental for the planning of the interviews and for defining the business requirements and features to design.

Surfing Spot visuals

Photo galleries (beaches and seashore points)

Webcams / Beachcams

Search of surfing spot

Browser for beach and seashore location

Choice of location in map

Favorite surfing spots

Additional features

Premium Membership

Connection to support bot and tutorial

Blog, articles and news

Forecasting data display

Swell rating star system

Wave size

Swell size, frequency and direction

Secondary swell info

Wind speed and direction

Raining probability

Water and atmospheric temperature

Forecast accuracy

Tide graph and timings

Sunlight general info

Interviews

Interviewees Profile (3 people)

2 surfers and 1 bodyboarder were interviewed.

25-31 years old

Lisbon, Portugal

Designer, Biologist, IT Developer

1 experienced, 
2 intermediates

I conducted the interviews mostly because I wanted to hear the users, understand how they use the existing websites and decide which problem I would be tackling in my design.

Specifically, I wanted to:

Know how surfers make the decisions that lead them to go surfing

Know what websites and metrics surfers use to make decisions about where and when to go surfing

Understand the Pros and Cons regarding existing web apps

Research Insights

After analyzing the research findings through affinity mapping, I reached some main findings:

Users want only one web app with all the information they need

Smartphone use is preferred

Users want real time video streaming of the waves and beaches

The data points that the users tend to look at are:

the direction and strength of the wind

information about the tide

the wave size

the swell size, direction and period

Users showed interest in a surfing photos marketplace, where they could purchase photos of them that were taken buy surfing photographers.

Many times it is not convenient for me to go to the laptop to see the forecasts

DEFINE & SYNTHESIZE

Personas

Inspired and informed by the research, I created 2 Personas, a more experienced surfer and a less experienced one. I used the personas as summaries of the behaviors and attitudes learned through the interviews. Doing this helps me in more easily have the user in mind while designing.

EXPERIENCED

Miguel

Miguel is a more experienced surfer and has the habit of consulting forecasts before deciding to go surfing. He already knows what metrics to look for and how to interpret the data.

INTERMEDIATE

António

António is not a complete beginner but does not yet have a lot of experience. He typically decides to go surfing before consulting the forecast and is happy with some help with the different data.

User Journeys

The User Journeys for the personas have helped me stay in touch to what the users feel and think throughout the process of finding the best waves.

Through the user journeys I could:

Map out the user friction points in the UX. Some of the frictions identified were the fact that users had to go to a desktop device to see the conditions, and the inconvenience of having to go through different web apps.

Better identify the improvement opportunities for the design. The main opportunities are to build a better mobile experience and build an app that has all the information users need.

Problem Statement

After the research and the creation of the Personas, I was already aware of the main problem that I wanted to solve: creating only one web app with all the necessary forecasting information.

Surfers and sea aficionados need a way to quickly and easier understand all about weather and sea forecasts through one web app because they don’t want to waste time and attention by consulting several forecasting apps.

We will know this to be true when users tell us that they shifted to consulting only one web app, instead of going through many different apps.

Moreover, I want to focus mainly on creating a great interface for the mobile version of the web app. This desire is supported by users’ feedback, where they said that they would like to have the information easily accessible through their smartphones. By designing Tide as a mobile-first web app, I was hoping to be tackling this challenge.

Feature Definition

At this stage, after doing competitive analyses and understanding the customers, I was ready to defining the features that I wanted to design for the Tide app.

Surfing spot search feature. Includes search through search bar, through a map and through a “drill-down” geographical search feature

Real-time streaming of waves at surfing spots (can be included as a premium feature)

Information about the surfing spot which includes general spot information and conditions forecasting data (waves’ size, tide status, wind status, etc.)

Surfing photos marketplace with a photo purchasing flow. Interviewed users would like to have this feature

IDEATE & PROTOTYPE

Sitemap

With the start of the ideation phase, I laid down the main features and pages to be designed in a Sitemap. The Sitemap featured a hierarchical structure except for the surfing spots’ forecast and information where it features a flat structure.

I conducted a Closed Card Sorting for the Sitemap. The card sorting ended up validating the Sitemap created.

Wireframes

I proceeded to sketch paper wireframes, focusing mostly on navigation and important UI elements.

I then increased the fidelity of the wireframes by designing them digitally. The increased fidelity of the Digital Wireframes, allows for the focus on smaller details. With this, it was possible to experiment with the display of accurate patterns and placeholders.

Forecast screen

Forecast Archive screen

Spot Info screen

Spot Photos screen

Prototypes

In preparation for the usability tests I built two prototypes, in Figma.

Mobile

Desktop

USABILITY TESTING

Studies objectives

At this stage I wanted to discover any usability problems with the design. There were 4 points that I need to validate with real users:

Do the users understand the app navigation patterns?

Can users search for a surfing spot or a location easily?

Do the users understand the forecasts being presented at the various screens?

Can users access the “Photos Marketplace” and buy a photo easily?

Test participants

In order to validate the points above described, I conducted Remote Moderated Usability Studies with 6 participants. I interviewed both surfers and non surfers. Interviewing non surfers was important because the app should be usable and relevant for complete beginners in the sport, who are not used to this type of digital products. Half of the participants used the Mobile Prototype while the other half used the Desktop Prototype.

Mobile Prototype

Participant 1 (P1)

Seasoned bodyboarder

Male

30-35 years old

UX/UI Designer

Participant 2 (P2)

Beginner surfer

Male

25-30 years old

Web Developer

Participant 3 (P3)

Not a surfer

Female

25-30 years old

UX Design Student

Desktop Prototype

Participant 4 (P4)

Not a surfer

Male

20-25 years old

Football Coach

Participant 5 (P5)

Beginner surfer

Male

30-35 years old

Business Consultant

Participant 6 (P6)

Not a surfer

Male

20-25 years old

Musician

Test Outcomes

Main Issues

The issues uncovered by the users were worked on through an Affinity Map.

Users don’t see the burger menu as a go-to navigation pattern in the mobile version.

I was looking for some kind of bottom navigation.

PARTICIPANT 1 & 3

When thinking of searching for anything in the app, the users go immediately to the search bar.

I think that the search feature through the search bar could be a search for anything in the web app such as search for the beach, location, municipality, surfing photographer, etc.

PARTICIPANT 1, 2, 3, 5 & 6

Users say that the Tide graph is not the most intuitive for less experienced surfers.

PARTICIPANT 1, 3 & 6

Users suggest that the different search methods could be accessible through the search bar.

The search drill-down feature is an interesting one. However it is a bit hidden.

PARTICIPANT 1 & 3

Rainbow Spreadsheet

The Rainbow Spreadsheet helped me more thoroughly see which issues were more frequent and analyze their severity. With this, I could select which changes I wanted to reflect on the design.

Revised Wireframes

Some of the revisions done after the usability studies are reflected on the wireframes below.

Search feature

Issue

Users go to the search bar for any search inside the app and for any search method

Solution

The solution was to include all the search methods in the search input and exclude them from the main navigation menu

Current Tide graph

Issue

Some participants didn’t understand the graph

Solution

Proper title added with extra information through the information sign

Bottom navigation

Issue

Users were searching for a bottom navigation pattern when wanting to perform tasks in the app (mobile)

Solution

I moved the burger menu options to a bottom navigation menu

Surfing Spot’s description

Issue

Participants said that the text was too long and was very prominent, event if the user don’t want to read it

Solution

I hided a great part of the text and placed an arrow as a signifier for people who want to have the full view of it. I also moved the text down the scree, giving less importance to it

Revised Wireframes

Some of the revisions done after the usability studies are reflected on the wireframes below.

Search feature

Issue

Users go to the search bar for any search inside the app and for any search method

Solution

The solution was to include all the search methods in the search input and exclude them from the main navigation menu

Current Tide graph

Issue

Some participants didn’t understand the graph

Solution

Proper title added with extra information through the information sign

Bottom navigation

Issue

Users were searching for a bottom navigation pattern when wanting to perform tasks in the app (mobile)

Solution

I moved the burger menu options to a bottom navigation menu

Surfing Spot’s description

Issue

Participants said that the text was too long and was very prominent, event if the user don’t want to read it

Solution

I hided a great part of the text and placed an arrow as a signifier for people who want to have the full view of it. I also moved the text down the scree, giving less importance to it

The Moodboard

In order to move forward into High-fidelity design, I researched some design styles and elements. The result of that research was the Moodboard below. My goal was to move towards a clean and informal style which are values connected to the practice of surfing.

Important Style Decisions

Based on the moodboard and visual design research, I made design decisions regarding color and typography.

Primary Color - Blue

The core brand color is blue. Blue connects the brand to the ocean. Blue also transmits tranquility and confidence. Tide wants to ensure its users of the accuracy and confidence of the data being shown.

Primary Color - Other

Other primary colors are white and black (with different opacity variations), and light grey.

Secondary

The secondary colors are mostly used in particular situations such as particular symbols (i.e. weather conditions) or feedback to the user (i.e. success states).

Typography - SF Pro

The Typeface is SF Pro, a sans serif font.

The goal of this font is to represent innovation, youthfulness and playfulness - values that are aligned with the Tide brand and communication and the practice of surfing.

The different fonts were used within context and to explain a visual hierarchy to the user. The Titles and Headline use a Black font while the Body and Captions range from a Regular type of font to a Semibold one.

High-fidelity screens

Following the initial visual design decisions, I scaled up the High-Fidelity Design throughout the entire app.

Below are the designs for the Surfing Spots app flow (part of the app where users can see forecasts and information regarding the surfing spots).

Conditions & Forecast

Users can see the current weather and sea conditions as well as the forecast for the next 7 days

Detailed Forecast

This screen shows a more detailed forecast with extra data points

Spot Info

Users can see general information about the surfing spot

Surfing Spot Photos

Users can see surfing photos taken at that surfing spot

Mobile to Desktop

Tide is a Responsive Web App. I followed the mobile mockup designing with designing for the desktop breakpoint.

Conditions & Forecast screen

For the desktop breakpoint I was able to introduce containers that help group the “Current Conditions” and distinguish it from the next days’ forecasts. Also, with a bigger screen, I’m able to scale up some of the elements and to present the forecast tables horizontally.

Spot Info screen

In this screen I was able to scale up the photos which can give the users a better preview of them.

Design System

Many of the interface design decisions made were recorded in a Design System.

This is a good practice not only to help maintain consistency throughout the design, but also to serve as a guide for other designers that would work on the project.

UI Elements

CTA Buttons

Mobile

Height = 40px

Width = 358px

Corner Radius = 20

Desktop

Height = 54px

Width = 308px

Corner Radius = 20

Primary