Horizon Weather
2018--Present
Personal Project
Mobile, Multi-platform
Role: Product Design, UX

Horizon Weather was originally conceived as a usability focused Android weather app. Since its original inception, the project has gone through several iterations, and now exists as a responsive, multi platform design system.

The project was inspired by the demise of Weather Timeline, a well designed weather app that changed hands and unfortunately suffered in quality and reliability. Design was started during my college career with a friend of mine (Alex Gittemeier ↗) who handled the original Android development work.

Process

For this project and most personal projects I take part in, I like to take an iterative approach. Instead of taking a straight shot from design, to development, to completion, I prefer to iterate continuously; something I’m very familiar with through Agile development methodologies.

Research

Throughout the development of this project we’ve used a large amount of weather apps across multiple platforms, finding out through first-hand experience what works and what doesn’t, and exploring unfilled niches in the market. More recently I’ve been using Figma’s FigJam ↗ boards to organize research artifacts.

Research Notes
Screenshots in FigJam paired with notes in Craft Docs

While formal interviewing has been a bit out of scope for this project, I’ve made it a point to have conversations with just about everyone I know related to their experience using weather applications. The two most important (and maybe most obvious) questions I tend to ask are “What do you dislike the most about the weather app you use?” and “What is the piece of information you look at first when using a weather app?”

The most common design related complaints were caused by information hierarchy and readability issues.

Some common complaints were not design related, like the accuracy of the forecast, or the loading speed. While these complaints are not caused by poor design, the symptoms can be reduced through thoughtful design, like keeping the application modular to load elements in reading order.

Ideation

After initial research, we developed some design guidelines to inform the development process and help inspire good design decisions.

Responsive

Information should be presented with utmost immediacy, and any task with a wait period long enough to be reasonably perceptible by the average user is a priority for optimization.

Intuitive

The user should be able to access every feature quickly and easily, without hunting. The application and its features should be designed in such a way that the layout and design inherently guides the user through the flow of use.

Minimal

Information should be presented in its most minimal usable form. Any information that is never or seldom needed by the user should be obfuscated or removed entirely.

Intelligent

Any information that can be presented contextually without interfering with the usability or consistency of the application can and should be presented in a reasonably hierarchical view, or not displayed at all.

Beautiful

Visual style is just as important as information delivery. A piece of the application that does not meet visual design standards should be removed or retooled to work within the constraints of well thought visual design. In fact, studies have shown that the aesthetics of a product can greatly effect the perceived usability. ↗

Accessible

Readability starts with accessibility, and designing with accessible elements will lead to a more robust design not just for those with special accommodation, but for everyone.

Information Hierarchy and Prototyping

When considering information hierarchy for Horizon Weather, information falls largely into two categories.

This organization leads naturally to a system of cards, contained UI elements that serve a singular informational purpose. It’s no surprise that the majority of weather applications use this system to some degree, though some make more of a distinction between “cards” than others.

The evolution of design prototypes
The evolution of design prototypes

Early designs used a gradient visual style reminiscent of Apple’s default iOS weather app, but changes in background color affected contrast negatively (much like iOS’ weather). Later designs were inspired by plotters ↗, early vector graphics ↗, and maritime weather prediction graphics ↗.

Early android prototype
A prototype running on Android

Android prototypes provided good user feedback from friends and our own experience early on, but iteration with Android was slow going and eventually fell off due to other engagements. The current designs now exist in Figma, as a full component system and icon set, with a planned SwiftUI implementation for iOS and MacOS.

The Current Design System

Current design system

The most recent iteration of the design system showcases a few advantages over other weather applications.

Atomic elements of a forecast card
The atomic elements of a forecast card

Atomic design affords a lot of very convenient features in a complex system, and weather applications are a perfect target. Newer development platforms like Apple's Swift have come a long way in utilizing responsive systems, and eventually I'd like to build out a working application that translates fluidly between iPhone, iPad and MacOS.

Responsive card
Responsiveness and flexibility from atomic design
Themes for the design system
High contrast, low color design leads to easy theme-ability

I’ve made several themes for the system already, including themes directed at OLED and ePaper displays for embedded applications. One of my favorite phenomena that I've picked up (from game design of all things) is emergent design ↗. Essentially, well designed systems allow for patterns to emerge that were not necessarily intended, but provide value to the experience, and also allow for the joy of exploration for the designer.

The system is simple and offers a toolbox rather than a set of instructions. Building components for Horizon Weather has been quick and easy, and I can't help but come back to this project to keep adding more.

Horizon Weather icons scale
Horizon Weather icons Horizon Weather icons
Horizon Weather's custom icon set

Early prototypes used free open source icons, which were later replaced by custom icons. Since designing the original batch of custom icons, I've learned a lot about designing on a small scale, and have since developed a full set of vector icons that are pixel accurate to avoid undesirable aliasing, and are tuned for 4 different sizes, including a colored large display size.

Thank you for reading! ❤

Horizon Weather is a project close to my heart, and I've put a lot of thought and effort into its continued development. I've learned a lot while working on this project, and grown a lot as a designer. I've been able to really explore the realms of UX, graphic and product design, and I'm excited to continue development, probably in perpetuity, as it seems there's always room for improvement, and always something new to learn and apply.