dm.

Surfline

PRODUCT DESIGN MANAGER
My roles and responsibilites included Creative Direction, Ideation, and Design

Starting New

Surfline has been on the web for over 17 years and has not had a major redesign in that time. Approaching a redesign we needed the right tools to ensure consistency and quality across the Product team. I was able to streamline our process by implementing Abstract, Sketch, Invision, and Zeplin. These tools gave us full transparency to all stakeholders and made working in a team of three designers much easier.

DESIGN PROCESS
01
Define
02
Ideate
03
Prototype
04
Design
05
Analyze

Creating a Design System

Before approaching a redesign we needed to define our style guide to exist as a unified design language. After creating our new design language we were about to build out cross functional UI components.

#0058B0
#F2F7F9
#42A5FC
#23D737
#FFB600
#FF0000
Futura Demi
spacing
component library

Designing for a Responsive Web

Our biggest focus was to have a website that was accessible by mobile phones. To do this we needed to create a site that was quick and responsive. After identifying the problem we were able to move into the wireframe phase which allowed us to iterate quickly. Once we were happy with the result we brought some users in to test out our prototypes and gather their feedback.

Getting User Feedback

Putting high fidelity prototypes in front of our users allowed us to gather more accurate user feedback.

Native App

While updating our 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 then in previous versions of the app. After design sprints and user sessions we were able to launch a refreshed product our users are happy with.

app of the day

Testing Concepts

As a designer your work is never finished. Based on some user feedback I wanted to test some concepts out to challenge our newest version.

The concept was to onboard the user by having them add some favorite surf spots located nearby. Once the user completed the onboarding we would return them to a map showing their favorite spots giving them the ability to toggle between seeing favorites and all spots. Our hope was that this flow would allow users to discover spots easily while keeping their favorite feature in tact.