Bethany Moy

03

Project

Tempr — A Weather
Visualized App

An Overview

An IOS app geared towards users challenged with weather displayed as a number. Tempr suggests weather appropriate clothing with witty, humorous phrases that update daily.

Type

Mobile App

Role

Research, UI/UX,
& Prototyping

Tools

Illustrator & Pixate

Duration

November - December
2015 (1 month)

I find it hard to get a sense of temperature with current weather apps and often dress inappropriately. Like what does 20° actually feel like? I honestly don’t know because I can’t feel anything from just a number.

Jennifer Moy, Weather Confused
The Problem

Interpreting Temperature in Numbers

Knowing the weather and temperature conditions have become an integral part of our daily lives whether it be to get ready for work or prepare for an outdoor activity or night out. However, current weather apps on the market tend to overcomplicate this simple process in our lives by adding an excess of unnecessary features and providing information on additional weather details that most users don’t care about.

The Goal

Visualizing Weather

Create a weather app that uncomplicates the information and the process of decoding current and future weather forecasts through a minimal amount of screens and interactions. To make the information easier to digest, the app should focus on making the numerical data more meaningful to the user through a cohesive visual language.

Communicating through visuals will not only transcend boundaries between language and different measures of temperature — Celsius & Fahrenheit — but will allow users to feel the temperature and weather — through connotative messages implied through colour and illustrations.

Susan Kim, Aga Khan Museum
User Analysis

Identifying the User

People

Students / workers preparing to get ready to go outside — can occur anytime throughout the day, but most likely mornings before classes or work. They are often stressed, have low attention spans, and are tired in the mornings.

Activities

Commutes to get to other places (on a daily basis) or has plans revolving around the weather. Getting ready is an individual activity, but planned outdoor activities can affect group settings. If unprepared, weather conditions can also affect the user’s health and mood.

Contexts

Would occur before the user leaves home and would be viewed indoors since they are not affected by the weather and need to prepare before they go outside.

Technologies

Tech-savvy, familiar with most touch and gestures available in current apps on the market. Important that the app provides accurate information since it can affect many of the user’s decisions that day. Inaccurate weather forecasts can affect user’s health and mood.

Process

4 Simple User Flows

3 main pages: current weather pages, weather in 5 days, & location management. Users can add additional pages when locations are added.

Process

From Sketches to Wireframes

By wireframing, I was able to figure out how to condense 3 key types of providing visual information: humorous phrases to visualize weather, colour to indicate temperature, and clothing illustrations to indicate weather and temperature with a minimal amount of screens. Easy & intuitive gestures were implemented to access other hidden information.

Key Features

The App

Colour as an Indicator

Temperature is viewed through the colour of the screen. Added locations can be seen by swiping the main screen left or right.

Illustration as an Indicator

Illustrations of suggested clothing are displayed on the main screens so that users can quickly understand how they should dress for the day.

User Scenarios

01 / Viewing Today's Weather

Needs: Susan has a low attention span in the morning and is irritable before classes. She needs an easy summary of the weather for the day without having to think too hard about it.

How: She opens up the app and the weather of her current location is automatically displayed. She sees a written descriptor of the weather with suggestions of types of clothing to wear for the day. She scrolls down to view the weather in greater detail and a breakdown of the day hourly.

User Scenarios

02 / Customizing Locations

Needs: Stefana is from San Francisco and needs to prepare for a 2 day business trip to Beijing. She wants to get an idea of what the weather is like in preparation for her trip.

How: She taps the add button in the top-right corner and then taps on location to type the name of the city: Sydney. She drags the Beijing module from the last position to the second to easily compare temperatures between San Francisco and Beijing.

User Scenarios

03 / Viewing 5 Day Weather & Converting Units

Needs: Stefana wants to get an idea of what the weather is like in preparation for her trip.

How: Stefana double taps the Beijing screen to view the weather in the next 5 days. She taps the unit coverter to convert the units from Celsius to Fahrenheit. She now has an idea of what clothes to pack and what weather to expect during her stay in Beijing.

Other Work

Smart Fridge

Mobile App, Product Design

Hard Candy

Editorial & Art Direction