Typhoon
Social good mobile app & website
Project: Typhoon
Role: UX designer
Duration: Sep - Dec 2022
My role
UX designer leading the app and responsive website design from conception to delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project vision
Typhoon is a tool that helps farmers affected by typhoons. It provides predictions, advices and assistance. For this project, I decided to use a goal-directed design method which revolves around focusing on my persona creation and goals.
The problem
Farmers affected by a typhoon are primarily faced with the challenge of damage to their farms resulting in loss of income and livelihood. A typhoon can cause severe damage such as flooding, wind damage, and crop loss which can have a severe impact on farmers and their communities. Along with the immediate challenges of fixing and rebuilding their farms, farmers may also face long-term challenges like reduced yields, increased costs, and difficulty in accessing resources and support. This can make it hard for farmers to recover and continue to operate their farms, leading to further economic and social challenges in their communities.
The goal
The objective is to provide farmers with useful, relevant information, tools and resources to aid in their recovery from the disaster and rebuilding their farms.
Understanding the user
User research
I conducted interviews and created empathy maps to gain an understanding of the needs of the users I am designing for. Through research, a primary user group identified was farmers living in affected areas.
This user group confirmed initial assumptions about the lengthy process of obtaining assistance, but the research also revealed that prediction is not the only concern for users. Other issues raised by users included lack of awareness.
This user group confirmed initial assumptions about the lengthy process of obtaining assistance, but the research also revealed that prediction is not the only concern for users. Other issues raised by users included lack of awareness.
Personas
Problem statement:
Emma is a farmer who needs a simple method of requesting resources such as donations in order to recover quickly from the impact of a typhoon.
Problem statement:
Ajay is a farmer who needs early warning about a typhoon in order to prepare food, fresh water, and to secure his farm for the typhoon.
Ideation
I used the "Crazy 8" method for ideation to generate ideas to address the issues identified in the problem statement, which was derived from personas. The goal of this exercise was to simplify the process of requesting resources for farmers affected by typhoons.
Another possible ideation exercise that could be used is the "How might we?" method. This involves framing the problem as a series of open-ended questions starting with "How might we...?". For example, "How might we simplify the process of accessing resources for typhoon-affected farmers?" This method can be a valuable tool in encouraging divergent thinking and promoting a solution-focused mindset.
Starting the design
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Typhoon app. These designs emphasize displaying crucial information about an impending typhoon and providing advice on preparation.
Low-fidelity prototype
In order to prepare for usability testing, I developed a low-fidelity prototype that linked the user flow for requesting resource allocation.
View Typhoon‘s low-fidelity prototype
View Typhoon‘s low-fidelity prototype
Final design
The navigation menu in the app is designed to be accessible for people with visual impairments. The menu includes clear icons that are easily distinguishable, even for those who have trouble distinguishing certain colors. Additionally, a line appears above each icon to indicate the current screen, making it even easier for users to know where they are within the app. These features ensure that the app is user-friendly for a wide range of users, regardless of their visual abilities.
The "Report" screen in the app provides an important platform for farmers to share information about typhoons and other relevant events, as well as request assistance. By allowing farmers to directly report on conditions in their area, the app can gather real-time data that can be used to improve decision-making and provide more accurate information to those in need.
Menu icons make it simple for users to find exactly what they're looking for, which is especially important during challenging times. There is also a prominent call-to-action (CTA) button designed for emergency situations. This button allows users to quickly and easily initiate an emergency call with a single tap, providing them with a fast and reliable means of seeking assistance in times of need.
Farmers can edit personal information to ensure it is accurate and up-to-date. This includes things like their addresses, phone numbers, emails, and emergency contact information. By keeping these information updated, they can avoid potential problems and ensure that important information is easily accessible for the government and the insurance company in case of an emergency.
The "Info" screen in the app serves an important purpose by providing critical information about typhoons to farmers who may be affected by these natural disasters. The inclusion of a map and relevant information in the top bar allows farmers to quickly and easily understand the current situation and take appropriate measures to protect themselves and their property. By having this information readily available, the app helps to empower farmers to make informed decisions and take action to mitigate the impact of typhoons on their livelihoods.
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, incorporating modifications made following the usability study.
View Typhoon‘s high-fidelity prototype
View Typhoon‘s high-fidelity prototype
Responsive design
Sitemap
With the app designs completed, I began designing the responsive website. I utilized the Typhoon sitemap to guide the organizational structure of each screen's design, ensuring a cohesive and consistent experience across devices.
Responsive designs
I designed variations of the screens for different sizes, including mobile, tablet, and desktop. I tailored the designs to meet the specific needs of users on each device and screen size.
Style guide
As the style guide for Typhoon, I aim to create a visually impactful and user-friendly design that conveys the app's purpose and mission.
A warm and inviting shade of orange, serves as the main color for attracting attention. Its bright and energetic tone draws the user's eye, making it an excellent choice for important information.
A bright and bold shade of green, serves as the main color for call-to-action. Its energetic tone encourages the user to take action, making it an excellent choice for buttons and other interactive elements.
A warm and inviting shade of orange, serves as the main color for attracting attention. Its bright and energetic tone draws the user's eye, making it an excellent choice for important information.
A bright and bold shade of green, serves as the main color for call-to-action. Its energetic tone encourages the user to take action, making it an excellent choice for buttons and other interactive elements.
Takeaways
I was acutely aware of the responsibility to make a meaningful difference in the world through this project. "Design for good" is a noble goal, but it is also challenging to achieve in practice. Good design has the potential to not only save lives, but also protect property in the face of devastating events like typhoons. This requires careful consideration of not only aesthetics, but also accessibility, user context, and the needs of underrepresented groups. I learned that although the problem I was trying to solve was significant, by meticulously following each step of the design process and aligning with specific user needs, I was able to generate solutions that were both practical and beneficial.