Patti Hazel



Bold solutions to create meaningful experiences.

Information︎︎︎

Projects


  1. TideUp!
  2. Word Travelling
  3. Takeda


Let’s work together!


Email
Behance


The END Atelier




Tide Up!



UX Case Study
My Role: UX Design, UI Design, User Research


Objective:

App to provide beautifully displayed and easy to understand wind, wave, and weather reports, forecast and statistics for sailors, surfers, hikers, climbers and any other ourdoor activity aficionado.

“The easiest app to understand the weather reports.  Practise outdoor activities in the safest way”




The Problem:

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 an easy approach to check and truly comprehend the weather reports and forecast data. Because they wish to expend the best day outside, with no surprises and in the safetest way.
  1. Complicated graphics
  2. High and dense amount of information
  3. Not updated or live reports
  4. An app that doesn’t have all the necessary data gathered and focused in Outdoor Activities.






1. Understand

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 & Windy.com  




2. Observe

How users use the product? How much they know about forecast and how to read the weather? How the forecast cause an impact in the activity performance?

 To get the first-hand information about users’ goals and needs I performed User Research. By observing how real users interact in real time with similar products, organic data was collected through User Interviews.


Insights:

  • Weather has a big impact on the outdoor activities plan
  • No knowledge of weather reports
  • Have specific forecast for the desired activity, hide the rest
  • Customizable Main Screen under necessities & desires of the users
  • Simple graphics, clearer info
  • Accuracy for Safety



3. POV 

Point Of View - For who are we solving the problem?
After collected and broke down all the data, the creation of Proto-personas using this information was key to continue with a UCD product.


Melvin ‘The Adventurer’


26 / Male, Single / Based in Copenhague / Digital Creative

Practise: Few times a year
Activity: Every sport that brings up his adrenaline 

“I dream with taking a sabatic year and travel the world just practising outdoor activities and getting to know hidden spots”

Bio, Motivations, Goals & Needs, Frustrations ︎︎︎


Sarah ‘The Regular’


34 / Female, Engagled / Based in Barcelona / Marketing & Sales

Practise: Every Week and Holidays
Activity: Surf and Outdoor Climbing

“I want to have the best time every weekend I plan to go somewhere to surf or climb. Accuracy in the reports and safety is crucial to enjoy 100%”

Bio, Motivations, Goals & Needs, Frustrations ︎︎︎



4. Ideate

Now that I had a fully undertand for who I am solving the problem, it was time to start defining how the app will be built, and therefore which ones will be the main features.

I started with drawing some user flows and user journeys that led me to creating the structure - Information Architecture for my app.


User Journeys


User Flows


Site Map
A first site map was created using all the above information. But once again, and to continue with a UCD process, a card sort was condunted with real users, and the results lead me to an amended and simpler Site Map.




5. Prototype

Having all these infos at my disposal, I started the design process. First sketching some wireframes by hand, just with pen and paper.



Low Fidelity Wireframes in Marvel.
Then I moved these sketches to Marvel to quickly light a bit of what the app will become in a digital environment. This helped me a lot to spot possible flaws and early errors. Like an internal testing process.


Medium Fidelity Prototype In Adobe XD
After playing around in Marvel, I decided to upgrate my wireframes from Low to Mid Fidelity with Adobe XD and create a first prototype so I could test it with real people.

Live Prototype Link ︎︎︎



6. Test

In this decesive phase, I conducted Usability Testing with real users. The aim of this testing was to collect feedback and first impressions of the TideUp! App.



Test Objectives:

1. Determine if participans understand the overall porpouse of the app.

2. Check if they are able get the customizable dashboard feauture.

3. Observe how quickly they find their desirable spot.

4. See if the users know how to filter and read the forecast for an specific activity.

5 Usability Test Sessions were conducted between Dec 03rd and Dec 05th, with one participant at a time. Participants were recruited by personal contact.

They were screened for basic demographic information to ensure they fit with the user persona of Tide Up!

Methodology: Moderate, In person and Remote. The test included a short briefing, task performance (2) with Tide Up! conducted on a mobile device, and a debriefing.


Full Usability Testing Plan, Script & Report ︎︎︎



In addition to the Usability Testing, a first round of Preference Testing was done for the Onboarding, to shed light in the line of design that the app will follow.  

Screen A: Background Photo.  >> 59% 

Screen B: Plain Color + Illustrations. >> 41%

Tool: Usability Hub
Number of Participants: 64
Link was online for 24h.



UI & Visual Design

Performing usability tests ended up with several key findings. In addition, the result of the preference test give me a hint of how the users would prefer the line of design.

With all these in consideration, I created in Figma a High Fidelity prototype and a Design Language System for the TideUp! following the Universal Design Principles, Design System Implementations and having in mind Accesibility Guidelines.  

Design Language System ︎︎︎








Project Takeways

It was very fun and challenging working in this project. I learned a lot about the subject, and how to not spend to much time in little details. Create a MVP and moving forward with the next phase.

Of course, many other core feautures must be developed. I am specially excited to create the ‘Emergency Area’ which it’s a feature that doesn’t exist in other Weather or Outdoor Activities Apps.

It’s needed to go through again with the same processes explained above in order to finish the main parts of the app and have a product that could be launched.

So always - Prototype, Test, Iterate. Repeat -