Surfline

Surfline provides surf reports, forecasts and weather details for coastal cities around the world.

The Details
YEAR
2020
COMPANY
Surfline/Wavetrak
ROLE
Junior UX Designer
VIEW LIVE SITE

OVERVIEW

I worked within Surfline's product team to design a fast, modern website that expanded functionality while maintaining the core experience.

THE CHALLENGE

Building off of the current foundations.

Surfline had been on the web for 18 years and had not had a major redesign in that time. Our biggest focus was to build a responsive website that offered a mobile-friendly user interface and a handful of new features while maintaining the same look and feel users had come to love.

After rounds of plotting out the site architecture and identifying the most relevant information groupings, we were able to move into the wireframe phase which allowed us to iterate quickly. Once we were happy with the initial result, we put it in front of users to test out our prototypes and gather their feedback.

GETTING STARTED

Finding the right tools for the job.

Approaching a redesign, we needed the right tools to ensure consistency and quality across the Product team. We were able to streamline our process by implementing Abstract, Sketch, Invision, and Zeplin. These tools gave us full transparency to all stakeholders and made working across teams of designers and developers much easier.

RESPONSIVE DESIGN

Blazing fast and fully mobile.

After implementing a mobile-first design strategy for the website, we began aggregating and visualizing our data sets into an information flow that felt natural to our users. Rather than designing an endless page of charts or a more generalized weekly overview, we chose to group the information into daily tabs that provided an in-depth hourly view.

The new Surfline makes the old website look like an antique. It’s blazing fast and mobile responsive, which means all the new tools will be available on any device users choose — desktop, tablet, or phone.

NEW FEATURES

Your favorite spots, one click away.

One of Surfline's most requested features was a way for users to quickly navigate to their top surf spots. We introduced the Favorites bar, an elegant solution that allows users to customize their Surfline experience and easily reach their saved cams and reports from anywhere on the site. They also receive personalized surfing news, stories, videos and swell updates directly to their news feed – based on the regions they’re most interested in.

THE RESULT

Surf forecasts, reimagined.

After months of development and valuable feedback from our users, we created a new version of the site that not only speaks to the functionality Surfline users have come to expect, but expands upon that foundation and provides additional layers of value never before seen in a surf forecasting product.

Explore surf spots via map.

We digitized our entire catalog of surf spots, allowing users to view cams and reports for all breaks in a specific region, while discovering new spots they never knew were there.

Improved swell data.

Users now receive forecast insight that’s a hybrid of Surfline’s most-trusted tools — meaning that the forecast model data is vetted for accuracy by the in-house meteorology team.

Premium forecast analysis.

For those who enjoy taking a deeper dive into the data, we expanded our long-range forecast tools—so anyone can dial in every last detail and be sure they're making the right call.

EVEN MORE MOBILE

Designing a native app.

While updating the website, we wanted to keep a consistent look and feel across all products, as well as add in a new feature which would allow users to find surf spots around them much quicker than in previous versions of the app. After design sprints and user sessions we were able to launch a refreshed product our users were happy with.

TOOLS

Here's what we used to bring our ideas to life.

Abstract
Illustrator
Zeplin
Photoshop
Sketch
InVision