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.

01_1(2)
02_1(2)

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. 

03 Sea Level Trim3
DYK_2

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.

Wk1 Gallery 1

Initial designs from Sketch

Synthesizing insights from our interviews

Initial designs from Sketch

Initial designs from Sketch

Wk1 Gallery 3

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

Wk1 Gallery 6_

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.

KYC2_At a glance
KYC2_multi sensory

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. 

Wk2 Gallery 1

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

Wk2 Gallery 2

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

Wk2 Gallery 5

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.   

KNOW YOUR CLIMATE was created during the Rapid Prototyping course at the Copenhagen Institute of Interaction Design taught by Christian Palino, Joshua Dickens, Kristina Varshavskaya and Anthony Roscoe

Icon contributors: Akshar Pathak, Anbileru Adaleru, Aybige, Becca O'Shea, Ed Harrison, Hare Krishna, Icon 54, iejank, Juan Manuel Corredor, Lil Squid, Machycek, Markus, Merjin, Road Signs, Rockicon, Supalerk Laipawat, Useiconic.com, Vela Estudio, all from Noun Project. Mockup from freepik.com.

KNOW YOUR CLIMATE was created during the Rapid Prototyping course at the Copenhagen Institute of Interaction Design taught by Christian Palino, Joshua Dickens, Kristina Varshavskaya and Anthony Roscoe

Icon contributors: Akshar Pathak, Anbileru Adaleru, Aybige, Becca O'Shea, Ed Harrison, Hare Krishna, Icon 54, iejank, Juan Manuel Corredor, Lil Squid, Machycek, Markus, Merjin, Road Signs, Rockicon, Supalerk Laipawat, Useiconic.com, Vela Estudio, all from Noun Project. Mockup from freepik.com.

 

KNOW YOUR CLIMATE was created during the Rapid Prototyping course at the Copenhagen Institute of Interaction Design taught by Christian Palino, Joshua Dickens, Kristina Varshavskaya and Anthony Roscoe

Icon contributors: Akshar Pathak, Anbileru Adaleru, Aybige, Becca O'Shea, Ed Harrison, Hare Krishna, Icon 54, iejank, Juan Manuel Corredor, Lil Squid, Machycek, Markus, Merjin, Road Signs, Rockicon, Supalerk Laipawat, Useiconic.com, Vela Estudio, all from Noun Project. Mockup from freepik.com.

 

KNOW YOUR CLIMATE was created during the Rapid Prototyping course at the Copenhagen Institute of Interaction Design taught by Christian Palino, Joshua Dickens, Kristina Varshavskaya and Anthony Roscoe

Icon contributors: Akshar Pathak, Anbileru Adaleru, Aybige, Becca O'Shea, Ed Harrison, Hare Krishna, Icon 54, iejank, Juan Manuel Corredor, Lil Squid, Machycek, Markus, Merjin, Road Signs, Rockicon, Supalerk Laipawat, Useiconic.com, Vela Estudio, all from Noun Project. Mockup from freepik.com.

 

KNOW YOUR CLIMATE was created during the Rapid Prototyping course at the Copenhagen Institute of Interaction Design taught by Christian Palino, Joshua Dickens, Kristina Varshavskaya and Anthony Roscoe

Icon contributors: Akshar Pathak, Anbileru Adaleru, Aybige, Becca O'Shea, Ed Harrison, Hare Krishna, Icon 54, iejank, Juan Manuel Corredor, Lil Squid, Machycek, Markus, Merjin, Road Signs, Rockicon, Supalerk Laipawat, Useiconic.com, Vela Estudio, all from Noun Project. Mockup from freepik.com.

 

I'm a designer with a focus on service and interaction design. I've worked with clients ranging from small startups to global companies, on products and services ranging from digital interfaces to business value propositions.

© 2024 FEI KWOK