Vela
Role
UX/UI Designer
Case Study
App for Water Sports Aficionados
Categories
App
Tools
Figma, Survey Monkey, Optimal Sort, Usability Hub, Zoom
Problem Context
Water-sports aficionados need an accurate and uncomplicated way to inform themselves about wind, wave, and weather reports. For them, it is crucial when planning safe and fun days in water-related sports such as diving, sailing, or surfing.
Project Goals
1. Create an app whose target users are water sport enthusiasts who use it to obtain weather forecasts before practicing their favorite water sport.
2. Provide beautifully displayed and easy to understand wind, wave and weather reports, forecasts.
3. Using the app as an essential instrument before embarking on the adventure of practicing a water sport.
Vela, the adventure starts here!
Vela aims to give the best possible experience to water sports aficionados, we will display relevant information in an accurate and uncomplicated way to inform them about wind, wave, weather reports among other useful information. For them, it is crucial when planning safe and fun days in water-related sports such as kite surfing, sailing, or surfing.
01- SOLUTION TO THE PROBLEM
I want to begin this Case Study by showcasing the final result through prototypes. I aim to establish both the objective and the outcome of the project. By doing so, I simplify the entire process and make it more enjoyable.
Final Designs
Once I created the mood board and style guide, I proceeded to bring to life the mid-fidelity designs as a form of Final Designs, which you will see further below. I chose brand-related colors to create an energetic but at the same time clean image; institutional pictures denote motivation and vitality however they are carefully selected to convey simplicity.
This step is significant to me because it helps establish an identification and relationship between the end user and Vela. The final result was amazing; Vela has evolved into an authentic tool for all water sports enthusiasts.
Here are some examples of what I created 👇🏻👇🏻👇🏻
Splash screen for a pleasing introduction
Navigation bar
Selected Spot Homepage
The Weather Forecast
Weather
User Profile
Video Tutorial
To enhance the aesthetics of the application, I opted to create an attractive splash screen that reflects the brand`s soul. This screen not only catches the user's attention but also encourages them to move forward by making it easy for them to create an account.
Waves
Splash screen
Homepage
Map
Signup
Homepage & Navigation bar
The navigation bar is situated at the bottom of the screen, helping the user navigate through a hierarchy of content. It serves as a natural location to display an icon and title, assisting users in orienting themselves and resulting in a user-friendly 🤙🏻 product.
Have a look at it 👇🏻👇🏻👇🏻
The live weather forecast feature is essential within the app, which is why I've positioned it in a relevant location to ensure users can easily access it. Water sports enthusiasts must have accurate information to safely enjoy their favorite activities without weather-related setbacks.
User Profile
Favorites
Wind
Favorites and User Profile
In encouraging a sense of community and facilitating place ratings for a better experience, Vela offers users the possibility to personalize the application by adding user information.
Often, we come across spots that might not be suitable for an immediate visit, but we still wish to save them as options for the future. That's why, based on preference testing, we introduced the "Favorite" feature, enabling users to conveniently save their preferred places for future consideration.
Favorites and User Profile
Analysis of user preferences revealed that, in addition to other relevant features, providing the option to access video tutorials and tips related to water sports significantly improves user engagement.
The homepage serves as the initial display of the application and its product, setting the tone and forming the primary impression of both the product and the company.
I have designed an appealing and user-friendly homepage where users can easily search and select the ideal water sports activity and the best location to practice it. The system provides recommended spots worldwide based on rates and other criteria, ensuring a seamless experience for users.
Picking the perfect place
In order to make sure the user has the best possible experience and based on the feedback I received during our Usability Test, I've decided to add a feature called "About". This feature is here to give a more detailed insight into the selected location. The user will find all sorts of useful information like a description of the place, what makes it unique, the services it offers, and anything else the user might want to know before they go.
Favorites
Favorites and User Profile
After the user selects the location and water sport they wish to practice, I added a function where the application presents all available sports in the area through cards displaying images and relevant features for the user's consideration.
The map interface is intuitively designed, allowing users to click on various spots to access relevant information effortlessly. The main idea is to help users in discovering the most suitable spot for their activity.
Tips Feeds
Login
User Review
Users can read, leave comments, and rate the selected location to improve the experience and help the user in choosing the best place for water sports. This will enable other users to obtain firsthand opinions and experiences before visiting the place.
Web cam
This feature will allow users to see in real-time the conditions of the selected location through webcams installed at the site. This can be especially useful for practicing water sports because weather conditions can influence the decision to visit the site.
02- USER RESEARCH
Learning About the Users
For this first stage of the project, the main focus will be to gather information from users and potential users with the objective to offer a good user experience. User Surveys and User Interviews would be two of the most effective User Research methods in instructing me more about potential users. I decided to choose these two qualitative methods because I wanted to have a direct review of the behavior and the feeling of the potential users, and I believe it’s all about understanding people’s beliefs and practices on their terms.
Who is our target user?
Our main target audiences are people with a special interest in water sports like surfing, diving, sailing, or any additional water recreations, whether is in the sea, lakes, or other bodies of water. The mindset of our target user is someone adventurous, self-driven, free-spirit who would like to have the information in an easy-to-understand and accessible way.
Research Goals
To understand better user behavior around the activity searching for the weather forecast.
To determine which task users would like to complete when using a weather app.
Understand user pain points with existing weather apps on the market.
Collecting data to have a better understanding of how design can affect user experience.
Research Methods
A) User Surveys
For water sports enthusiasts, knowing the weather conditions is extremely important since this can be a determining factor when practicing a water sport; under this argument, I decided to launch a User Survey to know the quality of the information displayed by the different weather forecasts outlets.
Duration: 1 week during Sep 2021
Participants: Participants from Europe and America.
Tool: Survey Monkey
Results
Most of the participants use two or more weather-related sources because they can't find one that provides the information they are searching.
Most of the users think that there are missing features to obtain a better experience.
The participants think that the design obstructs the obtaining of the information.
B) User Interviews
Knowing the feelings of future users is essential, this way, we can create a product in which the user is at the center, that is the main reason I made a User Interview.
Duration: The interview lasted roughly 25 min.
Participants: 5 Water sports enthusiasts, 1 is a woman and 4 are men, and their ages are between 25 and 50.
Tool: Zoom
Results
Participants find the weather forecast apps useful when they want to practice a water sport but they find the information not easy to understand, they also have the need to look for different sources to find the right information, and to feel less frustrated they would like to find predetermined features to obtain the information quickly and efficiently.
C) Affinity Mapping
All the motivations, quotes, and information provided by the people that I interviewed, I decided to collect and organize to create an Affinity Map; the idea behind is to be able to understand exactly the needs of the users and to build a product tailored to the needs of our target user.
Below the results. 👇🏻👇🏻
03- USER PERSONAS
With the information obtained from the different researches I create two User Personas that represent all research participants in this way I will not lose sight of whom I am designing for.
04- TASK ANALYSIS & USER FLOW
Once I brought to life our users through the User Personas, I decided to create the Analysis Task and User Flow; since defining user flows leads to a better user experience because it puts them at the center of the design process.
Check them out!👇🏻👇🏻👇🏻
05- LOW & MID-FIDELITY WIREFRAMES
Constructing the Solution
With all the research and conclusions in mind, I started building the home page, starting with some rough sketches on paper, I drew up some ideas in a notebook, ponder for a while on the needs and motivations of users, and then bought the final idealizations to life in Figma.
From Low to Mid-Fidelity Wireframes
Home Screen
First, create Low-Fidelity Wireframes to start designing a solution to the objectives, then transform it into Mid-Fidelity Wireframes. In this case, I focus on the home screen, which is where the main features are:
1. Core features
Home
Live weather forecast
Water Sports
Hamburger Menu
2. Search Box.
3. Current site weather forecast.
4.Current location map.
Live Weather Forecast
The user can choose different possibilities in the Live Weather Forecast Feature, such as:
Temperature.
Weather Forecast.
Wind.
Waves, among others.
06- DOES IT ACTUALLY WORK?
User Testing
Before moving on with the high-Fidelity Prototype, I decided to do a User Test to understand first-hand the opinion of 6 different users, the result was surprising since it made me increase the scope of what the app offered at first.
Participants
For the purpose of this study, I decided to recruit 6 participants of different ages, countries as well as different professions, all with the aim of obtaining the most accurate result.
Organising the Data
To better examine all the data thrown from Usability Testing, I created an Affinity map to help me concentrate quotes and observations into concise pieces of information that I could then group to determine patterns. Once I had the basic information and patterns identified, I processed that report using the Rainbow Spreadsheet, the purpose of this sheet is to classify the information by presenting the results in a visually organized style which will help me take active measures.
Affinity Map
Rainbow Spreadsheet
Usability Test Report
All of the participants completed the tasks, but testing did reveal areas of friction and confusion. 5 of the main concerns are listed below 👇🏻👇🏻:
ISSUE 1: INCLUDE THE LIVE FORECAST FEATURE IN THE SITE NAVIGATION BAR (HIGH).
Evidence. Numerous participants were not able to find the feature. One of the most important objectives of Vela is that the users can localize and use it in a fast and expedited manner, therefore I made some changes in the design to incorporate, as recommended, the Live Forecast feature in the site navigation bar.
ISSUE 2: AFTER SEARCHING FOR A WATER SPORTS SITE TO PRACTICE, PARTICIPANTS WERE NOT ABLE TO GO BACK. (HIGH)
Evidence. For most of the testers, not being able to go back was a frustrating friction problem. I went back to the original design and made the pertinent changes, since this is an important issue, it is necessary to fix it to avoid frustration among future users.
ISSUE 3: RENAME AND ADD A NEW ICON TO THE AMENITIES FEATURE (MEDIUM)
Evidence. For many of the participants, the name and icon were not intuitive enough and participants needed to ask for the purpose of the feature.
ISSUE 4: ADD TO FAVORITES BUTTON DOESN’T WORK (MEDIUM)
Suggested Change. Participants were not able to add to Favorites a water sport spot because the button didn’t work, hence participants were frustrated when they encountered that the button didn’t work and was not able to perform the task.
ISSUE 5: HOME BUTTON DIDN'T WORK (HIGH)
Evidence. The Home icon needs to be controlled one more time to find out why is not responding. For most of the participants, this was a significant problem because they were not able to go to the Home page.
What did I learn?
Making errors are normal when building prototypes, because of this reason it is crucial to perform test methods such as the Usability Test, this with the aim of discovering where the friction points are, structural errors or usability problems. Thanks to the results obtained in the Usability Test, we can now fix the errors that caused the most frustration to our participants.
07- FINAL DELIVERABLES
Design System
It all begins with an idea. To provide consistency in the design and development process of the project, I construct the standards and necessary documentation.
08- CASE STUDY CONCLUSION
Putting it all together
Water sports have sustained growth in recent decades, and new resources appear on the market every year that enthusiasts can use to practice their favorite sport. Vela app introduced me to that world, thanks to the different investigations, both with the competition and with athletes, I realised that there is still no app where you can find all the different features that users are searching, mainly I learned that the Users use diverse resources to know the state of the weather, however, in this project my biggest challenge was to gather all the information in an easy, simple and easy to understand way since the end-user does not want to take time to find the information.
Thank you for reading through this project! 😀
Special thanks to my photos and icons suppliers:
pexels.com
freepik.com
fontawesome.com/icons
and other really cool sources.