Kelilah King Designs

Catch: Surf App for Apple Watch

Enabling surfers to catch the perfect wave

 

 

Overview

Problem: Surfers struggle to catch the perfect wave in the water. Surfers don’t have an ability to have current data on water conditions while they are in the ocean. A single mistake in your placement in the water can become tiring especially for beginner surfers. Not understanding the swells can also be a safety hazard for surfers just learning.

It can be scary when you’re not placed in the right area of the ocean surfing. If you don’t know what you’re doing out there you can get hurt, or worst injure others...
— Jack Taylor

Solution: The app forecasts swell recommendations for the user by utilizing forecast data from satellites, ocean wave models, sensors and reporters. It enables the surfer to position themselves in the water to provide detailed guidance on where to surf and catch waves.

LightBoneBlack2nike.png

My Role: Product Designer & UX Researcher

Design tools: Sketch | InVision | Illustrator | Photoshop | AfterEffects

Approach:

Research

Field observation | Task analysis | Interviews | Affinity mapping | Personas | Journey mapping | Competitive analysis

Design

Informed brainstorming | Sketching | Design Alternatives | User feedback | Wireframes | Interactive prototypes

Evaluate

Cognitive walkthrough | Usability testing

Design Outcome: Catch connects the surf community while educating users at all surf levels. Surfers can receive personalized advice from advanced ITO technology during their time spent in the water.

 

 

User Research

Through a series of primary research, I decided to focus on the user’s pain points and needs when they are searching for a perfect wave. As a surfer myself with connections, I conducted phone interviews and supervised surfers in the water upfront to understand their behavior in the ocean.

 

Field Observations: I surfed at four surf locations to observe surfers in the process of catching a wave. La Jolla beach in SoCal, Baja Mexico, Haleiwa in North Shore Hawaii, and Rialto Beach at the Washington peninsula.

I observed how surfers chose to position themselves for where to paddle and catch the swell. I analyzed how the surfers interacted with the changes in swells depending on low tide and high tide. I wen’t through the entire process with fellow surfers on observing the water, paddling out through the channel, positioning yourself where the swell breaks, and catching the wave.

 

Task Analysis: Based on the data I collected through these field visits and the exploration of finding the perfect swell, I created a task analysis for better understanding of the user’s pain points through different channels.

Task_Analysis_Catch_1.jpg

Interviews & Affinity Mapping: I conducted short-structured phone interviews with surfers who have apple watches. I also chatted with surfers at the various beach locations I visited to gage an understanding on the surfer’s struggles.

IMG_5688.JPG
 

Key phone interview highlights:

My biggest struggle is not knowing how the water is changing while I am in the water. Sometimes sneaker waves come in and knock you out.
— Roman Bulan
Usually I eyeball the time & duration of the waves while I surf but that can difficult at times when waves are crashing on you. Sometimes you don’t know when there are crazy currents or weird water activity happening especially on days with poor visibility.
— Nathan King
Researching which swell fits my level can be time consuming sometimes. Sometimes I want to be able to connect with other surfers already at the beach so I can know if the conditions are even worth driving out to since I commute far to the beach.
— Jason King
Sometimes I lose track of time out there in the water. It is important to remember to hydrate & reapply sunscreen for long surf sessions.
— Alyssa Blaine
 

Affinity mapping:

affinity_map2.png

I synthesized my results using affinity mapping and gained the following insights:

  • Water conditions is the most important factor to consider when choosing which beach to surf; a beach with poor surf conditions can cause an unsuccessful surf experience.

  • Novice surfers usually don’t know what to consider when selecting a beach to surf.

  • Surfers from a tight community are usually willing to help each other out.

  • There are dangers in the water that surfers want to be aware of, even if the surf is looking decent for the swell.

  • Health stability is important for surfers to succeed and be able to last longer in the water.

  • Surfers are generally reluctant to drive out too far beaches from their location if the swell is not good conditions. Such selection requires careful research beforehand, & people generally use mobile phones to conduct this research.

As a result, I decided to focus on Catch being an Apple Watch tool for surfers to access while they are in the ocean.

 

Personas: I created the following personas based on the data gathered from phone interviews and field observations. Since I decided to focus on designing in the Apple Watch interface, I created personas for users who utilize the watch.

Persona_Draft2.jpg
 

Journey Mapping:

Journey_map_1.jpg
 

Competitive Analysis: To further understand the problem I was trying to solve for the users, I researched whom other competitors are trying to solve the same problem. I focused on the top 5 platforms; Surfline, MSW Surf Forecast, Tides Near Me, Dawn Patrol, & Windfinder.

Here is the google link for the complete analysis: https://docs.google.com/spreadsheets/d/1c5Uffz015lQ9H1AP3-n5IwJZKJb8l1ttBqDXf0Eleg4/edit?usp=sharing

Here is the google link for the complete analysis: https://docs.google.com/spreadsheets/d/1c5Uffz015lQ9H1AP3-n5IwJZKJb8l1ttBqDXf0Eleg4/edit?usp=sharing

 

 

Design

Ideation: I decided to sketch out design ideas individually before coming together and presenting my ideas to my user stakeholders. Each stakeholder referred back to the users needs I had identified in the research stage to make sure the solutions I came up with were addressed for the users needs. Below are some individual sketches.

Catch_Sketches.jpg

Concept 1: In my first concept, I designed the screens with features that best fit the users need based off my synthesized analysis in my research above. This concept allows users to better understand and effectively find which beach they are searching for and the conditions of the waves. I also focused on creating a conditions screen for the user.

