VELA Web App Design

Responsive

Responsive

Responsive

Web App

Web App

Web App

Design System

Design System

Design System

Project Overview

Description: VELA is a web app geared toward water sports enthusiasts, helping them determine if the weather and water conditions are safe and fun for their sport.

Challenge: The multitude of existing weather apps are not specifically designed with their particular needs in mind and oftentimes people resort to checking multiple apps and asking questions about location conditions in forums until they find all the needed information.

Duration: 6 months (November 2020 — May 2021)

My Role: UX Research, Personas, Journey Mapping, Task Analysis, Information Architecture, Wireframing, High-Fidelity Prototyping, Usability Testing, UI Design (Solo Project)

Tools: OptimalSort, Marvel, Adobe XD, Photoshop, UsabilityHub

How might we help water sports participants make informed weather and water safety decisions?

The solution hypothesis that best meets users’ needs is to provide a highly customizable web app that:

• Sends warnings about dangerous weather;
• Lets users set up push notification reports for specific dates/times;
• Displays preferred weather (temperature, winds, storms) and water (temperature, tides, waves, surge, currents, debris, algae) modules;
• Provides weather reports for multiple locations;
• Can save preferences for multiple water sports;
• Provides a guide to interpreting marine weather specific to each location and water sport and lets users add to the information.

The same user might want some weather data if they are diving and might need slightly different if they will be surfing. Users can save the settings under a separate sport profile along with their preferred locations for that sport. The app can include a map that shows nearby locations along with brief weather conditions.

Emerging opportunities

SWOT and UX Analysis revealed the following product market fit opportunities:

• No existing weather service site/app catering to underwater sports;
• Present detailed data in an easy-to-navigate, meaningful way;
• Reliable service and accurate data across different platforms is needed;
• Visually driven interface with the ability to select spots on a map without typing.

What are Our Business Objectives?

• Differentiate by providing service to an unrepresented segment of water sports, such as underwater activities;
• Potential market: around 3.5 million scuba divers & 11 million snorkelers in the US, 6 million divers & 20 million snorkelers worldwide;
• Gain market share by providing excellent data presentation and accuracy;
• Provide added value by including hard-to-find related information.

User Research Insights

To test the initial hypothesis, I interviewed 5 divers with different experience levels, conducted an online survey, and had conversations on a diving forum.

App Usability

• Convey information at-a-glance; • Weather precision and reliability; • Rating of the conditions for diving.

Safety

Diving Spots

Booking a Diving Trip

App Usability

• Convey information at-a-glance; • Weather precision and reliability; • Rating of the conditions for diving.

Safety

Diving Spots

Booking a Diving Trip

App Usability

• Convey information at-a-glance; • Weather precision and reliability; • Rating of the conditions for diving.

Safety

Diving Spots

Booking a Diving Trip

Who are we designing for?

Observation: People’s understanding of the weather correlated with their diving experience level;
Each segment wanted slightly different things from a weather app.

Solution: 3 distinct Personas

Let me introduce you to Jacques, the expert diver, Michael, the intermediate diver, and Elisa, the beginner.

What would they need from the web app?

I created User Journeys based on the stories from the interviews, which enabled me to:

• Keep the user’s perspective in mind;
Zoom in on their problems and start designing solutions by examining how each would go through a likely scenario;
• Track their thoughts and emotions as they went through completing the tasks;
Identify opportunities for the web app, such as providing safety tips and travel guides.

How can they achieve it?

In addition to the User Journeys, I used User Flows to bring me closer to understanding the problem and start mapping out the site. At this point, I had to make a decision on where to place key features such as selecting custom weather parameters, which were essential for expert divers but not (yet) needed for inexperienced ones like Elisa. I will find out if that was the right placement after conducting Usability Testing of the prototypes.

Finally, time for sketching!

A bit of pivot here: from the user research I learned that some people want to engage in a variety of water sports (expert divers, and beginner surfers). I decided not to limit the target audience to divers and snorkelers and thus needed the VELA web app to display weather data relevant to different water sports. Sketching took a few iterations, but that’s where my thoughts started to get organized and lean towards enabling multiple sports profiles.
Since most users need to search for a location where they can engage in water sports, it was most intuitive to include both a search bar and a map on the home screen to get users faster to the desired weather. I decided to include a weather overview for all favorite locations on the same screen for faster access and at-a-glance comparison.

Talking to Prospective Users

Summary of findings from 6 usability test sessions:

  1. The algae, weather settings, route, and alert icons were unclear to participants. (high severity)

  2. The rating was ambiguous - how many stars was the maximum? (high severity)

  3. No way to change the degree units from C to F. (medium severity)

  4. Participants wanted to see detailed weather before adding a spot to their favorites. It was not very clear that a spot was added to favorites. The spot card disappeared after clicking on the heart. (medium severity)

  5. The placement of the icons in the top card did not match the participant’s mental model, they went to “More” on the tab menu to change settings and route to the location or to “Guides” to route to the location. (medium severity)

Let’s push it even more - preference testing

People liked the image, colors, and the better contrast between the background and the logo/text color. Frequently used words: cleaner, modern feel.

People liked the less crowded layout, less text, and the radial design caught their eye and felt more dynamic.

Including scuba divers from the forum tipped the preference for the most information-heavy layout to 45%. They liked the orange bar with dates, visible settings, and extended forecast. 33% liked the simpleest option (more spacious and less overwhelming).

Refining the design

With the findings from the Usability and Preference Testing, and using Gestalt psychology and visual design principles, I set out to refine and polish the prototype. I changed the look of the introduction & onboarding screens and the detailed weather using grids, being mindful of spacing, accessibility issues, and editing for consistency.

Final Prototype

View the Style Guide