three screens from Currently. from left to right, the Current view, Weekly view (emphasized on one day), and the radar screen
Currently: the case study

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.

Research and inspiration

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. 

screenshots inspiring Currently's design

a selection of components that inspired the making of Currently

Design process

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.

landing page components from Currently

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 page

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.

the Natural and Neon themes in their respective light and dark modes

screenshots showcasing the Natural and Neon themes, in their light and dark modes

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 theme and Natural dark theme.

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:

  • Choose a location by either granting the app permission to access the current location or by adding places manually.
  • Add additional places from this screen after they permit us to read their current location, should they choose to in the first place.
  • Choose from a monthly, bi-annual, or annual subscription
  • View the privacy policy
  • Learn about the app's subscription model, to help demonstrate the real value of the app and the costs associated with running it.

 

a prototype recording showing the onboarding flow.
onboarding

a prototype recording on the left showing the flow through the onboarding, and static images on the right

Notifications and widgets

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‽ 💜

Extras

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.

the weather icons used in Currently

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.

type 2

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.

a layout of the type system in Currently. features the headlines on the left, set in varying weights of Space Grotesk. on the right is Inter in various weights for the rest of the typography, including subtitles, body text, and button text.

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.