How can we provide reliable information about watersports conditions beyond the pure technicalities of weather data?
Create a location-based app for watersport enthusiasts that merges weather forecasts with the travelling expertise of the userbase.
CareerFoundry UX design program
Affinity Designer & Photo
This app was my major project of the UX design course at CareerFoundry. Out of four options, a watersports app was the most promising in terms of complexity, user research, data visualisation and social connectivity. The aim was to streamline my analytical, storytelling and visual design skills to the specifics of the user-centred design process.
After having scanned 15 web and native apps, two general market solutions emerged: one that is dedicated to presenting weather data in a very technical manner and another that builds on the community and culture aspects of a sport.
The business opportunity for waterfronts is just in the gap. To become a unique product, it needs to aim at providing hard facts while allowing users to connect and exchange information that is hidden beneath pure data.
With these hypotheses in mind, I conducted an online survey with 12 participants and made close-up Interviews with four watersports enthusiasts and app users. These resulted in seven affinity maps I made with Miro.
I understood that a good experience is about the interplay of all elements involved – weather, the adjacent landscape, and other activities in the vicinity of a location.
First-hand knowledge, visual representation and recommendations by others are crucial to evaluate a spot. Therefore, pictures and comments had to become one of the app’s centrepieces.
Whether you are camping with your family, living the van life or on a sailboat at sea: watersports people need infrastructures and other leisure time activities at locations. So being able to quickly lookup places of interest needed to be a feature as well.
Lastly, people love to compare locations and plan out an itinerary. To go beyond the classic »favourites« functions, I decided to provide an option to group locations, map out distances between them and thus create a personal logbook of a journey. This would become the »Routes« feature.
Coming from film and having interviewed hundreds of people, talking to users was very familiar and completely new at the same time. In film, decisions are mostly based on expertise and experience. Here, practicing radical openness and focusing entirely on the users’ needs was a real eye-opener. One of the most interesting and enjoyable aspects of the work.
I created three POVs to map the different types of users for building the product. Nick is a tech-savvy, 27-year-old regular Kite-Surfer; Andy is a 52-year sailor and stand-up paddler making longer trips on his boat; and Maria, a 36-year-old surfer who rides the waves on vacation.
Stories and journeys covered various spatial and temporal situations in which our app would be of use: from hours to months before visiting a spot; at home, on the road, or right at the location.
The combination of weather and travel data was a »productive threat« while creating the flows. This was especially true for the routes feature. I broke them down into smaller tasks to keep focus and took this as a warning sign in terms of the upcoming non-linear design needs.
An open card-sorting with 8 participants resulted in a few iterations of the sitemap. The routes feature grew in importance as a structuring element and accordingly moved up in the hierarchy.
Using the Concepts app and Balsamiq to build Lofi- and MidFi-Prototypes, I put the map and the weather forecast at the centre of the screens while integrating the routes accordingly.
One of the major challenges was to decide on what to include in the default weather forecast display. At this stage, the app didn’t allow the user to select their type of sport during onboarding, so I kept going forth and back. I finally settled with this version, deferring the decision to the usability tests.
To validate the value and general usability of the app, I conducted three remote and three in-person sessions with the first prototype as think-aloud tests. I recorded the users’ interactions on the screen, as well as their comments and expressions.
While the app’s overall value and usability were confirmed, several problems came to light.
1. Text-heavy onboarding (high severity)
2. Confusing icons (high severity)
3. Map settings and navigation have flaws (high severity)
4. Weather display is insufficient (medium severity)
5. Route feature needs clarification (medium severity)
1. Map area enlarged
2. Redesign of map buttons, a new feature to control the visibility of data layers
3. Save/Route icons exchanged, sharing function added
4. Weather forecast: visuals and tides added
5. Menu point copy changed
6. New location type icon in content / on map
Creating the UI was about maintaining the minimalist approach while creating good differentiation. Colours and fonts were changed to reflect the app’s content and to increase emphasis, readability, unity and balance.
I conducted another round of user testing via written comments on the prototype in Invision. The tests resulted in tweaks to the UI for the map buttons, onboarding and wording, and a change in the UX regarding the route navigation to improve accessibility.
To get a clearer view of the map, I moved its buttons into their own bar. By doing so, the layers control is still connected via the semi-transparent background while being separated from the map's actual content.
Users made a valid argument about route navigation. If I look at a location coming from the route view, how do I quickly get back to the route? So I added a top-navigation element to provide said functionality.
The latest prototype articulates top-level navigation entries, onboarding, sign up/login, and the main features of the app.
The map displays locations, places of interest, weather and sea data. It can also be used for navigating between locations. Buttons provide controls to show or hide data layers. Button and data displays are customisable via the map settings.
Fully customisable display of weather data
Editorial and user-based content to assess the watersports characteristics of a location. Additional information on further resources, such as gear rentals, accommodation, parking.
Enables users to create itineraries by adding locations to a route. The feature auto-calculates distances on the sea and on land. Users can log in to locations and create personal travel logs.
Confirmed: good products need facts and insider knowledge
genius design < user-centred design
Next steps: UI iterations, full feature designs, acquisition
|cookielawinfo-checkbox-analytics||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".|
|cookielawinfo-checkbox-functional||11 months||The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".|
|cookielawinfo-checkbox-necessary||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".|
|cookielawinfo-checkbox-others||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.|
|cookielawinfo-checkbox-performance||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".|