SURF PRESCRIPTIONS.COM

  • ROLES:

    Graphic/UX Designer, Developer, Writer, Researcher

  • TEAM:

    Me, Myself, and I

  • GOAL:

    Create a brand new responsive website for Surf Rx Surfboards that reflects the high quality of their work

  • TOOLS/SKILLS USED:

THE PROBLEM

As of May 2016, the old Surf Prescriptions website had pages that still said "coming 2013" and was not responsive at all. It was found that people did not trust his website to be up to date and have reliable information on it. Being the iconic international brand that Surf Prescriptions Surfboards is, it is essential that they have a website that reflects the high quality work they do.

THE SOLUTION

Because his website was beyond repair, we decided it was best to start from scratch and build a brand new up-to-date responsive website that showcases Surf Prescriptions Surfboards as the high quality boards that they are.

SITE REQUIREMENTS

Need a way for people to check out what's current with Surf Prescriptions

Need a way to get in contact with Doc to ask about and order boards

Need a way to look at his board models with multiple views

Need a way to see where someone could go get Surf Rx boards

WHO IS THIS FOR?

After interviewing Jeff "Doc" Lausch, the owner/head shaper of Surf Prescriptions, and looking through his instagram to see what kind of people order his boards, I created two personas of his target market. The personas were used to help guide the design by giving me fictional people that I could design for that represented different segments of the real target market.

Check out the personas below!

Meet Ollie

click to view Ollie's persona

Meet Mark

click to view Mark's persona

COMPETITION/INSPIRATION

Once the target audience was established, I looked into Surf Prescription's competition to get a feel for what other shapers were doing with their websites. This was done to see what other websites the target audience would visit when they are looking for a new surfboard. Knowing this information lets me know what features the target audience expects to see on a surfboard shaper's website and how to make Surf Prescription's website stand out from their competition. Here are a few screen shots of the competition below.

  • Lost surfboards
  • channel islands
  • t-pat

Doc described the feel he wanted from the site as kinda hipster and artsy. Here are some of the websites I used as inspiration to get that feel.

  • album surfboards
  • white frontier
  • quiksilver

COMPS

After sketching some layout ideas on paper, I created some comps using Photoshop

VERSION 1

surf rx comp 1 home surf rx comp 1 home

VERSION 2

surf rx comp 1 home surf rx comp 1 home

USER TESTING

I chose the second layout because it had the best response after doing some mock user testing with my fellow Cal Poly GrC peers. After the screens were created using photoshop, they were used to create a prototype using InVision.

Five different users were tested ranging in age, sex, and surf experience

Findings

  • The left navigation bar is intuitive and easy to use
  • The initial landing page is not necessary becuase it serves no functional purposes and makes the users click more than they need to
  • Users look for prices but find none
  • Users Enjoy having multiple ways to navigate to pages especially on the home page
  • The shop's address and phone number are not on the website
  • It would be nice to have the addresses as links to google maps so users don't have to copy and paste text

FINAL WEBSITE

Once I got the photos of the boards ready for the site, I coded the website using HTML, CSS and some JavaScript. Check out the website at SURFPRESCRIPTIONS.COM

final surf website design

FUTURE IDEAS

  • Team Riders section once there is enough content for bios and media (videos and pictures)
  • What's New blog style page - Ideally something Doc could post himself from his computer
  • Have instagram thumbnail image be the latest post from Doc
  • Pricing Guide page so customers have an idea for how much a custom board would cost

REFLECTION

WHAT WENT WELL

  • The new website is unique from other shaper's websites and captures the hipster artsy feel that Doc wanted
  • The navigation was well liked by all users testing the website
  • The user testing was extremely helpful in pointing out things that the users expected to find on the website but were not there, like the address and phone number of the Surf Prescriptions shop

WHAT CAUSED SOME ISSUES

  • Communication with Doc took a lot of effort because we were doing all of our meetings over the phone and email
  • There were not too many digital assets, like photos of all his board models, to work with starting out so I had to create them and communicate with Doc what specifically I needed from him
  • I coded the entire desktop version of the website before other breakpoints making it difficult to go back in and make the website responsive

WHAT I LEARNED FROM THIS PROJECT

  • CONTENT DRIVES DESIGN - Because we started from scratch, we had very little content which made designing difficult, so I learned I need to get the content before designing so the content can drive the design
  • CODE ALL BREAKPOINTS BEFORE MOVING ON AND START WITH MOBILE - I had to go back and redo a lot of my coding, especially the CSS, to get the website to be responsive, which was much less efficient than doing all the breakpoints at once
  • COMMUNICATION IS KEY! - By being clear with what exactly I needed from Doc, I was able to get all of the assets we needed for the website and on the flip side, it took a long time to get certian things from Doc because I was not as clear about what I needed from him
  • HAVING A WRITER WOULD BE A HUGE HELP - It took me a lot longer to write all of the board descriptions and the about me page than it would take someone that specializes in writing