Concept_1:_Catch.jpg

Concept 2: In my second concept, I provided the users with more detailed map geo finding and health capabilities to connect to the Apple Watch health functionality. This concept helps users find swells by bringing the essential swell conditions front and center so the surfer can have an understanding if the beach is worth paddling out or not. Furthermore, I dived into creating a surf track time session, so the user can keep a catalog of their experience in the Apple Watch.

Catch:_Concept_2.jpg
 

Wireframes: I created the following wireframes in order to illustrate the basic functionality of the final design. The emphasis at this stage is still on functionalities rather than visual design, since my hope is to make sure the final design meets the users needs before refining the interface.

Concept 1 Wireframe: In this concept, I focused on designing the users basic needs which was geo location, conditions, water scan ability, and surf track time.

Concept 2 Wireframe:

Prototype 1: Based on user feedback, this first prototype received critiques on the colors not being visible while using in the ocean. The users requested that the prototype have more contrast with the ocean colors so the screens would be easy to use while surfing.

I also received feedback on the conditions needing more clarity and the map being too busy for the user. I worked on redesigning those screens to become more simplistic and concise.

 

Prototype 2: I designed the second prototype to be minimalistic and user friendly based off of previous feedback. This design focused on the detailing of the conditions and educating the user through community connection.


 

Final Product

Features

  • Settings allow for the app to be viewed in night function for evening surf time.
    • Login with user functions to keep track of your data & connect with the surf community.
    •Connect the GPS location for surf data accuracy on conditions.

  • Real updated data on swell duration, weather, wave height, wind, and water temperature.

  • Connects surfers globally for a community experience have reminders for re-upping on hydration and sunscreen.

  • Advanced ITO using AR functions to create a safe surf experience especially at night time.

 
 

Evaluate

LightBoneBlack2nike.png

Cognitive walkthrough: To evaluate the user flow of the app, I conducted cognitive walkthrough sessions with usability experts. I hoped to make the user flow, when translated into a digital survey, intuitive and easy to follow.


Each session, the user was provided with the context of the design and a task to guide their evaluation. I showed them the interface and walked them through the tool step by step.

I asked the following questions:

•Is this what you expected to see?

•Did this navigation help make progress towards your goal?

•What would your next action be?

•What do you expect to see next?


Some of the feedback I received:

•The colors are more clear and visible during a surf session

•The navigation from the map to the community was clear and concise

•The users felt they were making progress towards their goals of aligning the data with apple health and tracking their surf session


Usability testing: After further testing, I received additional feedback on next steps.

“It would be great to have data that further tracks, the surfs movements and stance on the board; a type of scanner that can analyze the surfer’s body movements.”

“Further capability to post your surf activity and session so the community would see, would be awesome. Perhaps there could be some sort of collaboration with Strava where you can post.”

”Perhaps if there was a way to connect to live surf cams around the world when you navigate through the beaches conditions, that could also be useful for the user.”

Further notes: I believe there is huge marketing collaboration with companies such as O’Neill & other surf brands. Apple, Nike, and Strava would also be great to work with for promotion of this technology.

CatchProtoype_02.jpg

PitchBook’s PlayBook Magazine

These are my PlayBook magazine illustrations and templates I built out for our news and analysis team. My process began with sketch iterations, feedback from the news writer, and then brought it to the digitized stage in Illustrator. Once the News team approved the visuals, I then built out the template spreads in Indesign.

I also worked with the Data analysts aligning on their goals for their infographic spreads in our Analyst Insight sections.

I facilitated the entire magazine spreads from start to finish. I was in charge of receiving all assets from our other designers, analysts, and news team. I was tasked to compile all the spreads together in Indesign and then submit it to our printers.

Spencerdinwiddie.jpg
Spencerdinwiddie2.jpg
Q3_2020_Private_Market_PlayBook_Digital.jpg
esports2.jpg
lettertoeditor.jpg
4Q_2019_Immigration_Nation2.jpg
Q1_2020_Analyst Insights_Wylie.jpg
Openingimage.jpg

PitchBook, Data: Emerging Tech

PitchBook, Data covers reports on select Emerging Tech Industry groups in the PE & VC industry. These report covers below are the social assets I created for their marketing campaign and promotions.

My process began with sketching and ideation, from there I received approval on the concepts by the ETR analysts. Once approved I moved my sketches into Illustrator where I worked on multiple concepts. After receiving critiques from my fellow design leads, I finalized the concepts and moved them into our Indesign report templates.

Finally, I created various social card sizing for the market team to promote on LinkedIn, Twitter, Instagram and our Newsletter.

AIML social cards_420x200-newsletter.jpg
AIML social cards_1200x630-social.jpg
Infotech social cards_420x200-newsletter.jpg
Infotech social cards_1200x630-social.jpg
Infotech social cards_420x200-newsletter.jpg

 PitchBook, Data: Report Covers & Infographics

Below are some past infographic and report cover designs I designed for our clientele and analyst reports. The tools I utilized working on the infographics was Illustrator, Photoshop, and Indesign.

My process typically begins with me sketching out the ideation, seeking approval from our clientele and analysts, and then moving it into the digitized softwares for finalization.

ChicagoNext_Social_Infographic_Final_FINAL.jpg
PitchBook_Benchmarks_as_of_Q1__with_preliminary_Q2_2020_data 1.jpg
PitchBook_3Q_2019_Global_League_Tables.jpg
PitchBook_2019_Annual_Global_League_Tables.jpg
PitchBook_2019_Annual_Global_League_Tables.jpg

Kelilah King Designs