Check Prototype

Overview

Objective
Gometeo was developed during taking part in the User Experience Design Course at Career Foundry. The project brief stated to develop a special weather forecast app that provides outdoor sports enthusiasts like surfers, sailors, hikers or other sport groups with the needed set of weather data.
The project is based on the objective of having access to any weather data.
goals
1. Design a customizable weather forecast app for outdoor sports enthusiasts.

2. Develop a profile for one example sports group.
client
CareerFoundry
Role
Product Strategist
User Researcher
Interaction Designer
UI Designer
timeframe
Oct. 2020 - Feb.2021

Design Process

Competitive Analysis
User Stories
Survey
User Interviews
Personas
User Journey
User Flows
Card Sorting
IA
Wireframes
UI Design
Usability Testing
AB Testing
Collaboration
Design Principles

Empathize

Competitive Analysis

two Competitors
To get a first impression of what the popular weather apps for outdoor sports people have to offer, I picked two apps, windy.com and windy.app to analyze their key objectives and strategies and conducted the SWOT analysis on both apps. The following example shows one out of two generated SWOT tables.
swot example
Strengths
  • Provides a reliable weather forecast
  • Distinguishes between sports activities and therefore presents filtered content
  • Keeps a weather history for the past 10 days
  • Chat for Spots
  • No adds
Weaknesses
  • Sometimes confusing arrangements of  displays and numbers
  • Advertising a community but the contributions  are spread
  • Pro icons everywhere: Tries users to get to buy  the pro version
  • Weak onboarding process
  • Surveys are only displayed in the app
Opportunities
  • Layering & structuring the data for specific groups of people
  • Community
  • Tutorials
  • Weak onboarding process
  • Blog article overview and sorting system
Threats
  • “Community” section is misleading, there is only a gallery, no groups, no discussions
  • No Login platform on the website
Findings
After analyzing the SWOT lists, I defined points that were relevant to develop a competitive and unique product:

User Interviews

After running a quick online survey to gather a brief overview on which weather data is relevant to which sports group, interview goals were defined as follows. The interviews were conducted online via skype.
goals
  • Understand how do sport enthusiasts check their weather data.
  • Understand the context of the needed data for specific activities.
  • Get insights why people use certain or more services in particular.
4 participants
  • Surfer
  • Windsurfer
  • Paraglider
  • Scuba dive instructor
analysis with affinity mapping
key findings

Processing Information

The collected data from the survey and interviews served as foundation for further development steps such as personas, journey maps, user flows, and the final activity profiles of the app. Regarding that the app  had to be designed after the MVP method, one sports group had to be chosen as the first example group.

Define

Personas

From the collected data 3 personas were created which represent one part of the target audience. Depending on the weather profile being developed for a certain activity, one of the personas temporarily slides into focus. For this first and only run it was Peter the surfer.
Zanna, age 27
Kitesurfer
Peter, age 34
Surfer
Théo, age 36
Hiker, Ski tourer

User Journey

The journey map based on Peter's persona was created to show a scenario with possible thoughts  and emotions while completing a specific task in the app.

User Flow

As the user journey is described by a chain of tasks, I picked the one from phase 3 to draw a user flow in order to see how this task divides into actions and decisions.
objective
Peter plans to go surfing tomorrow to a certain surf spot and therefore wants to check the swell, wind, wave and weather conditions.
task analysis
  1. 1. Open app, already logged-in, home screen
  2. 2. Search for spot: navigate to spot on map
  3. 3. Choose date
  4. 4. See swell on map, use time slider
  5. 5. Toggle wind data on map, user time slider
  6. 6. Scroll down to see additional data
  7. 7. Make decision

Ideate

Card Sorting

goals
  • How would users, in this case surfers, divide weather data between a normal forecast and the surf relevant forecast.
  • What order of the app's elements would users prefer.
setup
8 surfers who got to sort 29 cards into 4 categories via the online tool Optimal Sort.
results
Placement and order of card data defined.
New idea: Divide general weather data from the specific activity data. This results in creating amore paged forecast to prevent cognitive overload.

PROTOTYPE

Mobile Low-fi Wireframes

