VIEW
VELA
Mobil app
ROLE
UX Designer
LOCATION
Munich, Germany
YEAR
2022
Objective
Provide accurate information in a user-friendly format, including comprehensive forecasts, statistics, and up-to-date data such as wind direction, wave height, and temperature. Our priority is to help our users to make informed decisions and stay safe on the water, providing all-inclusive and straightforward reports and forecasts.
CONTEXT
As part of my Immersive UX Design course with CareerFoundry, I completed a comprehensive app-building project. The project followed the design thinking process, which included research, competitive analysis, user persona development, usability testing, and best practices in UX design. The primary objective of this course demo project was to demonstrate the entire UX design process from start to finish in a real-life context. Through this project, I gained valuable experience in the UX design process and was able to apply the skills I learned to create a functional and user-friendly app.
ROLL & DURATION
- UX DESIGN
- UI DESIGN
- 6 MONTHS
PROBLEM STATEMENT
How can we develop a mobile application that offers a user-friendly and reliable solution for water sport enthusiasts, enabling them to effortlessly access comprehensive weather reports and forecasts specific to their location, including wind, waves, tides, and other critical data? The goal is to reduce the risk of dangerous or stressful situations and enhance the overall preparedness of users engaging in water-related activities such as surfing or navigation. Success will be measured by achieving a high adoption rate of the app within the water sport community, signifying its effectiveness as an essential tool for checking weather conditions before embarking on water-based activities.
Design THINKING Process
RESEARCH_01
Competitive Analysis
To gain insight into the competitive landscape, I analyzed two of the top surf forecast apps available. I discovered that both offered a wealth of information for surfers to review, but there was a risk of information overload. This could be daunting, particularly for those new to the sport.
Next is one of the analysis made as an example:
Magicseaweed’s mobile app and responsive web service offers surfers a comprehensive long-range surf forecast covering thousands of spots worldwide. The app provides a range of data, including surf height, swell height, period and direction, wind speed and direction, and air and water temperatures. This extensive forecast empowers surfers to make informed decisions, plan ahead, and stay safe while catching the waves.
STRENGTHS
- Strong community build.
- Complete information
- Real time update
OPPORTUNITIES
- Leaders in innovation, they have a strong community on their backs and a strong support to lead and generated new ideas and trends in the way information is display or generated, create a path for the other apps that follows.
STRENGTHS
- The reviews for their app in google play are not as good as the IOS version. This could mean the app has not been optimized for Android.
- There is no overview or tutorial that teach you how to read the charts, therefore if you have no experience or you are new in this world is almost impossible to understand.
STRENGTHS
- The reviews for their app in google play are not as good as the IOS version. This could mean the app has not been optimized for Android.
- There is no overview or tutorial that teach you how to read the charts, therefore if you have no experience or you are new in this world is almost impossible to understand.
User Research
In addition to conducting competitor research, we also conducted user surveys and interviews to better understand our potential users and validate our initial problem statement. These efforts provided valuable insights into the needs and preferences of our target audience, helping us refine our service and ensure it meets their expectations. By taking a user-centered approach, we aim to provide a solution that truly addresses the challenges our users face and exceeds their expectations.
RESEARCH GOALS
- To better understand users’ attitudes, motivations, and behaviors around surf.
- Collecting data on the context in which users would use or if they are using a forecast weather app for surfing.
- Documenting user pain points with existing or similar apps on the market.
- To determine which task users would like to complete using a forecast weather app for surfing.
AFFINITY MAP
I created an affinity map to synthesize my research findings and help identify insights
MOTIVATION / EMOTION
- Enjoy the sea and the adrenaline of surfing.
- The sun is not a factor to have a good wave.
- Enjoys watching the live cams.
- Practicing and improving to become better.
- All participants value accuracy in a weather app.
- Under good weathers conditions they got the best experience doing this activity.
HABITS
- Practice this activity at least once a week, if the conditions allows them.
- Participants vary in skill level, from beginner to expert and also in time their practicing this sport.
- All of them have in common the activity of checking weather conditions before each trip.
- Currently use of different apps to get the best information regarding forecast weathers reports.
DESIRE
- Basic data displayed in a simple way for weather, wind, waves, tide, swell.
- Interactive Maps, showing current location of the user and weather and beaches of the zone.
- Most participants believe that having some sort of method for learning data, how to read the charts and forecast would be useful.
- Have a customized alert to indicate to the potential user if conditions are good to practice their activity.
OBSTACLE
- Applications with limited features are always annoying.
- Lack of updating and accuracy of forecast reports.
- Learning to read the weather reports was a real headache.
- Beaches with too many people can be problematic sometimes.
- Not having enough information if you are traveling or in a new place.
DEFINE_02
Problem Statements
How can we develop a mobile application that offers a user-friendly and reliable solution for water sport enthusiasts, enabling them to effortlessly access comprehensive weather reports and forecasts specific to their location, including wind, waves, tides, and other critical data? The goal is to reduce the risk of dangerous or stressful situations and enhance the overall preparedness of users engaging in water-related activities such as surfing or navigation. Success will be measured by achieving a high adoption rate of the app within the water sport community, signifying its effectiveness as an essential tool for checking weather conditions before embarking on water-based activities.
LIST OF POSSIBLE PROBLEMS
- Reading and trying to understand weather conditions can be complex and confusing if you don’t have a minimum of knowledge on the subject.
- Not everyone lives near the ocean, so they need to plan their trips to avoid bad weather and enjoy the day without stress.
- Weather and swells can change from one moment to the next, so getting real time information is important.
DESCRIPTION OF POTENTIAL SOLUTIONS
- An app or responsive Web which provide beautifully displayed and easy to understand wind, tides and weather reports, forecast and statistics for sailors, surfers.
- Will features real-time animated maps with wind and wave information, as well as tide data.
- The ability to connect to live reports from local observers, and live beach cams, can be and interesting feature to investigate.
USER PERSONA
After gathering all the necessary information from our user research, I created Proto Personas to highlight our users’ goals and behaviors. These personas serve as a valuable tool to better understand our target audience and their needs. By visualizing the user’s journey and identifying pain points, we can tailor our service to provide a seamless experience that meets their expectations. The Proto Personas help us stay user-centered and keep our users’ needs at the forefront of our service.
JOURNEY MAP
Developing a user journey map was a crucial step in creating a user-centered design. By mapping out the user’s experience and emotions throughout their interaction with the product, we were able to identify pain points and opportunities for improvement. This process provided a comprehensive view of the user’s journey, allowing us to optimize each touchpoint and create a seamless and positive user experience. Ultimately, a well-crafted user journey map helps ensure that the design meets the user’s needs and expectations, leading to increased satisfaction and loyalty.
IDEATE_03
User Flow
After creating Personas and providing scenarios, I began putting together user flows for each scenario and structuring the Information Architecture for my app. This approach allowed me to design a seamless user experience that meets the needs and preferences of my target audience, making it easier for users to navigate and achieve their goals. By taking a user-centered approach to app design, I aim to create a product that delivers real value to users and encourages long-term engagement.
USER PERSONA, ETHAN
Objective
After a stressful shooting session, Ethan would like to relax and go for a casual surf session, he doesn’t have to much time to do a detailed planning and he would like to have an idea of how the conditions are.
Task Nº1
- Launch App <<< Entry point
- Splash Screen
- New User/Existing user
- Log In
- Home Page Map
- Location detail View
- Weather Info Screen <<< Success Criteria
USER PERSONA, EMILIANO
Objective
Emiliano wants to read Information, reviews and comments about different surf spots near by his area where he’s never been with the goal of checking if it fits his skill level and to get tips from other surfers.
Task Nº2
- Launch App <<< Entry point
- Splash Screen
- New User/Existing user
- Create Account (if is a new user)
- Create Profile (if is a new user)
- Home Page Map
- Discover
- Search location
- Read reviews
- Save location in Favorite <<< Success Criteria
Site Map
Following the identification of potential solutions for target user tasks, I began the planning phase. Initially, I focused on the information architecture of the application and developed a site map. To validate my initial decisions around how to group and label information within the application, I conducted an open card sort. Through this process, participants provided valuable feedback that helped refine the application’s information architecture, enhancing its overall usability and user experience.
PROTOTYPE_04
Wireframe
LOW FIDELITY WIREFRAMES
At Vela, our primary focus is simplicity and ease of use. To achieve this, we kept the number of screens to a minimum, focusing only on the core features that matter most to our users. I began the design process with pen and paper wireframes, creating multiple versions of each screen to ensure that I found the perfect combination of features and elements that would be intuitive and fulfill our users’ needs. By streamlining the user interface and making it easy to use, we aim to enhance the user experience and provide a seamless platform that users can trust and rely on.
MID FIDELITY WIREFRAMES
For the mid-fidelity stage, I based my design on a hand-drawn wireframe. Despite its simplicity, users can get a sense of the app’s appearance and key features through a few screens created in Figma. During this phase, I paid close attention to how users interact with each function and focused on optimizing the overall flow while considering multiple paths a user might take while completing a task. By taking a user-centric approach, I aim to create a design that is both intuitive and engaging for my target audience.
TEST_05
Usability Test
I conducted usability testing with real users to collect feedback and first impressions of my prototype. Overall, the participants were satisfied with the main ideas of the app, with more positive comments than negative. However, I carefully evaluated the negative feedback for areas of improvement in the final product. This testing provided valuable insights, allowing me to refine and enhance the user experience and ensure the final product meets the needs and preferences of my target audience.
CONCLUSION
This phase was the game changer – by conducting usability tests, I was able to refine what users were finding useful, and completely change up what they didn’t react well to.
The users were asked complete a few scenario-based tasks that would test the main features of the app, and were asked how they felt about the app in general. The results of the usability tests were recorded and analyzed using a rainbow spreadsheet system and generating an affinity map.
ITERATE_06
Refine Design
Once all the data collected during the Usability test stage was analyzed, I focused on addressing the moderate and high priority usability issues before refining the design further in preparation for hand-off. To gather feedback, I developed a high-fidelity prototype and submitted it to my UX/UI network. This led to additional iterations, and important revisions were made to improve accessibility, particularly by enhancing the app’s text legibility and readability. Additionally, I ensured consistency in the use of placeholder text throughout the design. By prioritizing these improvements, I aimed to create a user-friendly and accessible design that meets the needs of my target audience.
Style guide
COLOR PALETTE
MAIN COLOR
SECONDARY COLOURS
GRADIENT COLOURS
UI ELEMENTS
BUTTONS
ICONOGRAPHY
SLIDER
NAVIGATION MENU
SEARCHFIELD
typography
Feel free to interact with the prototype
Press Here!
Press Here!
CONCLUSION_07
Next Steps
In this project, I focused on creating an app that provides accurate and comprehensive weather forecasts for water sport aficionados, especially surfers. However, the next logical step would be to further improve the app by gathering feedback from our target users and incorporating their needs and preferences into our design. This includes conducting proper user research and usability tests specifically targeted at surfers and other water sports enthusiasts, to ensure that our app provides the features and functionalities that meet their expectations. By taking a user-centered approach, we can continue to enhance our app and provide the best possible experience for our users.
Final Thoughts
VELA was my first major UX design challenge, taking over four months to complete and encompassing the full design process – from ideation to realization. Throughout the process, I gained valuable insights into user-centered design methodologies and used major industry-recognized tools, thanks to my CareerFoundry course. Putting everything I learned into practice, I aimed to create an app that delivers accurate and intuitive weather reports for water sports enthusiasts, with a particular focus on surfers. By prioritizing the user’s needs and preferences, I aim to create a user-friendly and effective solution that meets their expectations.
Copyright @ Patricio Toro Salinas 2023.
All Rights Reserved - Made in Webflow
All Rights Reserved - Made in Webflow
Copyright @ Patricio Toro Salinas 2023. All Rights Reserved - Made in Webflow