Wireframes
With the insights I gathered, I began experimenting and iterating on various design approaches
During my market research, I found that the Google News app uses a native bottom sheet for displaying in-depth information, a feature frequently used across different products.
I shared this design exploration with my team, and we agreed that the bottom sheet component could be well-suited for presenting our weather information. It offers a more engaging and convenient experience, while also providing a native app feel for our audience.
To validate my thinking and make sure it’s technically doable, I also chatted with our engineers from iOS and Android:
“This looks great — I’d love the app to work like that!I think it’s technically doable, but needs quite a lot of consideration…maybe we’d need to get the data from Weather directly, which might be a big challenge”
🧑💻Alex C (iOS)
“Technically doable from the Android side - We can control what we want to put on the top bar, as it's now completely customised...some people might not expect this interaction on the top right as that's a place for a menu usually in the material design system - so this might require us to do some user testing to see if people will click it”
🧑💻Tom C (Android)
Some design exploration based on bottom sheet
Final design options
🌡️ Next Hour Temperature:
Real-time updates on upcoming temperature changes.
📍Location Name:
Clearly displays the current location for context.
💧Rain Percentage Chance:
Provides the likelihood of precipitation in the next hour.
⛈️ Animated Weather Icon:
Visual representation of the current weather conditions.
🗒️ Weather Description:
Brief text description of the current weather.
👀 5-Hour Forecast:
Detailed weather predictions for the next five hours.
🔗 Weather App CTA:
A call-to-action button directing users to the full weather app for more information.