TideUp! Case Study
My Role
UX Research, UX Design and UI Design
For this project I conducted the research, the workshops and I acted as a designer for the creation of the App’s Interface.
The Problem ︎︎︎
The forecast is complicated. And weather apps don’t make it easier with tight displays full of symbols and data. Our adventurers need a way to find a direct approach to truthfully comprehend weather reports. They wish to spend the best day outside, with no surprises and in the safest way.
The Solution ︎
TideUp! Mobile application is designed in such a way to provide specific and clear information about the weather forecast for outdoor sports aficionados.
- The Application offers a customizable dashboard that allows users to choose what widgets and components they want based on the sports that they practise.
- The app UI/UX interface reduces the cognitive load to help users quickly spot the necessary weather layers for interpretation, depending on the activity to perform.
- A Safety Area that allows users to have in one single place: SOS button, share location feature and a list of emergency contacts according to the location for risky situations.
But wait, how did I get there?
The Process ︎︎︎
Understand
The WHY?- In the first stage of the Design Thinking process, I needed to truly understand the problem and how the market is. For that, I performed a complete competitive analysis of my most direct competitors: Windy.app (Best specialized weather app in its category by World Meteorological Organization) & Windy.com. (Trusted by Governments and Institutions)
Creating a SWOT Analysis from both competitors helped me to spot Strengths, Weaknesses, Threats but the most important thing: Opportunities, to develop TideUp!
Creating a SWOT Analysis from both competitors helped me to spot Strengths, Weaknesses, Threats but the most important thing: Opportunities, to develop TideUp!
Observe ︎︎
HOW do users use the product? HOW much do they know about the forecast and how to read the weather? HOW does the forecast cause an impact on the activity performance?
To get first-hand information about users’ goals and needs I performed User Research. For that, I chose to conduct User Interviews. Talking with outdoor activities aficionados, from sailors to climbers and surfers; and observing how actual users interact in real-time with similar products, led me to collect a big amount of organic data.
Key Insights after the Interviews:
To get first-hand information about users’ goals and needs I performed User Research. For that, I chose to conduct User Interviews. Talking with outdoor activities aficionados, from sailors to climbers and surfers; and observing how actual users interact in real-time with similar products, led me to collect a big amount of organic data.
Key Insights after the Interviews:
- The weather has a huge impact on the outdoor activities plans
- Average people don’t have previous knowledge of the weather reports
- Users want to see a specific forecast for the desired activity and hide the rest
- Simple graphics, clearer info
- Accuracy on the reports is very important due to safety reasons.
For who ︎
Do I solve the problem?
After breaking down in Key Insights all the data from the User Interviews, the creation of Proto-personas was key to continuing with a UCD product. This method helped me to identify target groups, user perspectives, and possible outcomes using the App.
Ideate ︎
The WHAT - Now, I had acquired a full scope of the Why, How and for Who. It was time to start defining how the app will be built, and therefore which ones will be the main features.
The forecast data it’s not possible to change. It’s what it is. But what it’s possible it’s to develop a useful App where the users can accomplish their goals. Go to practise outdoor activities knowing beforehand that the prevision is accurate and the reports favourable to have the best performance in the nature.
User journeys helped me empathise with my users and better understand the roller-coaster of emotions they go through when they feel: frustrated about not understanding the weather reports, overwhelm about symbols, or simply feeling lost what places around the globe are better to practise these activities.
And then translating the primary job story into task flows to facilitate decisions for information architecture & interactions.
User journeys helped me empathise with my users and better understand the roller-coaster of emotions they go through when they feel: frustrated about not understanding the weather reports, overwhelm about symbols, or simply feeling lost what places around the globe are better to practise these activities.
And then translating the primary job story into task flows to facilitate decisions for information architecture & interactions.
Prototype.
Having all these infos at my disposal, I started the design process. First sketching some wireframes by hand, just with pen and paper, sheding the first ideas and variations.
Then I moved these sketches to Marvel. This enlightened me a lot about what the app will become in a digital environment and spot possible flaws and early errors. Like an internal testing process.
Then I moved these sketches to Marvel. This enlightened me a lot about what the app will become in a digital environment and spot possible flaws and early errors. Like an internal testing process.
Medium Fidelity Prototype
After playing around in Marvel, I decided to upgrade my wireframes from Low to mid-fidelity to high-fidelity. Creating the first prototype, so I could test it with real people.
After playing around in Marvel, I decided to upgrade my wireframes from Low to mid-fidelity to high-fidelity. Creating the first prototype, so I could test it with real people.
Test, test & test
Iterations with usability testing.
I conducted moderated-in person usability testing on five users. I applied the focus on the: (1) search feature, (2) read the forecast by activity, and (3) get help. I briefed my participants with the following scenarios:
I conducted moderated-in person usability testing on five users. I applied the focus on the: (1) search feature, (2) read the forecast by activity, and (3) get help. I briefed my participants with the following scenarios:
- You want to go to Costa Rica this Summer to surf. How do you check the best spots in the country?
- You have planned to practise snowboarding in Panticosa this Saturday. How do you know that the weather conditions are favourable?
- You suffered an accident in a country where you don’t speak the language. Where would you look for help?
Key findings & Further Iterations
︎︎︎
︎︎︎
︎
Search Bar
The Search bar in the dashboard is taking too much attention. Users don’t get it ︎︎︎ Focus. Move Search feature to the Menu Bar.
︎
Search Option “Places & More”
Too many options for filtering led users to drop the action ︎︎︎ Fuse ‘Search by Activity’ and ‘Places & More’ options in one.
︎
Missing Current Date
The user didn’t know what day it was exactly when checking the forecast in the desired place ︎︎︎ The date was added right below Top Bar.
The user didn’t know what day it was exactly when checking the forecast in the desired place ︎︎︎ The date was added right below Top Bar.
UI & Visual Design
Challenge ︎︎︎How the app should evoke the feeling of freedom and adventure related to the practice of outdoor activities in Nature?
Importance ︎︎︎ We are dealing with a lot of information here. Weather data cannot be changed, but the approach to it. Needs to be clear and vibrant.
Solution ︎︎︎ I conducted research in colour theory & imaginary, resulting in various UI Styles that I tested through a Preference Test to determine the ‘line of design’.
Screen A: Plain Color + Illustrations. - Result: 41% / Option B: Background Photo. - Result: 59%.
Tool: Usability Hub / Number of Participants: 64 / Link was online for 24h.
We want an App that communicates freedom, adventure & nature.
With all these in consideration, I created in Figma a High Fidelity prototype and a Design Language System for the TideUp! - To difference the application from its competitors in the market, I have focused on appealing to the visceral level known strategy. Complete Design Language System ︎︎︎
Figma Prototype ︎
Project Takeaways ︎
It was exciting and challenging working on this project. I learned a lot about the subject. How to not spend too much time on tiny details and instead create an MVP and move forward with the next phase.
I am thrilled to develop the ‘Emergency Area’ feature that doesn’t exist in other Weather or Outdoor Activities Apps.
To have a product that could be launched it would be needed to repeat the same processes with the rest of the features still in the early stages.
So always - Prototype, Test, Iterate. Repeat -
I am thrilled to develop the ‘Emergency Area’ feature that doesn’t exist in other Weather or Outdoor Activities Apps.
To have a product that could be launched it would be needed to repeat the same processes with the rest of the features still in the early stages.
So always - Prototype, Test, Iterate. Repeat -