Weather Away - UX Case Study

The Project

CareerFoundry UI Course Design Project

The Weather Away project gave me experience creating a complete UX/UI Design project. I completed the design process from user research to development ready prototypes. 

The Challenge

Create a mobile weather app that will provide users with a simple and engaging way to personalize weather forecasts to fit their lifestyle.

The main goals of this project were:

  • Determine who Weather Away users are and their needs

  • Create and document key metrics and finalize a product roadmap

  • Develop a user flows and site structure for the mobile app

  • Create iterative wireframes, interactive prototypes, and test user interface designs

The Solution

Weather Away was aimed at solving the problems of what currently exists in the weather mobile app. The goals achieved by creating the app included:

  • An easy to see weather forecast snapshot upon login to the app

  • Provided settings for users to chose to be notified about severe weather, road closures, local closures, and resources of where to go for help incase of an emergency

  • Provided calendar syncing with Google, Outlook, and Apple Calendar to allow users to see what the weather forecast is going to be at for each location


Table of Contents


01.User Research Process

The project started off by doing market & user research to determine the needs, goals, and wants of Weather Away’s users.  A Competitive Analysis was done to get an overview of similar applications that were already available for Android and Apple iPhone users. User Interviews and Surveys were conducted to determine users’ frustrations with current weather applications they were using.

Click the arrows to view slides


02. Personas & Scenarios

Next, User personas and Scenarios were created to tell the story of who Weather Away users are and how they would be using the app.

 

What I learned from my research:

Weather Away users are active and busy users who want to check the weather forecast to plan their upcoming day. 

  • Many users were frustrated with weather apps that take up too much storage on their device.

  • They also found that weather apps drain their batteries very quickly, gave inaccurate forecasts and temperatures, and the weather app interfaces were cluttered and challenging to read.

Click the arrows to view slides

03. Key Metrics & Lean Canvas(MVP)

Using Google Heart,  I determined key metrics for Weather Away . Using a lean canvas, I determined the aspects of the MVP and created a product feature roadmap.

Click to view images in a larger preview

Lean Canvas

KPI's


04. Information Architecture

2018-01-21_12-37-10.png

Final Sitemap — the final structure for the application

Weather Away Site Map

05. Iterative Wireframing

After finalizing the structure of the app, I began sketching interfaces ideas, then created low-fidelity wireframes using Sketch and Balsamiq to iterate through design options quickly.

Putting ideas on paper is the first step in wireframing. I like to sketch my wireframes out first that way I can come with lots of ideas quickly. Here are some the final sketches that I came up with below.

06. Low Fidelity Wireframes

Next, I use Balsamiq to create the low-fidelity wireframes. Lo-fidelity wireframes were created with Balsamiq show user flows and the layout of Weather Away. No color was added at this point as the emphasis is on understanding how the product will work and interact not on branding elements.

Low fidelity user flows 

07. Medium Fidelty Wireframes

Then, I used Sketch to create medium fidelity wireframes. Medium wireframes were created further refine user flows and the layout of Weather Away. The biggest change was that the onboarding flow refined.

Medium Fidelity User Flows


08. High Fidelity Wireframes

 

Finally, I created the Hi-fidelity UI Designs and interactive prototype. Using feedback from users, it was determined that the video/image library was not necessary. In the final design, this feature was removed.

 Screenshot of final designs in Sketch

Screenshot of final designs in Sketch

 

09. Observations

Weather Away was aimed at solving the problems of what currently exists in the weather mobile app. The goals achieved by creating the app included:

  • An easy to see weather forecast snapshot upon login to the app

  • Provided settings for users to chose to be notified about severe weather, road closures, local closures, and resources of where to go for help incase of an emergency

  • Provided calendar syncing with Google, Outlook, and Apple Calendar to allow users to see what the weather forecast is going to be at for each location

What I Learned:

  • Talk to users early and often

  • Simplifying designs and reducing unnecessary features is a good thing.

  • Don’t be afraid of coming up with multiple solutions to a problem