Create a Heatwave report app to give easy access to Heatwave updates for industrial workers - Heat Saver
Project
Heat Saver
Role
UX Lead, UX Researcher, Visuals, Interaction
Duration
1 month
Overview
Heat Saver is a Floridian-based organization focused on awareness. Increasing climate change is now getting into a point of emergency and the more we need as a community is an awareness about the heat wave and the effects that can harm our body, food, and work life. Primary target users include workers and professionals concerned about working outside in this extreme heat wave.
Problem
- There is hundreds of articles about heat wave, however there are complicated to understand and read.
- Combine with a considerable amount of people who prefer to watch a video instead of reading and article while working.
Kickoff
Design an app that will improve education on heat wave and help workers understand the risk of working outdoor in extreme heat wave online and offline.
What is a Heat wave?
How can I protect myself?
Research
I look at different websites and articles on heat-related topics to develop interview questions. Most interview participants reported that they know about heat waves but don’t have a clear definition of how can affect their health and productivity. The feedback received through research made it very clear that users would be open and willing to include new ways to improve and protect their health if they had access to an easy-to-use tool to help guide them.
Users
Carlos is a security supervisor who ensures his subordinates follow the safety and security guidance correctly. He is always on the move and is constantly exposed to the sun for long hours, leading to arriving home exhausted. He is looking for some tips to be included in his work routine to fight the extreme heat times.
Gutierrez is a delivery driver in his early 50s. He is not great with technology and due to work, he lacks time to spend on his phone to find fast and acquire information for this heating season. He is looking for an easy-to-understand platform where he does not have to take too much time searching for heat-related facts that might harm his health.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on gathering essential information to battle heat waves in the body, friendly and easy to understand.
Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the app. These designs focus on delivering detailed guidance to users to help protect themselves and loved ones during heat wave season.
Usability study: Findings
1
Little to no awareness about heat weave consequences to the body.
2
Hard to understand some of the online articles.
3
Low recognition of how and when to seek treatments.
High fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Style guide
My vision was to reflect warmness but at the same time reflect heath with blue. However, I made the colors muted for the combination not be that impactful when opening the app. Also, I wanted to reflect kindness with some illustrations to make the design playful.
Responsive Website
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Heat sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Designs
The designs for screen size variation included mobile, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Takeaway
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs help me come up with solutions that were both feasible and useful.
