KATTIYA CHAN-URAI
Case Summary
OVERVIEW
B-ForeSea is a weather forecast app for beachgoers and watersports aficionados. Users can customize and prioritize forecast data on the dashboard to fit their best interests and needs.
It is everyone's app to use before going to the beach; it helps users plan their trip, leverage fun experiences, and reduce stress.
This is an individual project, which took about 7 months to complete while I have been holding a full-time job. Without a full-time job, it could be done within 3 months.
PROBLEM & POSSIBLE SOLUTIONS
This project addressed the challenge of watersport apps being too complicated due to an overwhelming amount of data. So, the purpose of this app is to provide users with beautiful graphics and straightforward wind and wave reports, weather forecasts,
and statistics.
THE APPROACH
(Click on each stage to see more details)
HOW I ITERATED
There were several iterations along the way, not only in the design, but also throughout my thought process...
-
Gathering more competitor research, both website and mobile platforms.
-
Asking users follow-up questions in everyday conversations; these informal interviews provided me with some interesting points of design.
-
Revisiting problem statement, hypothesis, and user flow to ensure the function on the app is still able to solve users problems or help them reach their goal.
-
After first usability test and results analysis, I revised my prototype several times, conducted preference testing, tested with 5 other users (who are peer designers) to obtain the feedback from a designer's perspective.
Empathize
UNDERSTANDING COMPETITORS
COMPETITIVE ANALYSIS
I know weather forecast apps, but not much about watersports forecasts. So, I started from Competitive Analysis to understand what exists in the market, what are the pros and cons, and where are the opportunities for improvement.
What I did
The watersport and weather forecast web and mobile apps I studied included The Weather Channel, AccuWeather, Weather, Dark Sky, Fish Weather, Windy, Deepblu, WindCompasss, Surfline, UV Lens, Paddle Logger, Marine Weather, Swim Guide, Water Speed, Magic Sea Weed, Buoycast, etc.
I picked MagicSeaWeed.com and Buoycast to deep dive into their functions because they received good reviews and ratings from users. And seem most similar to my project.
I analyzed their objectives, strategy, market advantage, market profile, SWOT, and UX competitive as shown below.
What I learned
-
Specific types of watersports forecast apps provide accurate information, but none of them are an all-in-one app because it is too complicated.
-
User have to use specific apps for specific activities.
-
Some of them provide "nearby business" function, but not many details are provided.
-
Most of the apps are not completely free. Ads are bothersome.
-
Data is often not update throughout the day. They rely on The National Oceanic and Atmospheric Administration (NOAA) or National Data Buoy Center (NDBC).
-
Watersports forecast data could be complicated and require some knowledge to understand.
UNDERSTANDING USERS
Research Goal
-
Understanding user’s demographic and behavior to create a user persona that reflects the majority of user groups.
-
Identifying user’s goals and needs to design the best app experience.
-
Determining which competitive app users enjoy using and why do like that app or website.
-
Learning and collecting data about tasks and features that could be developed in this app to leverage more value and allow users to have the best experience.
USER SURVEY
I sent out a user survey using Google Forms to gather user demography, behavior, needs, and goals while they were using a watersport or weather app for planning beach and water activities.
I used the results from 22 responders to shape the questions for the user interview which was used to identify the problem statement and create personas, workflows, and journey maps.
What I found
The value of the app is information accuracy, complete coverage of all ocean conditions, design comprehension, and ease of navigation through the app.
Findings
-
73% are male in the 36-45 age range
-
Participants don't necessarily play extreme watersports when they go to beach.
-
80% of participants use a weather forecast websites or app to plan their trip. (45% will check sometimes, and 40% always check)
-
Popular resources are general weather mobile apps (e.g., Weather), followed by Google, then a specific watersport app.
-
The factors that affect users' decisions in selecting a beach spot are weather condition, parking, crowds, and distance.
-
Forecasting accuracy, design comprehension, ease of navigate, ocean condition coverage, and beach overviews are crucial for watersports apps.
-
Top 5 functions participants want are
-
Search by location
-
Display weather and ocean conditions all day
-
Forecast five days ahead
-
Search by my needs, and
-
View live beach cameras
-
Insights
-
General users use a weather forecast app to pick a beach spot or plan their activities. However, watersport aficionados use specific apps for each sport, which I think we could combine into one app.
-
Users don’t search for weather or ocean conditions only; they also search for beach condition. Hence, I will add "Beach Overview" data to satisfy them.
-
User's common goals are to easily access specific info in a short time, and cover everything they are looking for in a simple format. To have the top 5 functions on one page would be convenient.
-
Users want to search a spot by using an ocean criteria-specific keyword that relates to their activity of interest.
-
If users enjoy multiple water activities, local users have their top lists of where to go for a specific sport. To make one app that serves different needs, I would create an app that users can customize, or create information filters on the dashboard, to prevent users from getting overwhelmed with irrelevant information.
USER INTERVIEW
I interviewed four potential users who live in Hawaii between the ages of 35-45. There are two males and two females. Three of them are watersport aficionados, and one of them occasionally goes to beach.
In-person interviews were conducted with three of the participants, and a remote interview was conducted and recorded via Skype.
What I found
Participants prioritized forecast data differently based on the activities, but there were common needs and goals:
-
Quickly access forecast data that matches what they need
-
Accurate forecasting
-
Easy to understand, simple interface and graphic icons
-
Show location overview and beach facility for their convenience
-
Live cameras
-
Nearby local businesses as a bonus function (everyone liked)
Affinity Mapping: Interview Insight
-
Individual user has multiple watersport interests; one app should be able to cover all information (weather and ocean forecast) so that users don’t need to switch to multiple apps/websites to find information.
-
User wants to see only information they really need depending on the activity they want to do at that moment.
-
Even though weather and ocean conditions are the main factors, they also consider beach conditions such as parking, crowds, safety, restrooms, nearby places to eat as a crucial factors as well.
-
Having kids affects destination and activity preferences.
-
User uses n app for specific watersports, as the general weather forecast app doesn't cover info they need.
-
Map and live cameras are essential features
-
User needs simple info and graphics/interface should they custom search or arrange the dashboard themselves to suit their needs.
-
Local users pick a beach based on familiarity. To have a function that remembers their most-visited spot or which activity they did the most might benefit them.
-
User cares about nearby places to eat, especially if they have kids. However, it’s not a top-of-mind feature for the weather app.
-
User's goal is to be able to quickly search for what they need, have straightforward and comprehensible information, and experience minimal clicks to access needed information.
-
Pop-up ads are bothersome.
USER JOURNEY MAP
To better understand user processes using the app and in order to achieve their goal, I created user journey mapping by using four phases task from a scenario. This will help me define possible solutions and opportunities to improve the app and to provide the best experience for my users.
PROBLEM STATEMENT
Users need a quick and easy way to use the weather app that predicts and provides clear information about beach and ocean condition based on their interests or criteria. Watersport forecast apps are too complicated. It is overwhelming because they include a lot of data that users might not need - one app for one activity so users have to use multiple apps to obtain different information. Users want to search by criteria or keywords for immediate data accessibility. Searching by location or zip code is difficult for visitors because they don't know the area well.
HYPOTHESIS
By creating an all-in-one app that users can manipulate their dashboard, prioritizing the data based on what they need or prefer would help solving overwhelming issues. To have search function that they can filter or input preference keyword will make users find the place they are looking for quickly, and to have nearby local business not only help provide convenience for users, but also could bring in income that could eliminate the bothersome Ads Pop Ups.
Ideate
EXPLORE SOLUTION IDEAS
The proto-personas and user journey mapping allowed me to better understand users and create a user flow and site map that provided solutions to innovate during the next steps.
To validate IA and site map, I used the card sort research method and tested on random users. I used results to revisit the site map and revised it before I started creating the wireframe and prototype.
USER STORIES and USER FLOWS
Joy and Mark have three tasks they want to accomplish. Here are their stories to demonstrate possible task flows.
INFORMATION ARCHITECTURE & CARD SORT
I have reiterated the site map based on card sort results with 10 participants sorting 30 cards.
Initial Site Map
Dendrogram: Best merge at 63% agreement
Final Site Map
Prototype
BUILDING WIREFRAME AND PROTOTYPE
I created a wireframe and mid and high fidelity prototypes to test with six participants in order to evaluate functions, usability, usefulness, and intuitiveness. This is an opportunity to validate ideas and hypotheses.
LOW FIDELITY WIREFRAME
I hand-sketched several versions on paper, then selected the most functional and simple version to develop the wireframe.
MID FIDELITY PROTOTYPE
The mid fidelity prototype was used in usability testing. It has been design reiterated a couple times before I built the prototype.
Initial prototype
Iterate design: mid fidelity prototype for usability testing
Test
USABILITY TESTING GOAL
I performed usability testing by using the mid-fidelity prototype. The goal was to observe and measure how easy and intuitive app navigation was, determine if users understood how the app worked, noted users’ experiences and interactions with the app’s key features (Personalized dashboard, searching function, location overview, and map view), and gathered comments and suggestions to improve the app in the next step.
OVERVIEW
The tests were conducted during the COVID-19 pandemic. There were a total of six participants. The Moderate Remote methodology was used with five participants and Moderate In-Person methodology was used with one participant.
Each session took about 30-40 minutes on a desktop platform through a Zoom video call. The in-person test was recorded by using the Loom application.
TEST OBJECTIVES
-
To measure how easy, quickly and intuitive user can navigate through the app.
-
Do participants understand the key function and know how to use them (Personalize forecast dashboard, Map view, beach condition and search.)
-
Do participants able to find and how quick to edit dashboard
-
Can they easily find out that search function provide an option of searching criteria
-
Determine the experience, and how they value the key function of the app
-
Gather comment and suggestion for the next step improvement.
TASK ASSIGNMENTS
-
Went through the onboarding screen and sign up.
-
Prioritized or changed the data displayed on the dashboard.
-
Find more in-depth info about ocean forecasting.
-
Find a beach with calm water (as a visitor, you may not know the area well)
-
You find a spot you want to go, but you want to see where it's located on this island.
-
Now you want to see brief info of the nearest spot
-
Then you want to see forecast details of that spot
-
-
Find information about the beach before you visit that spot (e.g., restrooms, crowds, parking, etc.)
USABILITY TEST RESULT
The results were analyzed using affinity mapping and a rainbow spreadsheet. The main challenges and errors experienced by the participants are listed below:
Affinity Mapping
Rainbow Spreadsheet
Issues and possible solutions
1. Participants had trouble finding how to edit (personalize) Dashboard Menu.
-
Change icon to pencil to be more universal.
-
Have a small tutorial on how to use the dashboard.
2. Participants didn't understand icons such as Palm Tree icon and Edit Dashboard icon.
-
Change and remove icon menu to reduce clusters and confusion.
-
Use wording menu, instead of icons, to make it clear and easy to understand.
-
Simplify and use more generic icons that users are familiar with from existing apps.
3. Participants couldn't find how to access in-depth forecast information from the pull-up window.
-
Replace pull-up icon with wording "View All Forecasts"
4. Participant didn't notice multi function of the Search bar (it can be searched by keyword and activities.)
-
Change drop-down menu to be segment menu bar.
5. Participant tried tapping on the word "Sign up" on the onboarding screen to sign up instead of clicking "I got it."
-
Change onboarding content (removed wording "sign up for free") to reduce confusion
-
Replace "I got it" to "Skip"
Result summary
The results showed that users liked the functions and saw their value and usefulness, but the app FAILED when it came to finding ways to access the apps’ functions and navigating through the app easily.
DESIGN ITERATIONS
After usability testing result was analyzed, the prototype was revised and improved. The design was reiterated several times based on preference testing and peer collaboration. The Visual Design Principle and Accessibility Guideline were adapted at this stage.
The challenge
At the polishing design stage, the dashboard still looked cluttered and overwhelming. After learning more visual design, and revisited usability testing result, I made the decision to create an additional page (Home screen) with a pull-up dashboard, and I added an in-app tutorial to guide users on how to customize their dashboard.
NEW HYPOTHESES & IMPROVEMENTS
From the usability testing, it lead me to iterate design, and there are crucial decision I have to make in order to improve the prototype, aligned with what I found from the research, to provide the best experience for users.
"Adding simple home screen before the main forecast dashboard
& reducing data display grids on the dashboard"
Initial Hypothesis: Having various type of data on the dashboard, and allow user to prioritize dashboard could help them view the key information easier and suit their preference.
New hypothesis: To build the dashboard that has about 3-5 key data at first glance would help user make a quick plan to visit the beach, and reduce clutter, overwhelming experience.
Reason to improve:
-
From the usability testing, participants mentioned that they would use only 3-5 keys information to check the forecast at first glance. Too many grids on the dashboard was exceeded their need.
-
The new simple home screen was build, to create aesthetic visual design, and help reduce unnecessary clutter for the users who who don't want to see a lot of forecast info if they don't intend to go in water.
INITIAL DESIGN
FINAL DESIGN
HOME SCREEN
Home screen has been developed after I tried to revise the dashboard, I improved the clutter and overwhelming data to be more aesthetic, clean and simple design.
FORECAST MAIN DASHBOARD
EDIT DASHBOARD
Other future improvements are..
-
Beach Overview page along with webcam also the key tools for users to make decision to visit beach. I will improve this function to be able to access from main dashboard.
-
Adding weather icon in to search results, to identify weather condition for each location, so that user can view the weather condition even before select the locations for more details which should save them 5-10 mins on the road.
-
For user safety, I would need to create alert prototype, also need to make a closure and consent notification page that user understand about enter to water is their own risk. To ensure that they will not use the app as the 100% decision maker because this app is for everyone, not only for professional water-sport users.
The take away
Even though the function could resolve users' problems, the simple design & less complexity plays a big role in the user experience. So design iteration and revisiting every stage of the design thinking process is crucial.
VISUAL DESIGN, STYLE GUIDE, AND PATTERN LIBRARY
From the preference testing, 65% of users preferred blue as the primary color with a touch of yellow to make the app more cheerful, lively, and fun.
All graphics and navigation icons are simple with line-and-filled illustration style as documented below.
LESSONS LEARNED
-
Creating an app for a wide range of users might not be ideal for the initial step.
-
Beachgoers and extreme watersport enthusiasts prioritize their forecast info differently based on their water / beach activity preferences. However, they have common needs and goals, which allows me to design this app for everyone, as I intended.
FUTURE IMPROVEMENTS
-
Conduct more interviews and ask the right questions for the specific user group.
-
Create more features that are crucial to the app, such as Warning, Favorite, and Setting.
-
Learn to animation techniques and add them to the prototype.
FINAL THOUGHTS
-
My solution of creating a single app for anyone who goes to beach is quite challenging.
-
I am very satisfied that the results from the user interviews and usability tests helped me define clearer solutions and allowed me to revise the app's functions to cover users' needs.
-
This project gave me a deep understanding of all aspects of the design process and provided me a solid foundation for UX design.