Daily UI Challenge: Weather App

Challenge Prompt

Daily UI is a series of daily Design Challenges designed to help people improve their UI skills.

Hint: Design something related to weather. It could be a UI for a mobile app a web app, or something completely different such as a weather alert widget. Consider its elements: city, temperature, forecasts, colours, weather icons/graphics, etc. (As always, it's up to you!)

My Idea

This weather app focuses on interpreting weather data into relevant information to help user’s appropriately dressing for the temperature. Some people can go out in shorts in 12-degree weather while others are still in longs pants and a sweater.

Since not everyone experiences the same temperature as warm or cold, the app enables users to signify how hot or cold the temperature is based on the type of clothing they are wearing to achieve the most comfortable individual temperature. Using past data, the app will be able to predict what clothing the user should wear based on the current weater.

I wanted to develop this concept as I personally struggle to figure out how to appropriately dress to be comfortable when going out. I often dress too warmly or do not bring enough layers.

Innitial sketches for the UI of the weather app. However, in later iterations of the interface, I deciddd to remove the avatar.

Figma Prototype

Below is my Figma prototype of this weather app, Dress4Weather.

In the app, I use differeent clothing options to help people contextualize how warm or cold the weather is outside. Dress4Weather suggested clothing will help users wear appropriate clothing to maximize comfort when going outside. Users can also change the recomended clothing item. The app will use the users changes and confirmation to improve the prediciton algorithum.

This demonstrator shows how the user can change the app’s recommended clothing item to one more suitable for their perception of the weather.

Resources

To make these screens, I used the following:

Sktchnoting Ted Talks

Practice Makes perfect

I’ve been trying to improve my visual communication skills through sketchnoting, a notetaking technique that combines text and visuals. Sketchnoting helps the notetaker identify and record the key ideas, emphasize connetions, and see the big picture.

Below are a few examples of me turning Ted Talks into sketchnotes.

How adaptive clothing empowers people with disabilities

“How Adaptive Clothing Empowers People with Disabilities” by Mindy Scheier talks about the her love of self-expression through clothing and her desire to enable her son to also have more fashionable adaptive clothing. 2013, Scheier created the Runway of Dreams which empowers empowers people with disabilities with confidence and self-expression through fashion and beauty inclusion.

the power of vulnerability

“The Power of Vulnerability” by Brené Brown focuses on understanding the positive and negative effects of vulnerability on people. From her research, Brown learned that vulnerability is at the heart of both good and bad emotions. Our desire to avoid feeling negative emotions has caused us to participate in activities that numb our vulnerability, ultimately reducing our happiness as well.

Visually Recording a Co-design Workshop

THE PROBLEM SPACE

On March 8, 2022, I assisted a the National Housing Strategy (NHS) Solutions Lab’s co-design workshop to visually document the ideas generated by the different stakeholders present. The project is a 16-month long project that aims to increase and improve housing options for people with developmental disabilities and medical complexities by exploring intentional approaches to fostering social inclusion with a diverse group of stakeholders.

The goal of the workshop was to generate opportunities that foster mutual inclusion between residents with developmental disabilities and others community members through new food-related programs and services.


CREATING VISUALS

My deliverable was to create a visual artifact that captured the ideas partifipants shared that could be published in reports and other materials. To create these visuals, I used sketchnote techniques that combine text and drawings to capture and organize the ideas collected during the workshop.

This diagram depicts both opportunities and constraints or barriers that exist ini the defined problem space.

This visual focuses on defining roles, opportunities, and resources each stakeholder can contribute. Overlapping opportunities are highlighted to help identify where stakeholders could interact with each other and improve community engagement.

When creating these visuals, I used systems thinking to emphasis on how ideas and people connected and interacted within the problem space and proposed opportunities to increase engageemnt between residents and community members.

Children of Men Experience Map

The task was to watch the movie “Children of Men” and collect data that you could later on turn into a meaningful insight. Then we were asked to display our findings in a compelling visual that clearly described the experience.

This map looks at the relationship between the amount of police Theo interacts with and his ability to understand the full brutality of the totalitarian British government. The map shows a timeline of the movie with events above or below the baseline conveying to readers Theo’s emotional state during these events. It suggests the intensity and if his emotions are positive or negative. The map also indicates to the viewer that despite Theo getting closer to the true nature of the police brutality, seeing and interacting with more police officers, he is not as emotionally effected by them compared to when the people he cares about are in danger or killed. Theo’s dedication to protecting the people he cares about limit his curiosity and his ability to absorb the chaos surrounding him. 

children of men map .jpg

Design for Health Concept

This early concept focuses on the challenge of getting dressed for older adults living with mild to severe dementia. The Outfit roll is designed with icons to help users remember the order in which they need to put on items of clothing to get dressed. The Outfit Roll is also easy roll up and store.For individuals with severe dementia, their caretaker can layout a complete outfit on the roll the night before and roll it up for storage. When the user unrolls The Outfit Roll, their clothing is neatly folded in the order.

We did not go with this concept as we were designing for Baycrest clients in the Mountainview club and getting dressed was not part of the program.

First iteration

First iteration

Second iteration

Second iteration

WOOD TOY

Two designs, one circular and the other oblong, I propose for a simple wood child’s toy. The oblong design actually contains two games. Both are easy to carry and have a lot of replay value. They are so much fun fun that parents will get hooked on them!

ball game.fw.png

Mood Lamp

My idea here was to design a lamp that could promote calmness by emulating and transferring those feelings we have when we hug each other or hold a marvellous swirling sea shell. I used a nested drawing at the start of this process to explore different ideas and outcomes.

IMG_1654.jpg

Laundry Problems

Who likes doing laundry? Not me. There are so many problems. My two cats, Pinto and Satch, sometimes interfere by walking on the machines and accidentally press buttons. Here is an analysis of some of these headaches that make laundry not fun.

Laundry Flow.jpg
Beth pain points copy.jpg