PROJECT OVERVIEW
Swell Hound is a customizable surf forecast application that allows surfers to check surf conditions, create surf spots and log surf sessions. My role was to research, design, and test UX & UI solutions to execute Swell Hound.

PROCESSES: User Research / Competitor Analysis / Persona Development / Information Architecture / Paper Prototypes/ Wireframes / AB Testing / Accessibility
​​​​​​​TOOLS: Interviews / Survey Monkey / Optimal Workshop /Adobe CC / Sketch / Invision /Balsamiq /Pen & Paper

PROBLEM STATEMENT
"Hardcore surfers need a tool that will make it easier for them to access the different data based websites and charts they need to check before deciding where and when to surf. They want to save time without skipping from website to website and they want the nitty-gritty details and all of the data they can possibly need, this includes everything from cameras to charts".
USER RESEARCH
The first step was to gather and interview ideal users so I could test my assumptions and get to know them better. Interviews were conducted in person and on Skype. Among other things I wanted to know:
What sites or apps do they use to check the surf and how and when they use them?
What information do they value the most when it comes to forecasting?​​​​​​​
PERSONAS
Interviewing ideal customers gave me a better idea of who am I serving. Now, I can create personas to help me empathize with the user in each step of the creation process. I can now laser focus my efforts to try to improve the experience for these particular fellows.
USER JOURNEY
By defining the motives, emotions, and actions that drive the user to interact with Swell Hound I was able to start building a roadmap for how users will interact with the product. 
This creates the foundation for successful user flows. How is my user feeling in each step of the process?
INFORMATION ARCHITECTURE
WIREFRAMES EVOLUTION
Now it's time to translate the flows into wireframes. Paper and Low Fidelity wireframes were tested in-house with the stakeholder's other members of the team in order to fix preliminary issues before moving on to Mid Fidelity wireframes that potential users could test.
This first rounds helped me ensure everyone involved in the creation of Swell Hound is on the same page as well as catching mistakes in the flow and even copy. 
Mid-fidelity wireframes were created on Sketch app and translated to Invision to make them interactive and ready to be tested by real users. This incremental changes and advances in the design ensure the creation process is moving forwards & testing assumptions in every step. These prototypes are ready to be tested to keep iterating.
Paper Prototypes
Paper Prototypes
Digital Low-Fi  Prototypes
Digital Low-Fi Prototypes
Mid Fidelity Prototypes
Mid Fidelity Prototypes
USABILITY TESTS
5 participants were recruited and underwent testing. Most of the tests were moderated in person, one was done remotely.
The goal of this study was to analyze the pain points the app creates for the users, to see what was the level of difficulty for them to perform the main tasks the app offers and to gaze the level of engagement with what Swell Hound offers them.
I analyzed the findings using Affinity Maps and a rainbow spreadsheet. 

CONCLUSION
I conducted A/B tests with 11 users. None of the screens tested had more than a 60% approval. Because of the margins being so small the results were statistically ambiguous. What I did next was comparing comments and taking insights from there using my own perspective as a designer. That’s how I combined what the users pointed out into new designs. Screens were re-tested. Approval percentages were now 85% or more for some screens.
A/B TESTING 
With a better idea of what makes the users tick and what turns them off, I started working on the final design and the Style Guide.
While doing so, I conducted A/B tests as well as peer reviews to ensure I don’t get sidetracked and I’m still building considering our users and business goals.
Incremental, tested and analyzed evolution was the goal. 

CONCLUSION
I conducted A/B tests with 11 users. None of the screens tested had more than a 60% approval. Because of the margins being so small the results were statistically ambiguous. What I did next was comparing comments and taking insights from there using my own perspective as a designer. That’s how I combined what the users pointed out into new designs. Screens were re-tested. Approval percentages were now 85% or more for some screens. ​​​​​​​
STYLE GUIDE
The purpose of this style guide is to unify the look & feel of Swell Hound so that the users can have a seamless experience while interacting with it.
This Style Guide was inspired by geeky surfers and its rooted in Southern California surf culture. It is laid back, fascinated with open spaces, simple yet also highly efficient and driven. Swell Hound exudes a sense of calculated freedom.
FINAL USER INTERFACE
Search & Conditions Charts
Search & Conditions Charts
Onboarding
Onboarding
Login / Password Reset
Login / Password Reset
Create Account
Create Account
RESPONSIVE DESIGN
Because the Swell Hound users are always checking conditions and surf reports while at work, it is important to translate our designs into a desktop view. Our adventure driven individuals need to have an app that adapts to their versatile lifestyle.
Want to know more about Swell Hound? 
Take a look at the Invision interactive prototype or check out the Style Guide.
Back to Top