UX/UI Design | December, 2018

Nalu.live

The History of Surfing, A Collective

MFA Thesis Project | Case Study

Live WebSite
Github Repo
My Role
User Research, Definition & Ideation, Wireframing, Prototyping, Usability Testing
Tools
Adobe XD, Sublime Text, ScrollMagic JS, FileZilla, Photoshop, After Effects, Google Docs,
Timeframe
Multi-Semester Thesis Project
Nalu.live provides an interactive way for surfers and non-surfers alike to learn about the history of surfing and how surf photography has been used to promote the sport while becoming an art form of its own. Current websites about the history of surfing tend to be static and text heavy, forcing the user to slog through long sections of text. Nalu.live is an educational site with a documentary feel, communicating with users through photos, infographics, and video to provide a modern, fun, informative, interactive experience.

Problem

Most websites focused on the history of surfing attempt to present a historical account of the sports evolution, however, many are text heavy requiring the user to sift through paragraphs of dates and names to find useful information. Many sites strictly journal events without highlighting the historical trends in the sport and fail to include much information on present day surfing events.

Solution

Create Nalu.live with interactive media, infographics, video and photos to help users learn about the history of surfing. Local surf museums, photographers, books and the Internet were sources for historical content. More recent events have been included to highlight the progression of the sport as well as interviews with surf photographers to get their take on how advances in photography have changed the sport of surfing.
I’ve been drawn to the ocean my whole life. It’s where I can clear my thoughts and gain perspective. It’s confronted me with every emotion a human can experience, taught me how to harness them and shown me how to appreciate life on land.

I spent the majority of my twenties traveling the world and surfing. Working long enough to earn travel money, then I was off on another adventure.

One thing I’ve struggled with is communicating how important surfing is to me and why. I saw the chance to tell the story of how it all began and show what it means to me in this thesis project about the history of surfing and surf photography as an amazing opportunity.

I believe successful design tells a visual story. My experience and knowledge of the sport of surfing and photography provide the user with unique insight into the sport and the medium to illustrate how the two compliment each other.

User Research

The surf industry generates an estimated $7 billion a year and serves roughly 23 million surfers worldwide. According to the "Socioeconomic and Recreational Profile of Surfers in the United States" of 5,360 surfers - 90% were male, the average age was 34, 62% had earned bachelor's degrees and earned $75,000 annually.

While a lot of effort was focused on selling the commercial aspect of the sport, far less was placed on communicating its rich history and culture. I conducted research on existing websites on the history of surfing to identify where they were lacking information and how the designs could be improved.
Comparative Product Matrix
As the table above shows, many sites lacked historical timelines, videos, infographics and interviews. I conducted further analysis of the 'Surfing for Life' website:
Pros:
  • Seems to be well researched
  • Featured resource by many prominent news outlets
  • Spans several early decades of surfing
  • Photos and illustrations of early surfers
  • Related to a film focused on the benefits of health benefits of surfing
Cons:
  • Text heavy
  • Not interactive
  • Static (not responsive)
  • No video and the photos cannot be enlarged
  • Captions are small
  • Navigation is very small and off to the right side of the page. Not intuitive
  • Pagination is also small, hard to find / use
Proto-Persona
Prior to any design work, I created proto-personas like the one below to establish initial assumptions about our potential users and what they would be looking for in a website about surfing.

Ideation

Branding / Logo
Starting from notebook sketches (top left) I began to exploring how I envisioned the logo for Nalu.live to look. I wanted something unique, unlike typical imagery seen with ocean websites.

I arrived at the stylized image of the wave with the circle behind it to symbolize the setting sun. To me, this encapsulated the experience of surfing in one simple, elegant image.
Final Logo
Logo Clearspace
Typography
I paired the dynamic Raleway font for headings and subheadings with the classic and readable Source Sans for body copy.
Color Palette
The goal with the palette was to stay close to ocean colors while using plenty of white space to let the colors in the photography pop.
Moodboards
Problem Statement:
How might we make learning about the history of surfing more interactive and enjoyable for users so that they feel engaged and inspired to learn about how the sport began and how advances in surf photography have influenced the sport?
Concept Video
Feature Prioritization
Using the mind map and "Who, What, Where?" format, I explored the range of features I wanted to include in the final website.
Information Architecture:
Based on the mind map, I built out the information architecture for the site. I had considered using a database to store user profiles and surfboard information, but opted to keep it simple:
From here, I crafted the potential user scenarios under which the typical user would come to the site and what they are trying to accomplish.
Storyboards:
User FLows
I developed user flows to map out each step a user would take to solve the problems outlined in the storyboards.
User FLow - Task 1
Learn a historical fact about Surfing.
Success Scenario:
  • From the home page, user hovers over ‘Timeline’ in the main navigation menu
  • User then clicks: "1900's' from the dropdown
  • User clicks on the first modal and learns that surfing, as we know it, began around A.D. 1,200
  • Task complete
User FLow - Task 2
Find an interview with favorite photographer.
Success Scenario:
  • From the home page, user clicks the ‘Photographers’ page link in the main nav menu
  • User scrolls down to ‘Local Photographers’
  • User clicks on on a photographers name and a modal pops up with a link to an interview with that photographer
  • Task complete
