OVERVIEW
This project stemmed from an online design course. The course provided a mentor for feedback and guidance. Generously my mentor stuck with me after the course and has been guiding me through this project to a fully realized prototype.  Throughout the project my mentor not only provided guidance but also acted as the client giving feedback on deliverables. 
CHALLENGE
Surfing apps on the market today do a great job of informing surfers wave conditions. They don't do a very good job tailoring to how difficult it can be navigating new surf spots. Some questions arise when a surfer wants to surf a new spot:
"Where do i park?"
"Where should i enter the water for easier paddle out?"
"Are there any water hazards to watch out for?"
"How do waves behave at this location and what do they look like?"
If you don't have many contacts in the surf community this can be especially hard to research. Current apps and web pages don't always provide this information. You have to go deep into forums and most of the time you come out empty.
SOLUTION
I designed an app that answers those logistical questions using wave location profiles and a community section. The app facilitates surfer's connections and communication helping build their surf knowledge.
PROCESS
Using the double diamond approach I set out to check and refine my problem statement and design the solution right. Using divergent and convergent thinking I was able to remove bad ideas and keep good ideas.
DISCOVER
User Interviews
In this stage, my goal was to empathize with the users and understand what the problem is I'm trying to solve.  I interviewed 5 surfers of different ability levels and experience.  I also created an interview script ensuring I knew all the topics I wanted to cover.  I documented my findings using post-it notes.
DEFINE
Synthesis
Moving into double diamond stage 2 I started by synthesizing the interview data. I arranged the post-it notes into clusters and themes.  This allowed me to see the common problems the users were having and allowed me to draw key insights.  The insights are problem statements in the form "Surfers 'issue' because 'reason'".  I represented the insights using a different color post-it note (red seen below).
HMW Questions
Using the insights I created how might we (HMW) questions. The HMW's translated the problem statements into a question. 
For each of the HMWs I then asked the perennial question "Why" and if unsatisfied continued asking "Why?". This tactic helped to find the root cause of each problem.
I then brainstormed each of the HMW's with the question "Whats stopping us?". This further explored any issues that could arise while trying to solve the problem.
Personas
From the synthesized data I brainstormed needs, motivations, and frustrations that surfers experience. I then identified roles which I based on ability level and years experience. Then mapped them to the needs/motivations/frustrations. The roles I identified included
The 'Beginners'
The 'Weekend Warrior Veterans' (typically stays near home)
The 'Travelling Veteran' (comfortably travels)
I then developed the roles into three personas.  For each of these personas I created a set of behavioral variables based on all the synthesized data. These variables take into account the personas activities, attitudes, aptitudes, motivations, and skills.
Each persona was fitted with a face, background, behaviors, frustrations, and goals.  This allowed me to easily represent ALL the users of the app.
User and Job Stories
Using the personas I drafted user and job stories. These helped me to capture the non verbal dialog between the user, environment, and system over time.
I drafted the user stories in the form:
As a ____ I want to ____ so that _____. 
I drafted the job stories in the form: 
When _____ I want to ______ so I can _____.
DESIGN
Synthesis
Moving to double diamond stage 3 I started by synthesizing the user and job story data. First brainstorming possible solutions for each of the user and job stories. Then arranging all the stories and brainstorm data into clusters and themes. This produced top level experiences:
Account Profile
Wave Database
Live Stream
Communication
To meet the personas expectations these experiences had to be included in the app in some fashion. This serves as the starting point for the design framework.
Design Framework
Using all the synthesized data above I was able to define all of the experiences needed to fit the persona's needs.  As well as all the functional and data elements.  This also served as the basis for coming up with the blank wireframe screens shown later.
Flow Diagrams
Next using the design framework I created a series of flow diagrams demonstrating the interaction design. The flow diagrams demonstrated the 'Happy Path' for various user experiences. This made it clear the base level of various screens needed.
Wireframing
Using the design framework and flow diagrams I created all the wireframing screens in sketch app. Initially, they are all blank only used to demonstrate all the screens the app requires at a basic level. I used a hierarchical naming structure to show the experiences flow. This also helped to not miss any screens. Naming structure as seen here.
My Account > Default > Create Account > Upload Profile Picture > From Camera
My Account > Default > Create Account > Upload Profile Picture > From Library
Explore Surf Breaks > Default
Explore Surf Breaks > Default > Browse Map
Explore Surf Breaks > Default > Browse Map > Search
Explore Surf Breaks > Default > List
Explore Surf Breaks > Default > List > Search
At this stage I was able to start wireframing.  I started by loosely sketching screens on paper.  It was easy to explore various solutions being in only pen and paper at this stage.  The notes in red seen below correspond to where the screen falls in my naming hierarchy.
I then transferred the best sketched ideas to a digital format using grey scale.  It was easy to organize as the screens are already organized in a hierarchical naming structure.  I remained in grey scale ensuring the styles of the screens was consistent.  Also making different styled versions I could present to my mentor for feedback.  Together we settled on the best looks and themes.
DELIVER
Prototyping
At this stage I came up with a low fidelity prototype using my wireframes in Sketch and Invision.  The prototyping allowed me to demonstrate the interaction design to my mentor.  This gave him a clear picture of how I intended to design the app.  Together we were able to improve on the following
Any issues involving consistency: symbols, language, type
Adding buttons like back, apply, revert to improve user freedom
Element placement
High Fidelity Screens
Once I finalized all the adjustments to the wireframes it was time to start adding color. Throughout this process I kept an organized symbol library ensuring consistent design. I got continual feedback from my mentor involving color, type, sizing, placement, and styles.
Once all the adjustments were made to the Hi-Fi screens I demonstrated the final design through high fidelity flow diagrams and a prototype to my mentor.
Back to Top