SURF

LOOK
A new kind of surf report

Foundational Design
SITEMAP
SURF LOOK SITEMAP
LOW FIDELITY
WIREFRAMES &
PROTOTYPE
SURF SPOT
SEARCH
SURF LOOK SURF SPOT SEARCH - MOBILE VERSION

On any page of the app that is not a
modal, the user will see a search
icon. If the user clicks the icon, it
opens up a search modal.
On the search modal, users can click to
access location services or input the data
they want to search. Clicking ‘X’ returns to
page previously on, or click ‘search’ to run
a search.
If a user clicks on a surf spot, they
The search results show all results, will be taken to the main page for
but users can further filter results if that surf spot with links to all
they wish. options.
SURF LOOK SURF SPOT SEARCH - DESKTOP VERSION

The search bar is always available in the

header on the top right of the site. If a user
starts typing in it, it expands to full width and
provides more search parameters the user
can use to narrow down their search with.
Once everything is set how they like it, the
user can click search and be taken to a page
with all results.

On the search results page, users can start

typing again if they want to search something
else and it will act the same way it does in the
previous slide, or they can click on a surf spot
that interests them and be taken to that page’s
main surf spot info page.
HOME PAGE
 SURF LOOK SIGN UP/LOG IN, END ON HOME PAGE- MOBILE VERSION

Start here

Log in
Sign Up

For this sequence, a user can choose to either

log in or sign up from the splash screen. Users
who are already logged in go straight to the
home page. If a user logs in, they can either
login or reset their password. New users signing
up are taken through an onboarding flow that
explains how things work and then invites them
to set up the basics of their homepage so they
can get better recommendations, although
users can choose to skip these steps if they so
choose, in which case they will go to a blank
home page encouraging them to set up their
preferences.
 SURF LOOK SIGN UP/LOG IN, END ON HOME PAGE- DESKTOP VERSION

Sign up and log in are much like they Users always have the option to X out
are on mobile. User is taken through during this process and just go straight
short info session and then prompted into the site. However, they are
to set up their profile. If at any time they prompted to complete their profile and,
choose to skip, they will get an later, to favorite some surf spots, so they
incomplete home page, as shown on can get personalized recommendations.
the bottom right. Otherwise the flow Since users can search and view reports
ends at the home page with some offline, the logged in version is mostly for
recommendations. personalization.
SURF SPOTS
SURF LOOK SURF SPOTS- MOBILE VERSION

On the surf spot pages, the tiles all link out

to sub-pages with more information. Users
can always click the back arrow to return to
the main surf spot page.
SURF LOOK SURF SPOTS- DESKTOP VERSION

This is a simpler example, because everything on the surf spot page on desktop links to a sub-page that looks like this, on the right, with all of the
information. There is a link on the top left that will always link the user back to the main surf spot page whenever they want to go back.
HIGH FIDELITY
WIREFRAMES &
PROTOTYPE
MOBILE
FEATURES
MAIN FEATURES
Mobile Onboarding
Takes users through sign up, login, password reset. If user signs up, they go through the onboarding
screens as well as a short survey which helps the app recommend appropriate surf spots to
users.

Mobile Search
Users can search for a surf spot using a variety of parameters.

Mobile View Surf Report

Users can view the surf report for any surf spot and view details.

Mobile Surf Spot Features: view details, driving directions,

webcams, and more.

Mobile Misc. Pages

Desktop Screens
SURF LOOK MOBILE ONBOARDING
SURF LOOK MOBILE ONBOARDING
SURF LOOK MOBILE ONBOARDING
SURF LOOK MOBILE SEARCH
SURF LOOK MOBILE VIEW SURF REPORT
SURF LOOK MOBILE SURF SPOT FEATURES

Driving Directions
SURF LOOK MOBILE MISC. PAGES
SURF LOOK MOBILE MISC. PAGES
DESKTOP
FEATURES
SURF LOOK DESKTOP PAGES
SURF LOOK DESKTOP PAGES