Preparely

Duration

5 months

Role

UX design, User research & UI design 

Process

Design thinking

Tools

Adobe photoshop
Adobe Illustrator
Adobe XD
Google forms
Optimal sort
Balsamic
Sketch
Figma
Invision
Usability hub
Marvel

Understand

Problem statement

Our users need a way to be advised on if the weather conditions are safe for them to go out on the water, based on their set preferences (level of experience, activity, and favourite location, etc.). They should have a way to see what weather conditions are important for their safety in that way they will learn to recognise which conditions are safe and which are not. They also need a way to check how crowded the location is they are planning to go to.

We will know this to be true when our users can read expert advice on if the weather conditions are safe for them if they can see what conditions are needed to make the right decision, and if they can access a live feed to see if the location that they are planning to go too is crowded or not.

Objective

Provide beautifully displayed and easy-to-understand wind, wave, and weather reports, forecasts, and statistics for water sports aficionados.

Design thinking

Research

Competitive research

To understand the problem and the current market in weather forecasting apps for water sports fanatics I conducted a competitive analysis on two of the currently most popular apps in the app store | Windy and predictwind.com

By conducting a SWOT analysis on these two applications I got a better understanding of my immediate competitors’ strengths and weaknesses. Further research into their overall strategy, market advantage, and marketing profile gave me valuable insight into their users, their popularity and revealed opportunities for Preparely to excel.

A thorough UX analysis focusing on usability and navigation revealed useful features as well as unuseful features for Preparely to leave out or build in. 

User research and analysis

After the competitive research, I started an online survey to gather quantitative data to get a better understanding of who our potential users are. I figured that before I can come up with a helpful solution, I need to know the kind of water sports that our users perform, their skill levels, location, preferred weather conditions, most used features, etc. After conducting the survey, I gained a better perspective on who our users are and what they expect from a weather app.

I used these newfound target audiences to find 5 other persons with whom I conducted user interviews to acquire qualitative research and get an even more
in-depth understanding of our users’ motivation to use a weather app, their needs,
and their frustrations when using competitor apps.

All the acquired data I compiled and used affinity mapping to analyse the results.

Empathize

User Persona

To make sure to keep a User-centred design I’ve created two user personas to revisit throughout the project to keep reminding myself of the user’s needs and frustrations. One intermediate and one beginner-level water sport fanatic. 

User journeys

User journey maps help me to empathize even more with our users by tracking and mapping out their thought and emotion while interacting with the app. Below you can see a journey map for each of my personas.

Ideate

User flows

To visualize the steps that my personas have to take to finish their goals I have created a user flow for each specific task. These user flows also highlight the start of building the information structure of the app. Below you will find one of the journeys that I think is most important for the app.

Open card sort

To gain insight as to how users would like to see the features organized and displayed in the app I conducted an open card sort. Users were asked to combine features they found similar and give them a category.

After conducting the research, I’ve decided to keep the categories that I had already, change the names to make them clearer, and add two categories that I deemed useful from the research.

Platform: Optimal Workshop
People: 8 participants
Method: Open card sort
Time: participants took an average of 6 min

The new categories I use are:

• Weather forecast (used to be the weather)
• Location (Same)
• Live streams (Same)
• Expert advice ( new)
• Blog (Same)
• Emergency numbers (Same)

Sitemap

Using the data collected from the card sort I created the following sitemap.

Prototype

Low, mid and high-fidelity wireframes

To visualize the app, I started sketching low-fidelity wireframes with pen and paper. After I sketched out 3 user flows, I translated them into mid and high-fidelity wireframes. The high-fidelity wireframes were used to make a prototype to be tested by users.

Testing

User testing

6 participants took part in the usability testing sessions. I practiced 2 moderated remote, 2 unmoderated remote, and 2 in-person sessions. The goal of the study was to find out if the users understood the function of the app and if they were able to access the features easily. I also observed if the user could easily understand and explain the meaning of the shown information.

Objectives

