As a part of a daily UI challenge, I designed a weather app inspired by late 80’s 8-bit devices. Features include gradients that change based on time of day/weather, Idle animations for icons, and a scrollable time of day temperature forecast. Just in case you miss a time when things were simpler.

Fresh Gradients.

It’s easy to say “oh yeah, we can have the gradient be different all the time!” versus actually mapping out how that would work in reality. After some trial and error and some lengthy chats with the developer, we decided to use 3 main gradients based on temperate that each shift depending on time of day. This was the starting point for other variables like weather and location. The result is a beautiful variety of gradients that grace your phone daily.

Pixel Grid Icons.

The weather icons and details screen was heavily inspired by imagery made for devices that had limited color and resolution capabilities. I gave myself the restriction of only 3 or 4 frames worth of animation per icon. The design had to be incredibly simple, read quickly and had to be designed on a finite pixel grid.

Initial Screen Flow.

When designing an incredibly simple application with the goal of highlighting that simplicity, the user flow had to also be nearly imperceivable. 90’s era devices didn’t have swipe and slide but today’s user has come to expect it. The compromise here is letting the faux loading screen and low frame rate animation lead the feel - while the screen swipes and scrolls stay simple to create ease of use.

UX Considerations.

After the initial flow, I collaborated with UX designer Jesse Kuntz to determine any adjustments that would improve functionality and eliminate friction. I redesigned the flow to accommodate the changes and we were ready to start the development phase.

Functionality Needs

• Hourly temp icons

• Current High/Low

UX Issues

• Scrollable hourly temp

• Drawer awareness

• Information organization

Redesigned Home Flow

• Drawer stop at the header

• Added drawer handle

• Hourly temp icons

• Current High/Low

• Simplified details drawer