One of the key features I defined to develop first was how to create or enable a surfing profile as this was the first task a surfer was meant to complete when using the app for the first time.
1. Home screen, tap Edit.
2. Tap New Profile.
3. Pick surfing from the list,
read info about profile.
4. Hint to new page + confirm.
5. Surfing profile generated.
1. Home screen, tap Edit.
2. Tap New Profile.
3. Pick surfing from the list,
read info about profile.
4. Hint to new page + confirm.
5. Surfing profile generated.

Mobile High-fi Wireframes

While developing those wireframes into a prototype I struggled with the positioning of the "Add New Activity" function. This became an interesting function to test with users.

Desktop Wireframes

Simultaneously to the mobile frames wireframes were developed for the desktop version. Here I'm showing the second function that would become an interesting feature which was named "Edit profile". This function allows users to customize their screen by changing the order of the displayed weather data widgets.

Testing

Usability Testing

Through usability testing I was able to identify real pain points the users had and applied some radical changes to improve the prototypes of Gometeo.
Previous Prototype Frames
1. Splash
2. Signup
3. Onboarding
4. Home
1. Splash
2. Signup
3. Onboarding
4. Home
1. Splash
2. Signup
3. Onboarding
4. Home
problem
One issue was that participants' attention was distracted when landing on the home screen. One of the first things they were supposed to do was to find and add their activity the to home screen. Even the flag on the bottom only partly triggered the participants to fulfill the task.
solution
I learned that better communication was needed to achieve the goal. So my solution was to rearrange the script and introduce a prompt that pushed the user to choose their activity after they had completed the sign up process. As a consequence the onboarding was shifted to the beginning.
New Prototype Frames
1. Splash
2. Onboarding
3. Signup
4. New Prompt
5. Home
1. Splash
2. Onboarding
3. Signup
3. Signup
4. New Prompt
5. Home
1. Splash
2. Onboarding
3. Signup
4. New Prompt
4.
5. Home

Refine

Methods

Not only usability testing was causing improvements to the design of Gometeo but a numerous amount of small tests like AB testing, collaboration and applications of design principles. This example shows applying Gestalt Principles and introducing color.
  • Law of similarity
    As the icons are interactive and so is the button on the bottom it was important to bring those elements together on one layer by applying the same color and shadow and adjusting the shape.
  • Hierarchy & Proportion
    The size of text is very important in this case as the user is confronted with a greeting, a prompt, captions and an unusual button that prompts them to make a decision. It was necessary to reduce the size of the "Please..." prompt to establish a visual bridge towards the icons and their even smaller captions.To improve proportions the size of the text was adjusted after the "Material Design" type scale.
  • Unity
    Adjusting the width of the "I'll do it later" button towards the width of the window and width of the grouped icons also leads to less distraction.

FINAL Design

All frames

To round up and polish the design the final ingredient added was to integrate and define design elements and patterns. Here some of the commonly known material.io design guidelines were adapted, for example the elevation structure for elements which results in applying the strength of shadows after certain rules. This can be best recognized in the home or surfer screen further below.
The introduction screens are meant to connect the audience with their activity in mind, therefore images were chosen carefully. The onboarding screens were set up into an auto rotating animation.
Attention was paid to make Gometeo an accessible app from the beginning by the use of color, symbols and descriptive captions.
In this set of frames we see the transition of the design language from image to data oriented.
What happens when you tap on Date, Location or Surfing?
Add a new activity starting from your home screen.
Edit mode allows the user to easily add and move the weather widgets.

Conclusion

  • The goal to design a customizable weather forecast app for outdoor sports enthusiasts was reached succefully.
  • During the development process it became clear that navigational functions like move or add widgets had to be addressed with high priority as they form the foundation of the app. Usability testing was focused on this functions and resulted in a vital improvement.
  • Simultaneously the surfers profile was developed to serve as an example and form a template for further sports profiles.
  • As no visual design goals were set, yet the design of the app reached a surprisingly high level of detail and depth.

Prototype - click on the blue screen & press R to restart the app

Let's connect!

Did you enjoy my work? Or do you have questions?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Michaela Czech © 2021