Based on the Design Thinking and Lean UX principles, Subtropic was developed with the main goal of helping the residents of Miami-Dade County during hurricane season. One of the key features of the app is to be participatory, by allowing the residents to post real-time information, such as flood areas and where to buy supplies at moments of shortage.
App UI development: Adobe Xd, Ai, Ps
Time frame: 6 weeks
Marketing Website development: Sketch + InVision
Time frame: 2 weeks
problem space
It is a reality that 80% of Miami-Dade County residents have experienced flooding during a hurricane, and 70% of them have been in the situation of not being able to figure out the flood status of their surrounding areas.
Another finding was that 90% of people could not figure out the County’s total damage post-hurricane for days. Knowing the County’s position after catastrophic environmental phenomena is crucial to thriving throughout sensitive situations that will emerge post-hurricane.
research
Email surveys and interviews conducted primary research. All of the participants were residents of Miami-Dade County, and at some moderate or extreme degree, they have experienced intense tropical storms or hurricanes.
how might we
insights - motivations - behaviors
With safety as the primary goal, households will take all actions necessary at the best of their capacity to prepare before hurricane season. Nevertheless, once a hurricane is on watch and moving towards the city, all the Miami-Dace County residents are under the pressure of last-minute arrangements.
And lastly, during and post-hurricane, we can see the extreme amount of pressure and anxiety due to situations that put at risk the primary goal, safety.
persona
user stories
Considering the three stages scenario: pre, during, and post-hurricane.
They are all related to safety and the process of getting prepared to the best of people’s ability.
task flow
Based on the core epic, this task flow is about creating a shopping list with category options.
sketches
Considering the app’s main goals, the task flow, let’s take a look to a couple of my sketches during this process, specifically exploring the homepage during hurricane season.
wireframes
The main takeaway during the wireframe and testing process was about the importance of using the right component throughout the layout. Users were having trouble understanding that these were shopping categories, and the plus icon was the key to hint the user on customizing the shopping list as per their needs.
A visual identity is a system created by a series of creative components and tone that will shape the presence of a product or a service. The goal is to communicate its purpose, throughout a series of channels and mediums.
Due to the fact that hurricanes are extremely stressful, in this case, the purpose of Subtropic is to relate with the residents of Miami-Dade County from a cultural stand point, using colors that are well known by the community with a tone that is relaxing and familiar.
mood board
Relatable from a social and cultural stand point, using colors that are well known by the community with a tone that is hopeful and familiar.
color palette & tone
Colors are fundamental for visual identity; they play an impactful role in how a product is perceived. On the other hand, the voice tone of a brand must also evoke and connect with the audience.
logo
This next step consisted of carefully and intentionally creating a logo that would represent the concept of the app. As you may see the family includes an icon that represents the purpose of the app.
ui library
The UI library was created by using the Atomic design method by Brad Frost, and carefully curated to match the visual identity of the app and to efficiently contain all the elements needed for the app’s layout developments.
prototype
Once the mood board, visual identity and ui library has been set, the next step is adjusting such system into the final prototype.
marketing website
Included in this project and after a series of sketches, a final layout was catered for the responsive website. The site was created with the purpose of promoting the app and sharing the value proposition of it.
alternative platform apple car-play
One of the value of the app is to provide information about shelter, evacuation and the live map.
Meaning, by having the app installed in the car-play platform, people can quickly have access to shelter locations or an evacuation plan. For the exercise of an alternative platform for Subtropic, the apple car-play was an option that I thought it would be very useful for the user.
By having Subtropic available at the apple car-play, the user can find the closest shelter available, or be guided through the live map to avoid flooding areas.
