This winter in January, my home of Milwaukee, Wisconsin got hit with a cold-weather pattern, known as a Polar Vortex, with wind chills dropping the feels-like temperature to around -50°F while the “real” temperature hovered around -15°F to -30°F. For comparison, the average temperature of the North Pole in the winter is -40°F, and Antarctica around this time was -7°F at night.
The difference between the “real” and “feels-like” measurements is so shocking that one would think more weather apps provide the wind chill in their information. Many don’t make the wind chill very apparent, or they don’t provide it at all. With that said, during the bitter cold I was having a difficult time tracking the weather in a way that felt safe. My favorite weather app, Weather Timeline, had recently been purchased by a company that I wasn’t so sure I could trust. I was an avid fan of the app and would often tell people how much I loved it, and I was upset to see it change hands. Also, their API was far from accurate at the time and still seems a bit off. So, I researched the market, and revisited an old favorite and found some things that inspired me to take on the challenge of designing a weather app myself - I called it Currently.
To begin my process, I looked through little doodles I had made of some weather apps and compiled screenshots of other apps I had been checking out recently for some inspiration. I also asked a friend if I could look at their files for Simple Weather, an old weather app that I really enjoyed in the past (thanks, Michael!). I brought some of their stuff into my design file and jotted down my favorite things from it. The screens below were the most influential to Currently's design, and from here, I had a great springboard to launch my process.
To begin my process, I looked through little doodles I had made of some weather apps and compiled screenshots of other apps I had been checking out recently for some inspiration. I also asked a friend if I could look at their files for Simple Weather, an old weather app that I really enjoyed in the past (thanks, Michael!). I brought some of their stuff into my design file and jotted down my favorite things from it.
From Simple Weather, I loved the two-toned graph to display both precipitation and temperature simultaneously which meant no toggling or scrolling between graphs. There was also a nice sun graph that reminded me a little bit of Google’s while I was looking around, and he also designed some great icons that I had the pleasure of using and expanding on in Currently.
Speaking of Google’s web app, I was a fan of most of the design except for a couple of things: the separation of precipitation information from the temperature graph and they didn’t show you the feels-like temperature anywhere. Weather Timeline’s award-winning approach also inspired Currently’s design. Its design was not only simple, but easy to navigate and fully featured. Despite that, I felt there had to be a better way to condense down the most relevant information. In all my time using it, my favorite Weather Timeline features were the ability to set the feels-like temperature as the default, their wonderful moon calendar, and the beautiful and highly readable graphs.
Aside from Simple Weather and Weather Timeline, Weather Up on iOS was one of my biggest influences. What really stood out to me about it was just how compact its UI was. The design team did a great job of making it very easy to get to the information you want and keeping everything else out of the way. While they didn’t show the wind chill or heat index by default, they did show it in a neat little panel you could access by tapping on any of the hourly entries in the forecast. They also had a nice radar that served as the backdrop for the forecasts and was always a swipe away. Overall, I felt that the approach was maybe a little too minimal in terms of the information provided despite having an enjoyable overall experience and clever execution.
a selection of components that inspired the making of Currently
The biggest theme throughout the design process was to find a balance between a dead-simple design and one that provided an abundance of information. When I began, I worked by starting the primary pages: Current forecast, Tomorrow's forecast, This Week's forecast, and the Settings page. Beginning with the daily screens, I focused on the current information first, and then on the hourly graph below. The layout for the current conditions took on a straightforward approach that lets you scan through it quickly and get the information you need.
For the hourly weather information, I chose to make a horizontally-scrolling graph to make it easy to interact with or bypass. The graph has two layers of information to save time and space. Tapping on an hour in the forecast would reveal a dropdown with the relevant information. To make the forecast as quick to digest as possible, I added labels for the peak temperature and precipitation accumulation during a day.
The rest of the current forecast and next day forecast screens contain a sun chart to show its progress throughout the day (including the sunrise and sunset) and a moon calendar to show its phases throughout the year.
the hourly graph, sun graph, and moon calendar components in Currently
When designing a settings page, I feel it is important to keep lists condensed and organized to help people sort through the more murky details of your app. I also often strive to keep most list items expandable so they just reveal your options rather than take you through a labyrinth of pages to find what you need. This eliminates the need for a search function and helps oridinary people make your app work for them.
components from the Settings screen in Currently
After designing these pages, I moved onto designing the themes that people could choose from. There is a natural theme and a neon one that is more playful. The neon theme is purple and teal — inspired by jazz cups and Bucks jerseys from the early 2000s. The natural theme is yellow and blue — inspired by the traditional way the weather is portrayed with clear blue skies and yellow suns. Both of these themes include a dark theme, adding personality to a functional feature.
I designed the remaining pages — places, radar, search, and the onboarding — to be as straightforward as possible. For your places, you simply have an editable list of places you’ve added to the app to select from and a button to access the search screen. For the search screen, you have a list of possible places suggested when you begin typing a place’s name into the search field.
I was excited by the opportunity to design the radar screen, and wanted it to feel like a proper physical product. To keep it compact, I used a backdrop component to hold a scrubber for controlling the data shown on the map. To quickly jump between your saved places, you can swipe up on the backdrop to view and select from your list.
the radar screen from Currently in the Neon light and Natural dark themes
Lastly, I designed the onboarding for the app. I decided that to optimize the experience, we should give them a polished way to set the app up for their personal use case. Here, each user can:
Finally, I set about designing notifications and widgets to deliver pertinent information wherever each user needs it. To keep things consistent, I made the widgets and notifications mostly through reusing components within the app’s interface.
xoxo, tommy_emo‽ 💜
Thanks for sticking around this long! Here I'll just post some nice shots of the typography, the weather icons, and other stuff. First, I'd like to give a shout-out to Eduardo Pratti, Michael Cook, Pedro Peguero, Jr., and Francisco Franco for their feedback throughout the design process. Additionally, Ty McNulty edited this study.
Left: The original Simple Weather set by Michael Cook. Right: Neon icons recolored for Currently. Bottom row: Moon icons based on the weather set.
The first set weather icons were all created by Michael Cook, and I made a neon set out of those to compliment the Neon theme. The moon icons are a bespoke set for Currently. Rather than use the more illustrative shapes in the moon set I decided to go for a more traditional representation of the different phases to preserve their meaning at smaller sizes.
For the app's typography, I chose to pair Space Grotesk and Inter. Space Grotesk, a stern little typeface based on Space Mono, has these great curves on round shapes offset by straight lines and tight corners on more rectangular shapes. Inter is a typeface designed for interface design, with soft shapes and great flexibility that brings out the more friendly aspects of Space Grotesk. Inter also reminds me a bit of the type used in newscasts, which is a big win for something like a weather app that conveys information otherwise found in the daily news.
Additionally, I made a simple prototype in Figma if you'd like to explore the app's design in a more interactive way. NOTE: Sometimes a prototype can become "stuck" when using the back button. If this occurs, you just have to hit the back button one or a couple more times, or return to the previous page using the arrows on the bottom of the prototype.