• Do users understand that they must make a profile before the app can provide them with personal advice?
• Are users able to intuitively make an account and set their preferences for the app to be able to give weather advice?
• Do users understand that they can save more than one set of preferences and they can scroll through them?
• Are users able to give a basic explanation about what the weather conditions mean within 5 minutes of using the app?
• What are the user’s thoughts/feelings when they open the app? Are they overwhelmed with information? Or do they miss information?

Takeaways

All results, including participant observations, positive and negative quotes/expressions, and errors were translated into an affinity map and then put into a rainbow spreadsheet so I could get an overview of behavioural patterns / issues and come up with changes. The most important errors and possible solutions you will find underneath in the design iterations.

Refine

Home screen

I think the home page is the page that went through the most iterations in this project. What started as an overview of weather predictions when first thinking about it changed completely during the usability testing. For the usability testing, I’ve used a prototype with high fidelity wireframes and tested it on 6 different users. The results of the testing stated that users couldn’t find the most important features of the app or that they were difficult to access. I’ve decided that even though Preparely is a weather app this does not have to be the main focus. I threw away the original plan and came up with a home page that showcased the most important features straight there without having to access them via the hamburger menu. This led to the first fully designed screen. This screen went through a round of feedback from other designers and a round of accessibility testing where I found out that the text was too small, the screen was too full, and it lacked contrast. I changed all of this in the latest screen which you can see in the iPhone mock-up.

Login screen

The login screen is pretty straightforward and has not seen a lot of changes. The biggest changes came in the last stages. After translating the high-fidelity wireframe to a design, I found it might be better to give the button the same size as the form fields. It had mainly an aesthetic reason. Same as transforming the overlaying box into a more integrated box flowing together with the background. After receiving feedback from other designers and conducting accessibility research we changed the size of the button and text and created form fields that have labels and more explanatory placeholder text.

Weather preference screen

The preference screen has also seen a lot of big changes. In the original screens, the low and mid-fidelity were used as a carousel of questions about what kind of weather the user would prefer. As is shown in the second screen this ended up being quite a few so after stakeholder feedback we decided to change it in into one screen with a preference that could be set via a drop-down menu. In the designed screen you will find the first draft that also changed drastically after designers’ feedback and accessibility design. The buttons got bigger, the titles are aligned.

Design

Style guide

Thank you!

Preparely

Duration

5 months

Role

UX design, User research & UI design

Process

Design thinking

Tools

Adobe photoshop
Adobe Illustrator
Adobe XD
Google forms
Optimal sort
Balsamic
Sketch
Figma
Invision
Usability hub
Marvel

Problem statement

Our users need a way to be advised on if the weather conditions are safe for them to go out on the water, based on their set preferences (level of experience, activity, and favourite location, etc.). They should have a way to see what weather conditions are important for their safety in that way they will learn to recognise which conditions are safe and which are not. They also need a way to check how crowded the location is they are planning to go to.

We will know this to be true when our users can read expert advice on if the weather conditions are safe for them if they can see what conditions are needed to make the right decision, and if they can access a live feed to see if the location that they are planning to go too is crowded or not.

Objective

Provide beautifully displayed and easy-to-understand wind, wave, and weather reports, forecasts, and statistics for water sports aficionados.

Design thinking

Competitive research

To understand the problem and the current market in weather forecasting apps for water sports fanatics I conducted a competitive analysis on two of the currently most popular apps in the app store | Windy and predictwind.com

By conducting a SWOT analysis on these two applications I got a better understanding of my immediate competitors’ strengths and weaknesses. Further research into their overall strategy, market advantage, and marketing profile gave me valuable insight into their users, their popularity and revealed opportunities for Preparely to excel.

A thorough UX analysis focusing on usability and navigation revealed useful features as well as unuseful features for Preparely to leave out or build in. 

User research and analysis

After the competitive research, I started an online survey to gather quantitative data to get a better understanding of who our potential users are. I figured that before I can come up with a helpful solution, I need to know the kind of water sports that our users perform, their skill levels, location, preferred weather conditions, most used features, etc. After conducting the survey, I gained a better perspective on who our users are and what they expect from a weather app.

I used these newfound target audiences to find 5 other persons with whom I conducted user interviews to acquire qualitative research and get an even more
in-depth understanding of our users’ motivation to use a weather app, their needs,
and their frustrations when using competitor apps.

