Wavely
Weather forecasting app for watersport enthusiasts.
Wavely is an accessible weather forecasting app for sailors, surfers, divers, or anyone else who wants to easily understand wind, wave, and weather reports before heading to the water.
Timeline
April - May 2020 (7 weeks)
Role
UX/UI Designer
Tools
Adobe XD
Adobe Illustrator
01. Design challenge
Days on the water are meant to be relaxing and fun, therefore any weather changes should be foreseen. To take a look at some existing solutions to a similar problem, I conducted a Competitive Analysis of three popular weather services. Here is what I found:
The Problem:
Weather apps are loaded with complex meteorological data
They contain lots of visual noise
Apps' interfaces are extremely inconsistent
Possible Solution:
To create a responsive web app that provides weather statistics in an accessible, and easy-to-comprehend way for beginners or those who don’t have any additional knowledge in geography and meteorology.
02. Understanding the user
To understand people's initial behavior around the activities near the water and to document their pain points using existing weather apps I ran an online survey. Then, I conducted several user interviews to learn more about my potential users' experiences first-hand. Check out the complete User Research
Affinity Mapping
I went carefully through each interview documenting all the significant findings and sorting all the data into manageable
clusters based on the informational similarities. This step helped me find significant overlaps of information among the participants.
User Persona
To better understand the characteristics of Wavely potential users, I created a user persona Alex based on a wide range of users with different pain points and goals.
Journey Map
The user research uncovered several problem areas. I visualized the users’ process step by step and came up with solutions to address these problems.
03. Foundational design
To discover what screens are essential for Wavely from the personas’ points of view, I created several user flows to ensure the ultimate design would be more user-centered. At this point amount of information increased significantly leading me to outline the initial app structure.
User Flow
To determine which tasks the user needs to complete to successfully achieve their goals, I created a user flow for each user objective I'd defined in the journey map.
Sitemap
Creating the information architecture was my first real challenge on this project. To better understand how to organize data and label categories for the future app's navigation I ran a Card Sort via Optimal Workshop to improve my early sketches.
04. Ideation
Finally, it's visualization time! To generate a wide range of different ideas in a limited time span I followed the Crazy 8s method. I wasn't very happy with the free-hand drawings at the beginning, so I created a collage technique in order to keep consistency with the low-fi wireframes of Wavely.
Wireframing
To highlight only the high-level functionality of Wavely I hand-drew low-fi wireframes in black and white. I used Adobe XD to portray a bit more detail and to create medium-fidelity wireframes.
Hi-Fi Prototype
Building an interactive prototype is a quick way to produce a user-friendly MVP to test. Users can complete selected tasks, share their feedback, and actively help to improve the project at the very early stage.
05. User testing
It's time to determine if the initial functionality of Wavely is truly understandable for the target users and to see how they interact with it. In order to do so, I conducted several usability tests even during the lockdown. Feel free to explore the complete Test Plan and Test Script for more details.
The Goal:
To observe and measure how users understand and value the initial functionality of Wavely and to collect their feedback.
Test Objectives:
Onboarding
General weather forecast
Homescreen and map usage
Spots information, weather forecast, and details
Search
Methodology:
Moderated remote
Tests Results
This time I tested out the online whiteboard called Miro to keep my research neat and accessible from everywhere. A Rainbow Spreadsheet was created based on the affinity map to evaluate the data and to create recommendations for further design improvements.
06. Implementing changes
To optimize the layouts of Wavely and to tune its visual designs so customers will love it, I ran several preference tests and feedback sessions with my peers. Gathering valuable opinions from other people helped me to assess the design and bring it to the next level.
Design Iteration 1
Following visual design principles and feedback from peers, major improvements were made to the home screen. The bottom navigation was removed for better map performance and usability. The main functionality is easily accessible.
Design Iteration 2
Based on users' feedback and additional research on watersports preferences the preset
onboarding screen includes only seven filter chips for the most popular watersport activities.
Design Iteration 3
The weather report diagram was developed to be easily understood even by beginners. The back button was added and the positions of the heart and mail icons were reconsidered so they have a clear purpose in the app.
07. Design language system
To maintain a cohesive user experience across multiple platforms and devices a set of overarching fundamental design rules and standards was built. I created a seastar mascot to help build and strengthen the brand identity of Wavely. Feel free to explore the entire Design System.
Icons ©Various artists from Noun Project Inc.
08. Final design
Following the golden rule "Learning by Doing" I created an accessible and easy-to-use prototype from scratch. I learned and applied the best practices of user-centered design and iterative design methodology during the whole design process. Feel free to try out the Clickable Prototype.
Video Presentation
This three-minute demo video of Wavely's interactive prototype showcases the primary functions of the app. It enables us to see how the product works in real time.
09. Wrap-up thoughts
Working on Wavely from its inception to each design iteration was challenging but very rewarding. I learned and practiced new design tools such as preparing and conducting efficient research, creating pixel-perfect wireframes, and prototyping using Adobe XD. Each step of the design process was essential for me to explore, iterate, and move forward. I really enjoyed showcasing the early prototype to the users, getting feedback, evaluating it, and implementing changes. One of the most powerful insights I gained along the way is the importance of avoiding all biases in user research and remaining neutral about the participants for the most realistic and reliable report.
This project has given me foundational knowledge in UX design and research, which I will happily expand further working on following improvements for Wavely and other design challenges.
Olia worked with me during her UX immersion project Wavely. She looks at things critically and tries her best to understand and implement different approaches to the UX Design methodology. If she has confusion about some concepts or topics she proactively asks questions.
Suhaib Ahmad, Mentor