User FLow - Task 3
Learn about the evolution of surfboards.
Success Scenario:
  • From the home page, user clicks the ‘Equipment’ page link in the main nav menu
  • User scrolls down to ‘Choose a Board to View’
  • From here, the user can browse numerous surfboard designs from each decade of surfing
  • Task complete

Wireframe / Prototype

My goal with this site was to use imagery as much as possible to visually communicate content. Some text would be necessary of course to outline historical facts, but I tried to balance out the two.

Final Mockups:

Technical Process

Live WebSite
Github Repo

Image/Content Preparation:

Images not contributed directly from local surf photographers were obtained from the Surfing Heritage and Culture Center, a surfing museum in San Clemente, CA. The museum houses over 700 surfboards and features a chronological surfboard display with 100 boards dating back to the beginning of the sport. The museum granted me access to the hi-resolution photographs of all of the surfboards as well as the details about each board that were stored in the museum’s database. Surfboard construction date, size dimensions, weight, time period the board was used, who donated the surfboard, etc. There was, however, no organized file-naming convention that was used to link the database information to each hi-resolution surfboard photo - so I had to create one.
I culled the details for the 100 surfboards on display in the showroom from the museum’s database into an Excel spreadsheet along with (when available) a low-resolution thumbnail image of each board. I then physically matched up the low-res thumbnail images from the database with the corresponding high-resolution image of the surfboard (300 files - front/back/side images) and applied the serial numbers from the database to the filenames of the high resolution photos. I then formatted all 100 of the frontal images. This process of cataloging and formatting images took approximately eight weeks.
The final images were used in the surfboard equipment grid / modals as well as the evolution of the surfboard animation which can be seem in the hero image of the Equipment page.

The museum also provided access to two photographer’s collections, Warren Bolster and Tom Blake. This amounted to over 400 image files of various surfing related content used to create the rest of the imagery for Nalu.live.

Historical Text Content:

All of the historical text content used for the surfing Timeline infographic and in other places on the site came from Matt Warshaw’s book “The History of Surfing” with his expressed written permission. I reached out to him via email, explained my project and he was very generous to allow me to use his text.

Main Code Framework:

Nalu.live uses Bootstrap as its core layout framework, along with HTML, CSS, Javascript and jQuery. PHP include files have been used to create header and footer templates, and Flexbox was used to build the row content. There are some sections that were hand coded or <div> based in order to achieve the layout that my Visual Design called for. The site is fully responsive and easily viewed on mobile devices. Some of the longer description sections were hidden on smaller devices to maintain design continuity.</div>

Interactivity:

  • The core MVP of Nalu.live - the Timeline infographic - was produced using CSS and the jQuery.each() function to animate the timeline blocks toward the center of the viewport as the user scrolls down-screen.
  • The Timeline page itself has a vertical anchor tag navigation on the left side, allowing users to quick-jump to specific time periods. Similarly, there is a back-to-top button in the footer to eliminate unnecessary scrolling.
  • The Bootstrap modals have pagination built-in, allowing the user to scroll through page elements without having to close the modal, providing a smoother UX.
  • The Scrollmagic.js library was used to add fade animation elements as well as parallax scrolling, which can be seen on the homepage.

Usability Testing

3 rounds of usability tests were conducted with 5 users each using a combination of the Concurrent Think Aloud (CTA) method and the Concurrent Prodding (CP) moderation method. Users were asked to complete the user flow tasks outlined above.
Features Users Liked Best:
  • Dynamic Timeline layout
  • Multiple ways to get to the Timeline
  • Overall premise of the project - aesthetically pleasing colors / imagery
  • Auto scrolling hero slides on homepage
  • Overall clean layout
Features Users Liked Least:
  • Modals weren’t obviously clickable - (fixed)
  • It’s not easy to close the modals - (fixed)
  • No ‘Back to Top’ button at bottom of page - (added)
Iterations Based on Testing Feedback:
During earlier testing, users didn't seem to realize the website would scroll. To indicate there was more content below the fold, I added an animated down arrow below the hero image.
Before Arrow Added
After Arrow Added
Testers indicated they wanted to see details about each photographer more prominent on the image before the section was clicked. I added an on-hover overlay that covered the section to make it more prominent.
Before Overlay Added
After Overlay Added
Testers commented that the timeline modals did not have any information about the event to inform users before they clicked on it. I added the event title and a short description to the modal so users could decide which event they wanted to learn about.
Before Event Details Added
After Event Details Added

Conclusion

Surfing has a rich history rooted in photography. Good surf photography can convey many of the emotions and feelings of actually surfing. Good surf photos tell a story and many accurately document historical events from the sport’s time-line.

Much of my life has been dedicated to surfing as well as photography. This thesis project has been my opportunity to share my passions and tell the story of how the sport of surfing began through photos, video, and other visual mediums.

I believe successful design tells a visual story. My experience and knowledge of surfing as well as my expertise in design and photography have provided Nalu.live users with unique insight into the sport of surfing, it’s historical connection to visual media and how the two continue to compliment each other.

- Previous Project -
Corporate Website
Redesign
- Next Project -
Cultural Tourism
Mobile App

Steve Dillon

Creative, problem-solving, Senior UX Designer working with industry leaders, agencies, and start-ups.