Hang 10
How to provide accessible and easy-to-understand weather data for surfing enthusiasts?
Career Foundry Course
UX Immersion Program
Sole UX Designer and Researcher
Tools
Contribution
My Role
Project Type
User Research
Wireframing
Prototyping
Accessibility Design
Interaction Design
Figma
Miro
Project Duration
4 months
Overview
Project Context
This project was the main focus of my UX Design bootcamp through Career Foundry. The direction of the prototype was shaped via mentor guidance and loose development criteria through the bootcamp curriculum. All of the research and design work was carried out and implemented by myself and critiques were provided by an industry mentor as well as an industry tutor throughout the course, giving helpful tips on the research and designs that I had carried out.
Background
As our lives get busier it is harder and harder to find time for what makes us happy and meet up with friends. When we plan something, it is imperative that we are able to fit it into our lives and it isn’t canceled by forces out of our control such as weather or safety concerns. Through personal experience living on the East Coast and also having a brother who surfs on the West Coast, looking into the surfing app market steered the focus of this project.
For these reasons, this project wanted to explore the question…
How do surfers plan surfing trips around their schedules, the weather forecast and any other safety factors?
High-Fidelity Preview
Surfing Calendar Page
Friends List Page
Live Weather Forecast Map Page
Home Page
Profile Page
Research
It was imperative to understand the space in the market and our potential user base. Two major potential competitors were identified within the market space. The first of these was Windy.app, which is focused on a live weather map that offers real time visual data to the user. The second was Surfline, which uses live web cams at beaches for surfers to verify weather conditions through a clear picture. Surfline also had bought out a service called MagicSeaweed, which multiple users had expressed preference for over Surfline.
Major Market Competitors
Our User Base
To reach out to our potential user base, surveys and interviews were utilized in conjunction with each other. Both of these methods revealed that a majority of our potential user base consists of casual surfers who surf 1-3 times per week on average. Additionally, they already used Surfline as their main app but were not satisfied with the UI or price overall. Our users also expressed their frustration over trying to plan surfing trips with friends.
Shaping the direction of our prototype by asking…
How might we make it easier for our users to plan surfing trips with friends while avoiding an exorbitant price tag and over complicated UI?
User Personas
Based off the user research we created two user personas to guide our development of Hang 10, and to keep our users at the center of the process.
Age: 24
Job: Paralegal
Status: In a relationship
Pronouns: She/Her
Location: Maine
Mia Varo - The Casual Surfer
About
Mia has a busy work schedule, with her paralegal work. She tries to fit in surfing, yoga, and other physical activities around her demanding work schedule. She loves staying active and tries to pair it with social time, whether with close friends or her partner.
Goals and Needs
Staying active around busy work schedule
Spending time with friends
Wants to work on her mental health through balancing work and physical activity
Pain Points
Dislikes how much her current surf forecasting app costs
Has a hard time making it to the beach some weeks because of her busy schedule
Dislikes surfing alone
Quotes
"I usually surf once a week before work to squeeze it into my schedule.“
"I always surf with friends or my partner because I get intimidated by the lineup."
Age: 34
Job: Contractor
Status: Engaged
Pronouns: He/Him
Location: California
Ryan Ames - The Surfing Enthusiast
About
Ryan is a contractor living in Los Angeles, California. Often times Ryan’s job takes him all around the L.A. area, so after finishing up on a job he likes to catch a few waves at the beach afterwards. With such a physically demanding job he finds surfing helps him stay active and fend off back pain. He can also be found out and about often, socializing with friends and exploring new spots in the L.A area.
Goals and Needs
Staying physically active to help with chronic pain
Surfing locally as well as organizing trips up and down the coast of Southern California to catch the best waves
I want to catch the biggest and best waves I can
Pain Points
Finds it difficult to coordinate with friends when making plans
Find it difficult to track down the perfect wave in also uncrowded areas
Quote
"I love surfing with friends but often too much of a heavy lift on the coordination front. Everyone has their own responsibilities and obligations, trying to fit surfing in around jobs and social lives. I often will surf alone just because that is how it works out."
Design Iteration
Sitemap
Before creating wireframes and prototypes, it was important to create a sitemap to better understand the flow of what our product will look like and to ensure it will touch on the features that we have identified our user base has interest in or need of. Below you can see the updated sitemap after performing a card sort and reaching out to our user base to test their expectations of which features would reside where in our application.
Wireframing
Wireframing focused on the potential rough layout of the home screen, the search screen, and the social page of the application. These were the basic building blocks of our app prototype.
Home Page
01
Search Page
02
Social Page
03
Prototyping
Low to high fidelity prototypes were created based on the wireframe, focused on narrowing in on the users’ needs and goals from the prototype. The first high fidelity prototype stage that we reached had four main pages: home, map, social, and profile as well as a search page.
Login Page
Home Page
Profile Page
Search Page
Social Page
Map Page
At this stage of the process, we had created a framework for users to save their favorite locations and see live updates concerning surf details on their home page as well as view the 10-day weather forecast for a specific location and any surf related news. A live weather map that they can filter to view certain conditions. The users have access to a social hub for planning surf trips with their friends in addition to being able to add their friends and message them.
To note here as well, the format of the information contained within the “favorites” section of the home page and also the information shown in the search page is loosely modeled after the late MagicSeaweed. This is a service that was mentioned in the market competitors section, as our user base had expressed their preference for MagicSeaweed’s UI over Surfline’s UI.
Usability Testing and Refinement
Users
We tested our first clickable prototype with 5 potential users of our application as well as 1 outlier who works as a front end developer. The 5 potential users included individuals who had surfed once or twice before all the way to individuals who surf multiple times a week when the weather permits.
Indirect Test Script Question
Before entering into any tasks for usability testing, we asked them the following:
“Spend some time looking over the home screen. Without clicking anywhere just yet, can you tell me your first impressions? What you like and don’t like, what you think about the information displayed on the page, or any other thoughts you might have? Remember to think out loud as much as possible.
Now that you’ve taken a look at the Hang 10 app, can you tell me what you think the purpose of the app is?”
Tasks
For the first task, we had the users open up the app and follow the process for signing up for an account and the onboarding process.
The second task was to add a beach to their favorites on their homepage so they could track the weather there throughout the day.
The third and final task was to plan a trip with a surfing friend via the calendar.
The Results
01
Confusion around onboarding (Rating Medium)
Suggested Change: A screen between sign up and onboarding stating that the user will be shown some key features of the app and then a banner at the top of the onboarding screens reiterating this as the part of the process the user is on.
Evidence: One of six participants were confused at first what the onboarding was before understanding it was documenting the features of the app. Other users understood but it took them a second to realize they had moved on to a new section.
02
Participants expected a back option from the search function (Rating Medium)
Suggested Change: Implement a back arrow that appears in the top left of the screen when the search bar is selected so the user can easily back track.
Evidence: 5 users looked for a back arrow after searching a location in the search bar and adding a favorite to return to the home page.
03
After adding a favorite, participant was looking for a confirmation notification (Rating Medium)
Suggested Change: When the user navigates away from the screen where they added favorites, have a success notification letting them know a location or locations were added to their favorites.
Evidence: One of our users found this flow needed something to notify him that he had been successful in adding a location to his favorites.
04
Flow for adding a favorite was not clear (Rating High)
Suggested Change: Gives users the option to search and add a favorite in three locations: by the favorites menu location, the search bar, and from the map tab.
Evidence: All participants navigated to the gear icon by the favorites section to add a favorite and not the search bar.
05
Participants were unsure where the calendar was located (Rating High)
Suggested Change: Separate the calendar and social tabs on the bottom navigation bar to allow for clearer navigation and more depth of information on each tab.
Evidence: 3 users were not 100% sure where the calendar was from the start and also wished for increased information along with the calendar such as upcoming events.
User Feedback Updates
Major updates that were implemented following usability testing included a new screen added at the beginning of the onboarding process informing the user that that they were going to be run through some of the key features of the application. A back button was added to the search function, a confirmation message was added after users added a favorite to their home screen, an add button was added above the favorites feature in lieu of a gear icon, and the social page was split into two pages, one for friends and one for the calendar.
Onboarding Intro Page
Search Page
Favorite Added Notification
Home Page
Social Page
Calendar Page
Accessibility
An important aspect of our application was to make sure it is accessible to as many users as possible. You never know when you may miss out on a whole swath of users just because you haven’t included them in the design process and planning. Additionally, it includes long-term design planning as accessibility standards are likely to become more and more entrenched in public policy as time goes on. To check accessibility standards and make updates the Stark accessibility plugin was used in Figma.
Color Contrast
Before
Before
After
After
Color contrast was checked for visibility as well as tested against all color blindness filters to ensure this would not be an issue for visually impaired users.
CTAs and Touch Targets
Before
After
Call to action buttons were updated with increased contrast as well as an update to the pixel size to be 44 dp by 44 dp at the largest spot on the button. Additionally, visual icons were paired with text for greater accessbility.
Form Fields
Before
After
The form fields were updated to include the descriptor text about the field, so users were still able to read it after clicking upon the field.
Along with these changes, all typography was double checked to ensure that there were no bodies of text smaller than 12 pt. Additionally, increased clarification was added to the event creation stage, showing the user in greater detail what step they were on overall and what their selection dates were on the first step of the event creation page.
The Product
Onboarding/Sign Up
The goal with onboarding was to keep information quick and efficient. The user should feel like the application is easy to access without too many barriers or upfront information while still understanding the app and functionality of the product.
Favorites
We wanted to allow the user an easy way to add their favorite surf locations right to their homepage, so planning a trip or checking the weather for any given location is right at their fingertips.
Live Weather Map
A feature that interested many of our users was a live weather map that they could filter for different environmental conditions. The goal is to allow users to filter wind for surfing conditions or preview storm fronts moving into their area.
Scheduling a Surfing Trip
The goal here is to allow users to quickly navigate to the calendar page to create a surfing event, flesh out any details they may want to add, then invite any individuals that they have friended on the app.
Hang 10 Figma Prototype
What’s Next…?
01
Refining Accessibility
Accessibility is at the forefront of our think with next steps when it comes to the Hang 10 prototype. Features that will be included into the prototype for ever increasing accessibility will include the option to change font types for the app for dyslexic users, greater voice command for blind users and much more!
02
Ironing Out Responsive Framework
Hang 10 is modeled as a responsive web app, next steps will be to flesh out the medium and large screen layouts as the small screen layout has been designed first as a mobile first design approach.
03
After Launch
To keep an edge going forward any revenue produced through either a pro membership or advertising would best be used to build a live webcam infrastructure that Hang 10 could use similar to Surfline as that is a key feature of visual verification for users.