KNOW YOUR CLIMATE
UX Design, 2 weeks
A WEATHER APP THAT HELPS YOU MAKE BETTER SENSE OF CLIMATE CHANGE
MY ROLE
MY ROLE
MY ROLE
MY ROLE
Research
Prototyping
UI & UX Design
Research
Prototyping
UI & UX Design
Research
Prototyping
UI & UX Design
Research
Prototyping
UI & UX Design
TOOLS
TOOLS
TOOLS
TOOLS
Origami Studio
Sketch
Origami Studio
Sketch
Origami Studio
Sketch
Origami Studio
Sketch
CONCEPT
CONCEPT
CONCEPT
PROBLEM SPACE
When it comes to climate change, we are running out of time. The United Nations Intergovernmental Panel on Climate Change reports that our planet has only until 2030 to avoid irreversible damage to our ecosystems. The call for climate change is not new, but why has it been so hard to take action? Albeit rising temperatures and rising seas, the feedback cycle is inherently long and it’s difficult to see direct correlation between individual action and wider climate impacts. How could we nudge by awareness to motivate action on climate change to support the needs of both present and future generations?
Know Your Climate is a weather app that helps you learn more about climate change. It has the following key features:
When it comes to climate change, we are running out of time. The United Nations Intergovernmental Panel on Climate Change reports that our planet has only until 2030 to avoid irreversible damage to our ecosystems. The call for climate change is not new, but why has it been so hard to take action? Albeit rising temperatures and rising seas, the feedback cycle is inherently long and it’s difficult to see direct correlation between individual action and wider climate impacts. How could we nudge by awareness to motivate action on climate change to support the needs of both present and future generations?
Know Your Climate is a weather app that helps you learn more about climate change. It has the following key features:
When it comes to climate change, we are running out of time. The United Nations Intergovernmental Panel on Climate Change reports that our planet has only until 2030 to avoid irreversible damage to our ecosystems. The call for climate change is not new, but why has it been so hard to take action? Albeit rising temperatures and rising seas, the feedback cycle is inherently long and it’s difficult to see direct correlation between individual action and wider climate impacts. How could we nudge by awareness to motivate action on climate change to support the needs of both present and future generations?
Know Your Climate is a weather app that helps you learn more about climate change. It has the following key features:
When it comes to climate change, we are running out of time. The United Nations Intergovernmental Panel on Climate Change reports that our planet has only until 2030 to avoid irreversible damage to our ecosystems. The call for climate change is not new, but why has it been so hard to take action? Albeit rising temperatures and rising seas, the feedback cycle is inherently long and it’s difficult to see direct correlation between individual action and wider climate impacts. How could we nudge by awareness to motivate action on climate change to support the needs of both present and future generations?
Know Your Climate is a weather app that helps you learn more about climate change. It has the following key features:
City weather
Providing weather information, hourly and 7-day forecasts in your current location or in other cities. Time of sunrise and sunset, windspeed and humidity are also available.
Climate change
Represented by a change in gradient when scrolling through the timeline: from past, present to future. The growing intensity that is the red, depicts rising local temperatures, and vice versa.
Rising waters
Provides at a glance statistics of sea level change. This feature is activated through the left side bar, with animation responsive to the timeline.
This week in history
Draws awareness to major climate events that happened during the week in history around the world. It comes in the form of notifications and lightweight nudges in-app.
PROTOTYPE
PROTOTYPE
PROTOTYPE
PROCESS
PROCESS
PROCESS
PROCESS
Integrate feedback & iterate
Integrate feedback and iterate.
Integrate feedback & iterate
Integrate feedback & iterate
Integrate feedback & iterate
The process involved three key phases: concept development, prototyping & testing. I began with defining goals of the app and sketching out initial ideas. Speaking with existing users of the iOS weather app, three features were highlighted as essential: (i) weather information, (ii) hourly forecast and (iii) location selection. With this in mind, I aim to strike a balance between user retention and the provision of climate information. I did not want the overload of information to deter audiences from using the app altogether.
Prototyping involved moving from paper wireframes to Sketch and Origami. Feedback sessions helped shape more informed design decisions and iterations. The opportunity to give and receive feedback during class also helped sharpen my eye for identifying positive and negative experiences.
Testing prototypes in people's hands was key to uncovering opportunities for improvement. By observing how users interact with the prototype and encouraging them to think out loud made it possible to better understand their thought process and the crux of certain issues that helped with refinement.
The process involved three key phases: concept development, prototyping & testing. I began with defining goals of the app and sketching out initial ideas. Speaking with existing users of the iOS weather app, three features were highlighted as essential: (i) weather information, (ii) hourly forecast and (iii) location selection. With this in mind, I aim to strike a balance between user retention and the provision of climate information. I did not want the overload of information to deter audiences from using the app altogether.
Prototyping involved moving from paper wireframes to Sketch and Origami. Feedback sessions helped shape more informed design decisions and iterations. The opportunity to give and receive feedback during class also helped sharpen my eye for identifying positive and negative experiences.
Testing prototypes in people's hands was key to uncovering opportunities for improvement. By observing how users interact with the prototype and encouraging them to think out loud made it possible to better understand their thought process and the crux of certain issues that helped with refinement.
The process involved three key phases: concept development, prototyping & testing. I began with defining goals of the app and sketching out initial ideas. Speaking with existing users of the iOS weather app, three features were highlighted as essential: (i) weather information, (ii) hourly forecast and (iii) location selection. With this in mind, I aim to strike a balance between user retention and the provision of climate information. I did not want the overload of information to deter audiences from using the app altogether.
Prototyping involved moving from paper wireframes to Sketch and Origami. Feedback sessions helped shape more informed design decisions and iterations. The opportunity to give and receive feedback during class also helped sharpen my eye for identifying positive and negative experiences.
Testing prototypes in people's hands was key to uncovering opportunities for improvement. By observing how users interact with the prototype and encouraging them to think out loud made it possible to better understand their thought process and the crux of certain issues that helped with refinement.
The process involved three key phases: concept development, prototyping & testing. I began with defining goals of the app and sketching out initial ideas. Speaking with existing users of the iOS weather app, three features were highlighted as essential: (i) weather information, (ii) hourly forecast and (iii) location selection. With this in mind, I aim to strike a balance between user retention and the provision of climate information. I did not want the overload of information to deter audiences from using the app altogether.
Prototyping involved moving from paper wireframes to Sketch and Origami. Feedback sessions helped shape more informed design decisions and iterations. The opportunity to give and receive feedback during class also helped sharpen my eye for identifying positive and negative experiences.
Testing prototypes in people's hands was key to uncovering opportunities for improvement. By observing how users interact with the prototype and encouraging them to think out loud made it possible to better understand their thought process and the crux of certain issues that helped with refinement.
The process involved three key phases: concept development, prototyping & testing. I began with defining goals of the app and sketching out initial ideas. Speaking with existing users of the iOS weather app, three features were highlighted as essential: (i) weather information, (ii) hourly forecast and (iii) location selection. With this in mind, I aim to strike a balance between user retention and the provision of climate information. I did not want the overload of information to deter audiences from using the app altogether.
Prototyping involved moving from paper wireframes to Sketch and Origami. Feedback sessions helped shape more informed design decisions and iterations. The opportunity to give and receive feedback during class also helped sharpen my eye for identifying positive and negative experiences.
Testing prototypes in people's hands was key to uncovering opportunities for improvement. By observing how users interact with the prototype and encouraging them to think out loud made it possible to better understand their thought process and the crux of certain issues that helped with refinement.
Initial designs from Sketch
Synthesizing insights from our interviews
Initial designs from Sketch
Initial designs from Sketch
Initial design explorations on the timeline feature
Story boarding the customer service experience
Initial design explorations on the timeline feature
Initial design explorations on the timeline feature
Prototyping on Origami
One of many co-creations with experts & target audience
Prototyping on Origami
Prototyping on Origami
A REDESIGN !
A REDESIGN !
A REDESIGN !
A REDESIGN !
"Recreate the weather app using no text or numbers on the interface (except for dates)."
"Recreate the weather app using no text or numbers on the interface (except for dates)."
"Recreate the weather app using no text or numbers on the interface (except for dates)."
"Recreate the weather app using no text or numbers on the interface (except for dates)."
"Recreate the weather app using no text or numbers on the interface (except for dates)."
At a glance view
To identify weather and location information. Familiar icons were used for better understanding of the context without words.
Multi-sensory design
Combining visual and auditory modalities. Animation is accompanied with sound to depict changing sea levels or rainfall.
PROTOTYPE
PROTOTYPE
PROTOTYPE
PROTOTYPE
* turn on sound for a better experience
PROCESS
PROCESS
PROCESS
PROCESS
PROCESS
Prototype, test & repeat.
Prototype, test & repeat.
Prototype, test & repeat.
Prototype, test & repeat.
Prototype, test & repeat.
Redesigning the weather app primarily involved prototyping and testing. Challenged with using only visuals, I conducted many quick user testings to ensure audiences can understand information at a glance. I also devoted additional time to develop my prototyping skills on Origami. I explored more complex interface and experimented with various features such as haptics, sound and use of arrays.
Redesigning the weather app primarily involved prototyping and testing. Challenged with using only visuals, I conducted many quick user testings to ensure audiences can understand information at a glance. I also devoted additional time to develop my prototyping skills on Origami. I explored more complex interface and experimented with various features such as haptics, sound and use of arrays.
Redesigning the weather app primarily involved prototyping and testing. Challenged with using only visuals, I conducted many quick user testings to ensure audiences can understand information at a glance. I also devoted additional time to develop my prototyping skills on Origami. I explored more complex interface and experimented with various features such as haptics, sound and use of arrays.
Redesigning the weather app primarily involved prototyping and testing. Challenged with using only visuals, I conducted many quick user testings to ensure audiences can understand information at a glance. I also devoted additional time to develop my prototyping skills on Origami. I explored more complex interface and experimented with various features such as haptics, sound and use of arrays.
Redesigning the weather app primarily involved prototyping and testing. Challenged with using only visuals, I conducted many quick user testings to ensure audiences can understand information at a glance. I also devoted additional time to develop my prototyping skills on Origami. I explored more complex interface and experimented with various features such as haptics, sound and use of arrays.
Exploring different layouts for the summary page
Synthesizing insights from our interviews
Exploring different layouts for the summary page
Exploring different layouts for the summary page
Exploring different interactions to demonstrate climate change
Story boarding the customer service experience
Exploring different interactions to demonstrate climate change
Exploring different interactions to demonstrate climate change
Prototyping on Origami
One of many co-creations with experts & target audience
Prototyping on Origami
Prototyping on Origami
LEARNINGS
LEARNINGS
LEARNINGS
LEARNINGS
LEARNINGS
hands on the phone, asap!
The importance to putting the design into the context of use. Valuable insights were uncovered when observing people interact with the prototype on an actual phone. Displaying the prototype on a huge screen at the first instance gave me a false impression of the actual size of the content. This resulted in discrepancies between expectations and the actual experience, which I rectified only later on.
adjust prototype fidelity based on context
Low fidelity prototypes tend to attract more honest feedback as people tend to feel more comfortable to critique (they believe design is still in its early phase). On the other hand, high fidelity prototypes can be incredibly valuable in communicating ideas. This allows different stakeholders (e.g., engineers or users) to get a better look and feel that's closer ot the imagined concept. I learned to balance between the time and effort it takes to make a prototype and the value I'll get from testing at that particular fidelity.
prototype using separate files
This helps maximize learning early on, as prototyping on one single file can sometimes lead to a lagging computer and “code” complications. With more time spent on debugging, while valuable, could also lose time on testing out certain interactions of features.
hands on the phone, asap!
The importance to putting the design into the context of use. Valuable insights were uncovered when observing people interact with the prototype on an actual phone. Displaying the prototype on a huge screen at the first instance gave me a false impression of the actual size of the content. This resulted in discrepancies between expectations and the actual experience, which I rectified only later on.
adjust prototype fidelity based on context
Low fidelity prototypes tend to attract more honest feedback as people tend to feel more comfortable to critique (they believe design is still in its early phase). On the other hand, high fidelity prototypes can be incredibly valuable in communicating ideas. This allows different stakeholders (e.g., engineers or users) to get a better look and feel that's closer ot the imagined concept. I learned to balance between the time and effort it takes to make a prototype and the value I'll get from testing at that particular fidelity.
prototype using separate files
This helps maximize learning early on, as prototyping on one single file can sometimes lead to a lagging computer and “code” complications. With more time spent on debugging, while valuable, could also lose time on testing out certain interactions of features.
hands on the phone, asap!
The importance to putting the design into the context of use. Valuable insights were uncovered when observing people interact with the prototype on an actual phone. Displaying the prototype on a huge screen at the first instance gave me a false impression of the actual size of the content. This resulted in discrepancies between expectations and the actual experience, which I rectified only later on.
adjust prototype fidelity based on context
Low fidelity prototypes tend to attract more honest feedback as people tend to feel more comfortable to critique (they believe design is still in its early phase). On the other hand, high fidelity prototypes can be incredibly valuable in communicating ideas. This allows different stakeholders (e.g., engineers or users) to get a better look and feel that's closer ot the imagined concept. I learned to balance between the time and effort it takes to make a prototype and the value I'll get from testing at that particular fidelity.
prototype using separate files
This helps maximize learning early on, as prototyping on one single file can sometimes lead to a lagging computer and “code” complications. With more time spent on debugging, while valuable, could also lose time on testing out certain interactions of features.
hands on the phone, asap!
The importance to putting the design into the context of use. Valuable insights were uncovered when observing people interact with the prototype on an actual phone. Displaying the prototype on a huge screen at the first instance gave me a false impression of the actual size of the content. This resulted in discrepancies between expectations and the actual experience, which I rectified only later on.
adjust prototype fidelity based on context
Low fidelity prototypes tend to attract more honest feedback as people tend to feel more comfortable to critique (they believe design is still in its early phase). On the other hand, high fidelity prototypes can be incredibly valuable in communicating ideas. This allows different stakeholders (e.g., engineers or users) to get a better look and feel that's closer ot the imagined concept. I learned to balance between the time and effort it takes to make a prototype and the value I'll get from testing at that particular fidelity.
prototype using separate files
This helps maximize learning early on, as prototyping on one single file can sometimes lead to a lagging computer and “code” complications. With more time spent on debugging, while valuable, could also lose time on testing out certain interactions of features.
hands on the phone, asap!
The importance to putting the design into the context of use. Valuable insights were uncovered when observing people interact with the prototype on an actual phone. Displaying the prototype on a huge screen at the first instance gave me a false impression of the actual size of the content. This resulted in discrepancies between expectations and the actual experience, which I rectified only later on.
adjust prototype fidelity based on context
Low fidelity prototypes tend to attract more honest feedback as people tend to feel more comfortable to critique (they believe design is still in its early phase). On the other hand, high fidelity prototypes can be incredibly valuable in communicating ideas. This allows different stakeholders (e.g., engineers or users) to get a better look and feel that's closer ot the imagined concept. I learned to balance between the time and effort it takes to make a prototype and the value I'll get from testing at that particular fidelity.
prototype using separate files
This helps maximize learning early on, as prototyping on one single file can sometimes lead to a lagging computer and “code” complications. With more time spent on debugging, while valuable, could also lose time on testing out certain interactions of features.