header-01
Currently: the case study

In my home of Milwaukee, Wisconsin, seemingly every year for the past five we've been dealing with polar vortexes, a cold-weather pattern that sends wind chills dropping to around -50°F while the actual, measured temperature hovered much higher around -15°F. The difference between those measurements is so shocking that it's crucial for weather apps to include the wind chill temperature, even though many don't. So, I researched the market, and revisited a couple of my favorite apps 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 start, I looked through old, random sketches of weather components and compiled screenshots of other apps. I also asked a friend if I could look at their files for an old weather app of theirs that I really enjoyed, and the screens below were the most influential to Currently's design. This stuff really helped me understand how others were surfacing information, and how I might improve on it. With that said, however, I would've loved to be able to bring these examples into a real development environment and done some user testing to see what was the most practical solution from the varying options.

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

a selection of components that inspired the making of Currently

Designing the forecasts

The biggest goal throughout the design process was to find a balance between a dead-simple design and one that provided the desired amount of information. When I began, I determined that the forecasts were the primary navigation targets because that's what you would check a weather app for, right? Beginning with the daily screens, I focused on the current information first, and then on the hourly graph below it so that the information was organized chronologically.

For the hourly weather information, I chose to make a horizontally-scrolling graph to make it easy to either interact with or bypass. This single graph displays two data sets (temperature and precipitation) to reduce the navigating that one needs to do to use the app.

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 to aid in planning your time.

landing-components

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

Settings

When designing a settings page, I feel that it's important to keep lists concise to help people make sense of the more murky details of your app. Rather than use list items that lead you to another page, I decided to make them expand to reveal your options to eliminate the need for a search function by making the settings easier to scan.

To aid in planning your day, I designed the app with some unique considerations. 

  • Letting users opt-in to and configure incoming precipitation notifications
  • Daily notifications with details about their forecast
  • Letting users dictate what time their daily forecast graphs start when looking at future forecasts

settings

components from the Settings screen in Currently

Radar

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.

radar

the radar screen from Currently in the Neon light and Natural dark themes

Onboarding

In my past experiences working on onboardings, it's been clear that poeple don't like them and often don't pay much attention to them. I thought that to address this, we'll give them options to go at their own pace before we push any slides in front of them. In addition, another struggle the app would face was the pushback against subscription apps at the time. To address this (and hopefully make ourselves more credible and inform the public about the true cost of software), I added an option to view the costs associated with running the app in the subscription flow for all to see.

onboarding
a prototype recording showing the onboarding flow.

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

Customization

In the past few years, lots of apps have gone for a more "stock" appearance in the name of professionalism. When I started this project, since it was for myself, I decided it would be fun to have a couple of more quirky themes to pick from while still maintaining their legibility and no–nonsense functionality. I chose a more sober "natural" theme and a more playful one that I called "neon." Both these themes have their own branded dark theme and iconset to match.

themes

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

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.

Extras
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.

Still here, waiting for you ❤︎ ©tommy_emo 2020