All the acquired data I compiled and used affinity mapping to analyze the results.

User Persona

To make sure to keep a User-centred design I’ve created two user personas to revisit throughout the project to keep reminding myself of the user’s needs and frustrations. One intermediate and one beginner-level water sport fanatic. 

User journeys

User journey maps help me to empathize even more with our users by tracking and mapping out their thought and emotion while interacting with the app. Below you can see a journey map for each of my personas.

User flows

To visualize the steps that my personas have to take to finish their goals I have created a user flow for each specific task. These user flows also highlight the start of building the information structure of the app. Below you will find one of the journeys that I think is most important for the app.

Open card sort

To gain insight as to how users would like to see the features organized and displayed in the app I conducted an open card sort. Users were asked to combine features they found similar and give them a category.

After conducting the research, I’ve decided to keep the categories that I had already, change the names to make them clearer, and add two categories that I deemed useful from the research.

Platform: Optimal Workshop
People: 8 participants
Method: Open card sort
Time: participants took an average of 6 min

The new categories I use are:

• Weather forecast (used to be the weather)
• Location (Same)
• Live streams (Same)
• Expert advice ( new)
• Blog (Same)
• Emergency numbers (Same)

Sitemap

Using the data collected from the card sort I created the following sitemap.

Low, mid and high-fidelity wireframes

To visualize the app, I started sketching low-fidelity wireframes with pen and paper. After I sketched out 3 user flows, I translated them into mid and high-fidelity wireframes. The high-fidelity wireframes were used to make a prototype to be tested by users.

User testing

6 participants took part in the usability testing sessions. I practiced 2 moderated remote, 2 unmoderated remote, and 2 in-person sessions. The goal of the study was to find out if the users understood the function of the app and if they were able to access the features easily. I also observed if the user could easily understand and explain the meaning of the shown information.

Objectives

• Do users understand that they must make a profile before the app can provide them with personal advice?
• Are users able to intuitively make an account and set their preferences for the app to be able to give weather advice?
• Do users understand that they can save more than one set of preferences and they can scroll through them?
• Are users able to give a basic explanation about what the weather conditions mean within 5 minutes of using the app?
• What are the user’s thoughts/feelings when they open the app? Are they overwhelmed with information? Or do they miss information?

Takeaways

All results, including participant observations, positive and negative quotes/expressions, and errors were translated into an affinity map and then put into a rainbow spreadsheet so I could get an overview of behavioural patterns / issues and come up with changes. The most important errors and possible solutions you will find underneath in the design iterations.

Home screen

I think the home page is the page that went through the most iterations in this project. What started as an overview of weather predictions when first thinking about it changed completely during the usability testing. For the usability testing, I’ve used a prototype with high fidelity wireframes and tested it on 6 different users. The results of the testing stated that users couldn’t find the most important features of the app or that they were difficult to access. I’ve decided that even though Preparely is a weather app this does not have to be the main focus. I threw away the original plan and came up with a home page that showcased the most important features straight there without having to access them via the hamburger menu. This led to the first fully designed screen. This screen went through a round of feedback from other designers and a round of accessibility testing where I found out that the text was too small, the screen was too full, and it lacked contrast. I changed all of this in the latest screen which you can see in the iPhone mock-up.

Login screen

The login screen is pretty straightforward and has not seen a lot of changes. The biggest changes came in the last stages. After translating the high-fidelity wireframe to a design, I found it might be better to give the button the same size as the form fields. It had mainly an aesthetic reason. Same as transforming the overlaying box into a more integrated box flowing together with the background. After receiving feedback from other designers and conducting accessibility research we changed the size of the button and text and created form fields that have labels and more explanatory placeholder text.

Weather preference screen

The preference screen has also seen a lot of big changes. In the original screens, the low and mid-fidelity were used as a carousel of questions about what kind of weather the user would prefer. As is shown in the second screen this ended up being quite a few so after stakeholder feedback we decided to change it in into one screen with a preference that could be set via a drop-down menu. In the designed screen you will find the first draft that also changed drastically after designers’ feedback and accessibility design. The buttons got bigger, the titles are aligned.

Style guide

Thank you!