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.       

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.

 

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

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.

Design process

I’d like to take a moment to establish the goals I set for myself and this project before talking shop:

  • Build the UI with a clear hierarchy and coordinating colors to make information easy to find and read
  • Keep the experience fast and only send notifications that people opt-into. Stay out of the way and aim to serve.
  • Keep information light and organized, only getting into the details when people are seeking them.
  • Buck the trend of sticking to a mostly white and black design.
  • Ensure that customers don’t need to share any information if they don’t want to.
  • Have a straightforward and transparent attitude on everything from our subscription prices to our privacy policy. (Note: I would draft a privacy policy, but the app is not in development, so I figured it best to wait on getting specific.)
  • Make the app work for everyone - this means adjusting the graphs to when someone’s day starts and allowing them to dictate when (if ever) they receive notifications from the app.

When I began, I worked by starting with what I figured were the bookends of the app: the landing pages (Currently, Tomorrow, This Week) and the Settings page. Starting with the daily screens I focused on the current information first, 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.

With the hourly graphs, I wanted to find a balance between compactness and depth. I chose to create a horizontally-scrolling graph for the forecasts to allow users to dive into them if they wanted to, or scroll past to visit other information. To view other information, you can tap on any hourly entry to reveal a dropdown similar to the one from Weather Up. This way, you see only the information you want to see when you want it. I also applied this attitude to the graphs, stacking one graph on top of the other to save time while scanning a day’s weather, like Simple Weather used to. I added labels for the peak temperature and precipitation levels throughout the day to make those peaks easier to spot quickly.

Aside from the current or projected weather information, the rest of the Currently and Tomorrow screens play host to the sun graph and the moon calendar. The sun graph shows the sun’s path throughout the day along with the sunrise, sunset, dawn, dusk, and solar noon times. The moon calendar was something I loved about Weather Timeline and thought others would enjoy it as well. I verified that with some friends and implemented a minimal one that would fit aesthetically with the rest of the app. I took inspiration from Simple Weather’s moon phase indicator and housed the moon calendar, moonset, and moonrise times below it. For the calendar, I stuck to a plain old grid for the days in a month with a simple header that would allow people to scroll through the months in the calendar. Custom moon icons would display the moon’s phase on a given date with the moon’s visibility represented by lowering or raising the icon’s opacity accordingly.

landing page components from Currently

the hourly graph, sun graph, and moon calendar components in Currently

With the settings page, I attempted to condense all the settings someone would need into a single page so nobody would lose their place navigating through it and making their necessary changes. Here you’ll find options for help, different themes, notification preferences, units, data usage, and information about the app. I reduced most options to a switch or selection with only 4 out of the 19 settings listings opening another page in the app. I kept things simple by reducing most options to an expandable card with a list of radio buttons for selecting different options, a switch, or an extra page to either customize an option or for pages that hold more data.

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. I chose to go for two aesthetics that were pretty opposite each other to please a diverse crowd. There is a natural theme and a neon one that is more playful. The neon theme is purple and teal and was 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 have their own versions of a dark theme, moving away from the trend of monochromatic black dark backgrounds that we’re seeing implemented everywhere at the moment.

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

The remaining pages – places, radar, search, and the onboarding – are all fairly straightforward, which is a good thing. For 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. 

Radar was a screen I was excited to design. I looked at it as an opportunity to design a screen like a physical product, and I was inspired by those old Braun radios by Rams with the knobs to change the channel and the needle to indicate it. I used a modified backdrop not too unlike the one from Weather Up to contain the time scrubber underneath indicators for the different times shown by the radar. Below those pieces are the places a user has added to their app with the current condition in those places. The screen also has a play/pause button for the radar, an affordance for the list of places, and a search button to find places that may not be on their 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 felt that leaving this piece for last would allow me to pinpoint the bare minimum that you should have to do to set the app up, and came to the conclusion that people should just be prompted to:

  • Choose a location by either granting the app permission to access the current location or by adding places manually.
  • Additionally, they should be able to add 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

So, I made three buttons to bring people through this process and added a privacy policy button and a FAB below to bring them to the rest of the app when they’re ready to begin.

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

When someone taps on the “Choose a subscription” button, they’re presented with a dialogue showing the three subscription choices and a button to get more information on our pricing. Here I break down the costs associated with running the app and the total gross profits from their subscription shown below. This is something that was suggested in feedback during the design process, and I was enthusiastic about the idea of clearing the air when it came to the app’s pricing. With this complete, I had successfully created an onboarding that was concise enough to keep people engaged and open enough to allow them to explore some of the finer details of how the app operates.

Notifications and widgets

Finally, I set about designing notifications and widgets to let people see pertinent information without having to open up the app. To keep things concise and cohesive, I decided to make the widgets and notifications mostly through reusing components within the app’s interface. Keeping a consistent style would allow users to easily scan the information because it‘s familiar and they would know exactly what app the information is coming from.

The only two pieces that required modification were pretty straightforward. In the “Umbrella alerts” notification, I used a single graph for precipitation as opposed to the two-layer graph in the landing. For the hourly forecast widgets I removed the wind speed to keep things concise and to the point.

Throughout this adventure, it was eye-opening to take on a project with this many different design decisions and iterations. Things often took on other forms but returned closer to the original idea than I expected, and other things ended up very different than the original concepts. Originally there were plans to develop and publish the app but those have since fallen through. If you're reading this (PS: thank you for reading this!) and would like to develop the app and sell it with me or would like to go about developing and publishing the app on your own, please email me. Want to work together on a project of your own, bounce some ideas off of me, or critique this work? Again, please email me or connect with me on twitter

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 weather icons were all borrowed from Simple Weather for this design, and I made a neon set combining the values from the original design with the louder colors of the neon theme. The moon icons were designed by me for Currently. Rather than use the more illustrative shapes in the weather set I decided to go for a more traditional representation of the moon phases to help differentiate them at smaller sizes, like those in the moon calendar.

type 2

For the 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.