VELA

"Where Every Splash Counts: Your Guide to Water Adventures, Weather Insights, and Ideal Locations."

Why created VELA?

There is no age limit to this real-time web app, as long as the user is interested in water activities, and would like to have an app that allows them to explore the activity, do the weather forecast, and search for locations that would enable water sports enthusiast or participating in the sail. The main purpose of this app is to bring out the best interpretation of the weather in visuals, which reduces the age limit for users and includes more age diversity compared to other web apps.

Problem

Despite the increasing demand for water-based recreational activities, individuals often struggle to find accessible and suitable locations to engage in such activities. I think there is a need for a mobile application that centralizes information on water-based recreational opportunities, including locations, amenities, safety measures, and user-generated reviews, to empower users to easily discover and access diverse water activity options.

Solution

Development of a user-friendly mobile application specifically tailored for water activity enthusiasts. VELA offers a comprehensive database of water activity locations, including lakes, rivers, beaches, and water parks, allowing users to search and explore based on their preferences and location. Users will have access to detailed information about each location, such as weather, safety guidelines, and general reviews.

By providing a centralized platform for discovering and accessing water activity spots, this app aims to streamline the process for enthusiasts, enhancing their overall experience and encouraging more people to engage in water-based recreational activities.

Tools

Figma

My Role

Sole UX designer and Researcher

Timeline

Overall: 8+ weeks
Discovery & Research: 2 weeks
Design & Testing: 6 weeks

My Design Process

1

2

3

4

5

6

User Stories

Personas

User Journey

Wire Frames

Prototype

UI Design

User Stories

High-Level Requirement

Log-in/ Sign-up flow
Select preference on reminders
System for reporting real-time marine accidents/ unexpected weather condition
Browsing weather/ wind conditions by location
Favourite an area/ lake to top list
Basic admin area for managing users
Editing existing accounts
Modifying reminders
Ability to send instant alerts to users for extreme weather

Personas

I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviours. So, I created 2 personas for each of the user segments. They were based on user interviews and surveys, and I kept updating them throughout the project as I gathered more data. I used these personas whenever I wanted to step out of ourselves and reconsider my initial ideas.

I leveraged a combination of qualitative and quantitative data from sources so that I could create personas that accurately represent the needs, goals, and behaviours of their target audience, ultimately leading to more effective and user-centred app designs.

For each persona, I have specified their demographics, goals & needs, hesitation & pain points, and commonly used device.

User Journey for Juliana

Scenario

“Juliana just finished an annual review, and would like to take 4 days off for her vacation. Heading off to Vancouver for a fishing trip, and possibly enjoy some water sports time as well. The weather at Vancouver fluctuates a lot, her goal is to get an accurate weather forecast, and a brief idea on what to expect to bring to wear for this trip.”

User Journey for Howard

Scenario

“Howard is planning a Thanksgiving trip, and would like to bring his niece and nephew out for water sports. Looking for a feasible distance to travel and allows them to slowly explore the joy of playing water sports”

Wireframes

Using Figma, I translated my first sketches into mid-fidelity wireframes. Then, I improved them by adding a few relevant activity images and suggested locations. At this stage, the wireframes were defined enough for some user testing. Based on 3 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.

Tests:

Survey & Interview
Usability Test
A/B

Usability Testing

I created a fully functional, high-fidelity prototype of the new flows using Figma. At the same time, we started recruiting subjects for the test who fit our criteria. I did 4 usability tests these are the issues that we’ve identified:

Issue 01

Participants could not be sure where to search for water activity

83.3% of participants could not find the tab to water activities. Of six participants, 2 struggled badly to find the activities tab. Three others needed minor guidance to find it.

Solution 01

Rename the tab with a more specific title

Usability Testing Cont.

Issue 02

Missing the share button on the result tab

33% of participants wanted to quickly share the information to others but were not able to find a share button for it.

Solution 02

Feature needs to be added back to the result page

Usability Testing Cont.

Issue 03

Participant had to go all the way back after entering the wrong tab

16.7% of participants could not find the back button. P

Solution 03

Can be improved when color applied to the design

Click here for VELA's Flow

UI Design

Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and message, which is: “Where Every Splash Counts: Your Guide to Water Adventures, Weather Insights, and Ideal Locations”.

The app style mainly follows a fresh, light, and clean vibe for users to enjoy using it while planning their escape from daily work and stress.

I have followed one of the popular guidelines - Material Design, and mainly designed for mobile users using the IOS system.

Next Steps

If there are chances and more time in the future, I hope to run more usability tests to refine the features and UI design and bring this app into real life with a mature developer team.

How would you continue this project? Is there anything you would revisit in the final design? What advice would you give to the designer following you?

Learnings

Creating VELA was a huge learning experience:

1. Understanding User Needs: Recognizing the diverse needs and preferences of users interested in water activities, weather updates, and location-based services is essential. Conducting thorough user research and gathering feedback throughout the development process helps ensure that the app meets user expectations.

2. User Interface Design: Designing a user-friendly interface that seamlessly integrates weather forecasts, water activity information, and location services is challenging. Balancing the presentation of complex data with intuitive navigation and visual clarity is essential for usability and user satisfaction.

3. Accuracy and Reliability: Ensuring the accuracy and reliability of weather forecasts, water conditions, and location data is paramount. Regular updates, data validation processes, and error handling mechanisms help maintain data integrity and user trust.

4. Accessibility and Inclusivity: Designing the app with accessibility and inclusivity in mind ensures that it is usable by a diverse range of users, including those with disabilities or special needs. Incorporating features such as voice commands, screen reader compatibility, and adjustable font sizes enhances accessibility.

5. Continuous Improvement: Embracing a culture of continuous improvement through user feedback, data analysis, and iterative design processes is essential for long-term success. Regular updates, feature enhancements, and bug fixes based on user insights and market trends keep the app relevant and competitive.

Overall, creating VELA required me to take a multidisciplinary approach, combining expertise in user experience design, data integration, mobile development, and community engagement to deliver a valuable and engaging user experience.