Preparely

UX methods

Competitive analysis
User surveys & interviews
Affinity mapping
Rainbow spreadsheet
User personas & User journeys
Card sorting
Low, mid & high fidelity wireframes
Low, mid & high fidelity prototypes
Moderated usability tests
Unmoderated usability tests
Preference tests 

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

    UX methods

    Competitive analysis
    User surveys & interviews
    Affinity mapping
    Rainbow spreadsheet
    User personas & User journeys
    Card sorting
    Low, mid & high fidelity wireframes
    Low, mid & high fidelity prototypes
    Moderated usability tests
    Unmoderated usability tests
    Preference tests

    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 analyze 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

      Thank you!