MY ULTIMATE WEATHER GRAPH
DATE COMPLETED:
PROJECT TYPE/MEMBERS:
TOOLS USED:
COURSE:
(DESN 2021)
LOCATION:
BACKGROUND:
This assignment is a data visualization log that collects information based
on your choosen topic of choice. I decided to create a personalized information
log were the weather, mood, and activities are tracked throughout the month of
march. From there, you are able to make comparisons and connections between
my behavior and the weather!
THOUGHT PROCESS:
For this project, I wanted the theme to feel like you were watching the weather
network television station. I essentially wanted the user to be immersed into a
setting that was appealing and exciting to interact with, rather than being a boring,
lack luster visualization. For this design project, I strive to educate the user about
how my graph works. I also want to make the user experience pleasant and overall fun!
PROBLEM:
“Wants to understand the way in which data can be organized
through my daily activities, mood, and weather patterns”.
SOLUTION:
“Create a platform where your’re able to see my daily routines
correlate to march’s weather patterns.
CHECKLIST:
THE PROCESS:
IDENTIFYING A TOPIC:
Before the weather idea became my main topic, I decided to explore other data
visualization topics in order to look at my options and have more variety to choose from.
POSSIBLE OPTIONS:
1. Skip the Dishes history
2. Fitness history
3. Amazon History (What I bought/Pricing)
4. Tracking the distance where I drive throughout the day?
5. Social Media History (Phone tracking)?
6. Tracking the weather (Weather in March) (TV) watching a TV weather network?
TOPIC OF CHOICE:
OPTION #6: Tracking the Weather/Personal Weather Tracker
WHY CHOOSE OPTION 6?
I Wanted to go with an idea where I could incorporate many different
experiences with natural events into one topic/story. I thought this would
be the perfect idea to explore content/unexpected media.
TOPIC EXPLORATION:
During the topic exploration faze, I looked into possible elements that I could add to the
graph in terms of data collection and comparison. Listed below are some ideas that I researched.
Weather = (Rainy, Cold, Snowy, Sunny). Clothing = (Sweaters, jackets, shoes, ect.) Heart Rate = (Show a heart rate monitor?)
& Temperature = (Negatives, positives)
& Temperature = (Negatives, positives)
Mood = (Feelings (sad, happy, tired, angry) Objects = (shovel, umbrella, sled, ect.)
TYPEFACE SELECTION:
Throughout this wide selection of typefaces, I decided to go with ITC Franklin Gothic STC for headings, sub-titles, body text.
For the main title I went for a typeface that was more modern called Lexend Zetta. I felt like this font really grabbed the attention of it’s viewers.
For the main title I went for a typeface that was more modern called Lexend Zetta. I felt like this font really grabbed the attention of it’s viewers.
COLOR SCHEME:
Regarding the color scheme, I aimed to select hues commonly found in nature. For instance, I chose blue to
represent the sky, grey for the clouds, and yellow for the sun. The dark blue shade (#24344D) at the top of the
color palette will serve as the primary background color. I believe that dark backgrounds effectively enhance the
visibility of other elements and information on the screen, providing a beautiful contrast.
FIRST MOCKUP:
Here within the first mockup, we can see the beginnings of what the app could look like.
“The Ultimate Weather Planner” startup gives you a small understanding of what the planner is about based off the title
and the background. As you scroll down you can see the march calander (right-hand-side), where you’re able to hover over certain
dates and essentially click and compare different tempretures, clothing, objectives, and activities based on the weather.
“The Ultimate Weather Planner” startup gives you a small understanding of what the planner is about based off the title
and the background. As you scroll down you can see the march calander (right-hand-side), where you’re able to hover over certain
dates and essentially click and compare different tempretures, clothing, objectives, and activities based on the weather.
BACK TO THE DRAWING BOARD:
After considering the critiques provided during the iterations between each mockup, I decided
to adopt to a "story-based" approach. Instead of presenting data and potential events for each day, I wanted to include
personal elements related to my mood and activities aswell. This adjustment enables a more detailed depiction of my
daily life, including weather conditions and mood, and encourages the exploration of interesting connections.
GRAPHS AND ORGANIZATION:
NOTE: The image above was an earlier mockup of the graph and has been updated!
FACT: Based on the color legend above in the first image, you are able to compare my mood, activity, and the weather.
FACT: Each individual line and dot was designed by hand due to the intricate data and information.
PROTOTYPING ISSUES:
While prototyping the March weather graph, my intention was to offer users the flexibility to select any date they desired and
compare weather changes day-by-day. However, it became apparent that Figma only allows for one overlay to be open at a time,
preventing users from selecting multiple options simultaneously. Although I couldn't directly address this limitation, I had to adapt
and make the best of the situation. Instead of the initial concept of allowing users to choose multiple dates to display individual
temperatures, I provided them with the option to view each day's data separately or compiled together.
Above is a reddit comment that I found which proves that this was an on-going struggle for many who want to integrate
many overlays at once. I believe that Figma should look into this issue and investigate ways to make prototyping more flexible.
FINAL PROJECT (MOCKUPS/VIDEO):