BRIEF

 

The problem: Existing weather apps aren’t meeting the goal of displaying complex weather data in an accessible, easy-to-comprehend way to people who regularly engage in water sports.

Water sports enthusiasts need a way to find clear and comprehensive information about the condition of wind, waves, and weather near the body of water in order to be better prepared for a day of sailing, surfing, diving.

 

Proposed solution: Creating an app that allows users to have a better understanding of weather forecast and have the ability to build a very good picture of what to expect. The interface will be obvious, self-evident and intuitive, thereby no matter if the user is an amateur.

PROCESS

 

I begin with the Discovery phase by exploring the problem, the business requirements, and the competitive landscape. I get to meet my users and develop a solid profile.

Next step the Concepting phase, where I make sense out of many ideas and information.  Rapid prototyping helps me to quickly execute ideas and come to a testable prototype.

Prototyping & Testing. My ideas are put to the test in user interviews and preference tests. I keep iterating based on new insights from users until I get to a polished UI design. I finish off documenting the design language system.

Discovery

 

Exploring the problem, the business requirements, and the competitive landscape.

COMPETITIVE ANALYSIS – SWOT


STRENGTH:

  • Free
  • Live reports from local observers
  • HD Live video reports
  • Large Community (Facebook, Instagram, Twitter, Youtube)

WEAKNESS:

  • No option to log in with Facebook
  • More forecast on the websites than the application
  • Out of date User interface
  • Missing essential features such as a surf spot map

OPPORTUNITIES:

  •  A more user-friendly and intuitive app that gives a better guidance for amateurs
  • Display weather data the way it is easy to understand
  • Make the app compatible with a smartwatch

THREAT:

  • Other similar apps in the market (e.g. Glassy Surf Report Forecast app, it has already better ratings on Google Play)

MAGICSEAWEED – Click here to see the detailed competitor profile.

STRENGTH:

  • 3Million user
  • Strong community
  • High ranking in Google
  • Global weather forecast from NOAA

WEAKNESS:

  • Complex Design
  • Feature creep
  • Too expensive given there are plenty of free sites that I can do the same
  • There is another WINDY app in the market with the same purpose

OPPORTUNITIES:

  • A more user-friendly and intuitive app that gives a better guidance for beginners
  • Display weather data the way it is easy to understand
  • Make the app compatible with a smartwatch

THREAT:

  • Other similar apps in the market (e.g. Glassy Surf Report Forecast app, it has already better ratings on Google Play)

WINDY – Click here to see the detailed competitor profile.

USER INTERVIEWS AND AFFINITY MAPPING


I have conducted individual interviews in order to find the user needs, motivation, frustrations, and validate my initial assumptions.

 

RESEARCH GOALS

• Understand the behavior of a user when it comes to preparing for a day on the water

Discover the frictions & triggers the users experience with weather  forecast apps

• Discover what the most desired features the user is interested in/expects in a weather forecasting app

• Discover which apps the user currently use and why

 

BEHAVIORS & ATTITUDES

GOALS

FRUSTRATIONS

QUOTES

SYNTHESIZE FINDINGS – PERSONAS


Putting together the research with my assumptions I have created my user persona, Jonathan & Julie, which helped me to put myself in the user mindset and keep the project focused on the user.

USER JOURNEY MAP


I have created user journey maps to provide a way to present those motivations and behaviors and gain a deeper understanding of my users.

Concepting

 

Now that I have finished the Discovery phase it is time to translate the collected information, insights into user-stories, user-flows, and sitemap, in order to understand how the users will follow a path and navigate through the app, and what kind of content the user need to achieve their goals.

USER STORIES & FLOWS


USER STORIES

As a Surf aficionado, I want to able to set up my level of surf-experience, so that I can find the best fitting spot.

As a Surf aficionado, I want to see the route distance, so that I can save time to find the nearest, best fitting spot.

As a Surf aficionado, I want to know additional information besides weather forecast (such as best wind, and season, bottom type), so that I can make a more confident decision before heading to surf.

ENTRY POINT: Opening the app

SUCCESS CRITERIA: Adjust filter to find the best fitting spot

TASK ANALYSIS

Opens app

Onboarding

Sign Up / Login

Adjust filter options

Find spots

 

ENTRY POINT: Select Spot

SUCCESS CRITERIA: Find additional information [ability level, bottom, best wind/ season, route direction]

TASK ANALYSIS

Select spot

See spot  weather overview

Click “icon” for the full detailed overview

Scroll through  the overview

Find additional information

INFORMATION ARCHITECTURE


PROTOTYPING & TESTING

 

Having defined the flow and sitemap of the app, we now have some ideas in mind to sketch out. I keep iterating using the rapid prototype method until I have a decent prototype that I can test.

FROM LOW TO HIGH FIDELITY


USABILITY TESTING


Potential users want to make a more confident decision in order to avoid dangerous situations and better prepared for a day surfing, sailing, or diving. The resulted prototype is an initial solution on how we hope to solve the problem.

 

Goal

The goal of this study is to assess the learnability for new users interacting with the Vela application for the first time on mobile. I would like to observe and measure if users understand the app, its value, and how to complete basic initial functions such as use filter and searching for and navigating to the desired spot.

Click here to see the detailed Usability Test Plan.

Usability test report


Issue 1: Participants had trouble finding the Home button (high)

Suggested Change: Create a bottom tab navigation which contains an official Home button.

Evidence: 2/6 of participants could not find the Home button. The other 4 participants took a long time to find the home button. They guessed it rather than find it.

Filter_nav 1.0@3x

Before

Tiny View

After

Filter_nav 1.0@3x

Before

Tiny View

After

 

Issue 2: Participants had trouble finding the Filter (high)

Suggested Change: Create a bottom tab navigation which contains an official filter button.

Evidence:  1/6 could not find the filter, the rest of the participants took a long time to find the filter because they were not sure what are the icons stand for under the setting.

Nearby Spots Screen_Setting

Before

Filter 1

After

Nearby Spots Screen_Setting

Before

Filter 1

After

 

Issue 3: Participants had trouble finding the Saved Spot (high)
Suggested Change: Create a bottom tab navigation which contains an official Saved button.

Evidence: 1/6 could not find the Saved spot, another 3 participants looked for the saved spots under the User profile and the rest of the participants said it was unexpected to find the saved spot under the setting.

Tiny View Screen_setting@3x

Before

Favorite@3x

After

Tiny View Screen_setting@3x

Before

Favorite@3x

After

FINAL UI DESIGN


Integrating Human Interface Guidelines, accessibility and feedback from fellow designers, I have revised the design again and have come to the final UI of the design!

DESIGN LANGUAGE


After polishing the design and I  have documented the design language used for the app. I’m working with the iterative design method, improvements will be made.

Click here to see the detailed Design Documentations.

Let's Work Together