The Challenge

You grab your keys on the fly, balance the burning coffee, catch the falling computer bag, look at your watch frantically, slip on your jacket, rush down the stairs, through the door, and the pouring rain stops you stone cold. Ugh, wasn't it sunny in San Francisco today?

We check the weather several times a day and yet the experience is far from being pleasant. We all share the frustration and skepticism about the forecasts of meteorologists and weather apps. Interpreting current weather conditions in a city like San Francisco, with several microclimates, can be a very challenging (and frustrating) task.

When the Sunshine's team approached us to help with the design of an app to kill all those frustrations, we jumped onboard without hesitation.

Sunshine aims to provide hyper-local, real-time weather forecasts using the smartphone’s built-in sensors. It gets the weather data from devices near you and sends an accurate weather prediction. It also lets users share weather with each other and express themselves.

The tight deadline was the biggest challenge. One month to do all the work seemed impossible. It proved to be a good test for my planning skills and design process.

Research

We kicked-off the project with a quick but intense user research and competition analysis. Understanding user wants, needs, motivations and frustrations is critical but many times forgotten. Analyzing the competitive landscape gave us good insights about the industry, the do's and don'ts, and what competitive advantages putting forward

Based on the user and business research we defined the positioning and competitive advantage:

Positioning

For city residents (>27yo) who walk or bike to work and check the weather at least once a day - usually in the morning - Sunshine is the weather app that gives people relevant, customized, actionable, and easily interpretable weather data. With Sunshine, people can wear the right clothes and plan the right activities.

Competitive Advantage

Unlike other weather apps, Sunshine offers fast, real time, hyper-local weather info, and a technology that translates weather data into actionable and human-centric information.

Creative Strategy

Ideation Phase

With the information gathered from users and from our conversations with Sunshine’s team, we started brainstorming concepts for the app.

The first step was to analyze all the elements and actions that should be in the app.

The main element of the app is the dashboard. It needed to include a summary of the weather info and a map.

To accommodate multiple pieces of information and different interactions, I opted for cards. Cards are a very flexible and work great on mobile.

Here are some paper wireframes and flows I presented to the client to explain our design and iterate very quickly.

These initial sketches were key to define the structure of the app and get a high-level view of the interactions.

They also made us realize quickly that we needed to rule out some of the features, like "neighborhood" and "calendar", since they were out of the scope of an MVP and weren't aligned with Sunshine's mission "to provide a delightful experience when checking the weather".

Task Analysis

Once Sunshine's team approved the content, structure and main interactions, I started working on the architecture of the app. This flow diagram was particularly helpful for the engineers:

Mockup Design

Due to the time constraint, we had to work against the clock. After iterating on sketches, we went straight to mocks. It's not the ideal process, but you have to adapt your flows to the situation at hand.

Here is a sample of final mocks, with some of the core features:

Location Cards

Location cards are the main element in the app. They contain current weather conditions at the user's location. When the user has different locations saved in the app, he can swipe left to show their map position and data.

Tapping on the card displays relevant weather data:

A 12h temperature graphic forecast
Locally-relevant info

Managing Locations

The user pulls the card down to switch from "Location Card" to display all saved locations. The user can reorder the locations or delete them.

During the onboarding, the app will prompt the user to select his interests (wind, air quality, pollen, hazards, etc). Once in the app, the user can add or delete interests from the Interest section on the app menu.

Visual Design

The visual identity of the app was probably the toughest part to develop. The app contains a great number of visual elements, so it was very easy to overwhelm and distract the user. During this phase of the project, led by the UI designer, we experimented with several different palettes and icons.

To design the icons, we followed the brand character - focused on “approachability” and “friendliness” - and the team’s indications to make the app “playful, lively and fun”. We thus went for a colorful palette and a round, flat design.

The same philosophy was applied to the landing page.

The project finalized when we delivered the mocks and visual identity. Sunshine is now in private beta.

MVP Design for a Weather App

Sunshine is a mobile-only weather app. It collects environmental data from the device's sensors and offers real-time, hyper-local weather info. It aims to build a social community where people can post current conditions and interact with each other.

I was part of the design team, responsible for the user experience and design of the app. I lead the product design, including UX and interaction design, and provided the engineers with a set of product requirements for a correct implementation. I worked alongside a UI designer who carried out the visual design. I also assisted on the UI for the iconography, on-boarding screens and hero illustration of the landing page.