SwellNet App Redesign Concept
Preface
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.
Why redesign SwellNet?
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.
Project Background
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.
Project Duration
2 Months Part Time
My Role
UX Research, testing, prototyping, sketching, UI design and validation.
Team
Myself
Objective
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.
Process
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.
Discovery
Research Plan:
- I interviewed a network of friends who are surfers (users of forecasting apps), from beginners to those of 20+ years testing SwellNet and alternative forecasting apps for feedback.
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
SwellNet's existing Screens
Some findings from testing & research, these problems are later solved in sketches and designs.
- The home screen displayed an overview, then once clicked takes you to the report/forecast menu - a navbar pops up with 3 options for that location.
- You can continue viewing Reports, view the forecaster or WAMS (stands for Wave Model charts - most users didn’t know what it meant).
- Users didn't realise the second navigation popped up. It was confusing and hard to access regularly.
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:
- SwellNet’s callouts on premium benefits are much more prevalent on desktop (refer screenshots), though are not shown much at all within the mobile app.
- Research revealed users weren’t aware of the premium benefits as they mainly viewed the forecast on mobile when on the road. The perks appealed to users, they just weren’t aware of them!
- SwellNet’s USP & benefits need to be communicated more clearly on mobile.
Synthesize & Define
Competitor Analysis Key Findings
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
Research & Testing Findings
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.
- SwellNet's desktop experience differed significantly to mobile - align them.
Anticipated Outcomes When Achieved
- Better user experience if everything is simplified. Help users find better waves and increase fulfillment with the app.
- Help encourage more regular use, through providing more relevant features that are appealing to surfers
- Clear communication to help surfers to up their game in reading the forecast would lead to more premium subscription sign ups.
These insights became the foundational requirements for my designs.
Designing the thing right.
Sketching Structure
Mapping out the end to end offerings online, noting what's not currently available on mobile.
- Website IA, orange items not within the mobile app.
- Current & future IA. Note on current - there's a few levels deep required to get to new forecasts.
- Bringing the most commonly used items to the top, available for quick and easy, regular use.
Paper Prototypes
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.
- Home & Forecast Screens
- Home (cont.), Charts (previously WAMs) and Maps
- Reports, Cams and Maps
- Forecast Screens (1-day view)
- Forecast & Maps Screens
Low-Fi Testing
- Initially I maintained the same menu as the original (picture below), with the nav popping up once you chose a location - but users didn't notice it appearing. They preferred the nav visible at all times.
- Additionally, charts (formerly WAMs) is mainly a forecasting tool, so made sense to add this within the longer range forecast views (3 days +).
- Moving charts to within forecasts opened up a new position on the navbar. So I added a home button for the overview page, and restricted location finding so each view is accessible at all times.
First Nav Prototype - Note the first screen has no nav, then once clicking a location the 5 option nav popped up.
A look at two home screens showing the progression of the wireframes up to medium fidelity as it evolved through testing feedback. And the newly added 'Home' button in the nav to replace 'Charts'.
The Outcomes
Breaking it down
Components
Criteria
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.
Solution
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.
Easily identifiable icons.
Colour & Icons in action.
Colour association across graphs.
Home Screen
Criteria
- Improve the Mobile experience - as users are often out checking the waves
- Users check the forecast daily.
Solution
Many visual cues and condensed real estate for each location, enabled users to more quickly and easily see an overview of differing locations' forecasts.
Reports
Criteria
- Users prefer surf specific local forecasting over generic maps & graphs. This is SwellNets USP so needs to remain a core part of the app experience.
- The old screen was a long scroll, with lots of text. The old navigation that appeared only when in reports meaning you always had to an extra level deep to view the forecast.
Solution
- With higher use of visuals and matching colours, meant less scrolling and quicker understanding at a glance! Users could recite forecast tasks 50% quicker.
SurfCams
Criteria
Optimise for quicker and easier access, for more regular use.
Solution
Users we're delighted to be able to see the cams wihout having to go to a new screen. This screen now became completely usable, rather than a long list of irrelevant locations.
Forecast
Criteria:
Could only see a max of 4 days of the forecast on mobile, not ideal when looking for 7 day or 14 days forecasts.
Solution:
- Users loved that the charts adjusted depending on the view. For 14 days, content becomes horizontally scrollable on mobile.
- Extremely pleased that they could see the forecast and intpret it 80% easier than the last view, beyond the prior maximum of a 4 day view, they can now easily read up to 14 days ahead!
Easily identifiable icons.
The hoizontal scoll views of Today, 3, 7 & 14 days.
Maps (New)
Criteria
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.
Solution
Users loved the ability to integrate up to 2+ different apps into 1! (Google maps + surf forecasts)
Mobile First Design
Criteria
SwellNet subscribers could only access News and Forums on the website.
Solution
Wave of the day view, News and Forums mobile first eliminating the annoyance of switching to the website. Much easier to find and use, all in the one place within the app.
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...
Let's talk perks
Now sprinkled throughout the app are little callings to tempt the keen surfer towards premium. Progress your forecasting knowledge if you opt in to a free trial of premium - ey, you keen? 80% of users are now!
The premium perks of pro.
Sign up in 1, 2, 3!
Formerly a 6 step process taking you to the website to sign up including the return to the app to log in - now just 3. Quick, clear & easy.
Perks, pay & go pro!
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.
Your turn, try it yourself.
Click on the link below to play with the working prototype.
Outcomes
Below are the tangible outcomes from testing the final prototype in comparison to the initial research insights from the current app. Surfers are:
- 70% more satisfied with the forecast information & layout, reducing the need to look at other forecasting services.
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
- I'd recommend pursuing a further enquiry into how closely these hypotheses I've made are aligned with SwellNet's core & future service offerings (this would be SwellNet's confidential strategy).
- Potentially offer fully configurable screens so users can tailor their own preferences - they're all blocked elements anyway!
- Keep learning and keep surfing!
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.