SwellNet App Redesign Concept
Disclaimer: The photos, content and trademarks used within the wireframes remain as SwellNets property or it's rightful owners. All information I used of SwellNet was publicly available. This case study is my own study, undertaken at my discretion and does not necessarily reflect the views of SwellNet.
What you’ll find below is a case study offering solutions to address some of what I found were SwellNet’s challenges, as well as ideas for future development. I'm passionate about surfing and this topic, and everything is backed by user research and users of the app. My process was guided by qualitative and quantitative UX methodologies as an experienced practitioner in the field.
As a freelance UX designer, I’ve redesigned many online and offline experiences for my clients over the years, though I’d recently realised that few of the Mobile UX/UI projects I’ve completed of late have been for fintech and confidential in nature so I couldn’t share them online. So, I chose to redesign the SwellNet app at my own will, with the intent of showing off my skills in and the true magic of UX and how it shapes a better experience and real results.
It’s common to see designers do this type of work throughout the industry. Many will pick up existing problems / challenges, and using their expertise develop conceptual solutions. This has been done thousands of times for companies like Apple, Spotify, Uber etc although rather than do what's been well overdone, I chose to redesign SwellNet - an app that I regularly use in an effort to improve it.
SwellNet was the forecaster of choice for me, as a long time user I trust their forecast reliability over others. However, their app had elements missing, meaning I had to rely on other places/methods to fill in the gaps, hence why I was using multiple surf forecasting apps. I recognised they had such great potential, it just wasn't at the forefront of their mobile experience. Multiple apps became frustrating to use - every day.
In fact, it is hard to rely on any one app alone as it's either not reliable or hard to read. Further, it's hard to understand how much value you get out of premium subscriptions so I’d never considered signing up. With many friends who also surf, I realised they were doing the same - so I became inspired to redesign it. So, I embarked on what became a 2-month long part-time project.
2 Months Part Time
UX Research, testing, prototyping, sketching, UI design and validation.
Redesign the SwellNet App to become the holy grail of surf forecasting apps — to be the preferred and only app that surfers need when checking the forecast.
This project needed a holistic view on user experience (UX) so I broke it up into two distinct phases:
1. Designing the right thing
Understanding the audience: user research and testing of the Current SwellNet app, competitors forecasting apps and competitor analysis. I gained a solid understanding of what problems I needed to solve.
2. Designing the thing right
Developing solutions: knowing the problems I need to solve, I developed ideas & sketches, designed low fi prototypes then tested them on surfers. Based on feedback I refined and improved the designs, to become high fidelity solutions that solve specific problems.
Designing the right thing.
Understanding what services/platforms people were using, I did a competitor analysis.
It became clear to me that SwellNet appealed to intermediate to advanced surfers, so I continued to interview users that fit the criteria.
User Objective - the easier it is to read the forecast
User Outcome - the easier it is to find good surf
Some findings from testing & research, these problems are later solved in sketches and designs.
Competitor Analysis (blurred) & Market Positioning.
Market Positioning & USP
Understanding what platforms people were using, a competitor analysis identified the pro’s and con’s of each platform, and the Unique Selling Propositions (USPs).
I determined SwellNets positioning amongst the alternative platforms and SwellNets USP's true USPs became clear.
Desktop vs Mobile
Another sample key finding:
Synthasize & Define
The primary USP - A provider of detailed, location-specific forecasting information, for the intermediate to advanced surfer.
SwellNet's forum (secondary USP) helps premium subscribers read and understand short term forecasts, long range forecasts and weather events - big appeal for the keen surfer looking to progress their knowledge in surf forecasting and all the events that might effect it.
Understanding this, I knew their propositions needed to be clearer on the app:
Provide the benefits of SwellNet Pro’s features to new visitors and existing (including smoothing on-boarding)
Offer an easy way to upgrade to Pro
Offer Gift Cards and Traveller Services
Show the benefits of Pro and why it's unique
Improve the Mobile experience - as users are often out & about checking the waves
Users prefer surf-specific local forecasting over generic graphs.
Users prefer graphs, imagery and icons that are easy to digest, rather than lumps of text. Too much text becomes complex and hard to read.
Users want to see at a glance, an overview of today's forecast, and the week outlook of their preferred location.
Users often use maps in less familiar locations to see what surf spots might be working best in the current conditions
Users check the forecast very often.
These insights became the foundational requirements for my designs.
Designing the thing right.
Mapping out the end to end offerings online, noting what's not currently available on mobile.
Testing out my ideas and initial design concepts on paper with users enabled me to get rapid feedback on what worked and what didn't. Here's the finalists, evolved through testing feedback.
First Nav Prototype - Note the first screen has no nav, then once clicking a location the 5 option nav popped up.
Breaking it down
Users prefer graphs, imagery and icons that are easily to digest, rather than lumps of text. Too much information or too complex and hard to read.
Carefully selected icons mixed with appropriately chosen colours is starting to create our own in-app design language. Common symbols reused throughout the app for consistency, and forecast metrics changing in direction, colour and size in direct relation to the forecast reading. Users achieved tasks 80% quicker, easily picking up the app to use it right away.
Could only see a max of 4 days of the forecast on mobile, not ideal when looking for 7 day or 14 days forecasts.
Many surfers indicated they used a combination of reading the forecast, and using the a map to see how the surf forecast might effect each location. There’s few apps that feature maps to find a spot or location, but none that breakdown the forecast options on the map.
Users loved the ability to integrate up to 2+ different apps into 1! (Google maps + surf forecasts)
Early bird get's the.... Dark Mode
Surfers are up before dawn and done after dusk. Introducing a dark theme to reduced luminance which would minimise eye strain - helpful for that early morning squint worthy wake-up. Users loved it.
Last but not least...
Design system complete.
A standardized library enabling easy reuse and updating, it also ensures anything new added is now within our newly created SwellNet design language. Need to make a little update? No worries! Update the main component library, then it'll push all updates to all screens. Easy for designers to use, easy for developers to build, easy for users to understand.
All the elements combined gives you a consistent, easy to read app with it's own design language.
So there you have it,
the magic of UX.
Use the slider below to see some before/after shots, and the new light vs dark modes.
And don't worry, the WAMs charts are conveniently relocated to within the forecast screens.
Below are the tangible outcomes from testing the final prototype in comparison to the initial research insights from the current app. Surfers are:
80% more likely to sign up to premium now they’re aware due to the strategic placement of its benefits.
Achieving forecast related tasks 60% quicker than the old design
Preferring the new design, features & layout, and saw it as helpful and easy to use right away.
Next Steps & Recommendations
Final notes: The photos, content and trademarks used within the wireframes remain as SwellNets property or it's right owners. This case study, the ideas, research, findings and UX & UI remains my work.
Find out how UX can help you.
Give me a call, text or shoot through an email.