About This Project

While freelancing at the digital agency UpTop, my car touch screen client asked me to work on a Chinese weather app. My work included updating visuals, screen flows, and annotations for three different screen sizes. 

Project Rationale

The client had recently added new features to the app, and therefore needed to update the mockups and annotations to reflect those new features.

Design Features

The app's features consisted of a splash screen, a City screen that allows the user to choose which city they would like to view weather information about, a five-day Forecast screen for the user's chosen city, and a Current Weather screen for the user's chosen city. The app also includes buttons that allow the user to navigate between these screens. The button labels may change depending on which screen the user is currently viewing. 

Design Constraints

Each screen size constrained the layout and had a specific "look" that had to be followed in terms of buttons and fonts. Certain screen sizes also constrained how much information could be shown above the fold. 

My Contribution

Team and Timeline

I worked as the sole designer on this project for about two weeks. I collaborated with the client product manager, who also passed along feedback from the app's business team. 

Design Process

I created the screens through a combination of Axure, Omnigraffle, and screen shots. Special attention was paid to safety concerns, as the was an app designed for the car. These safety concerns were addressed through features such as disabling buttons while the car is in motion, and having the City screen be a scrollable list rather than having the user type out the city name. 

The feedback was incorporated through several iterations based on updated screen-specific visuals and business requirements, until a final version was approved. 

Deliverables (excerpt)

App and company identifying information has been removed per the terms of my NDA. 

Forecast - Large Screen

Forecast - Large Screen

Forecast - Medium Screen

Forecast - Medium Screen

Forecast - Small Screen

Forecast - Small Screen

Current Weather - Large Screen

Current Weather - Large Screen

Screen Flow - Large Screens

Screen Flow - Large Screens

Project Outcome

This project received an 'A' grade from the client and led to many further projects for me with that same client.