Published on | Prototyping: From UX to Front End — Medium Tara-Lee York

Simple and engaging way to personalize your weather forecasts to fit your lifestyle.

Weather Away

Project Overview:

UI CareerFoundry Course Project

My Role: I was the Sole UX/UI Designer for this project.

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

<a href="http://ift.tt/2qNutD5">http://ift.tt/2qNutD5</a>

The main goals of this project were:

Determine who Weather Way 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, create interactive prototypes, and test user interface design with users

Discovery Phase

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 application they were using.

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 forecast and temperatures, and the weather app interfaces were cluttered and challenging to read.

2. Personas and Scenarios

Next, Personas and user scenarios were created to tell the story of who Weather Away users are and how they would be using the app.

Mark’s PersonaMark’s Scearnio

Define Phase

Next, it was time to enter the second phase of the project. In this phase, I helped determined key metrics, create product feature roadmap, and determine structure and flow of the app.

Key Metrics and Product Roadmap

Key metrics and product requirements were based on the user needs and business goals for the project. I used a lean canvas to facilitate the a clear view and plan of where were the project was headed.

Lean Canvas

2. Beta Sitemap was created with information gathered during user interviews and survey based on what users had told us would be most useful to them.

3. Online Card with Optimal Sort

Screenshot of card sort done in optimal sort

4.Final Sitemap — the final structure for the application

Weather Away Sitemap

Design Phase

User interfaces are the visual and front-end design of a website, mobile app, or web application. UI design includes several steps: paper prototypes (sketches of the interface), wireframes (low/grayscale mockups of the interface), and hi-fidelity wireframes ( mockups that resemble what the final interface will look like).

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.

Weather Away Sketches

Next, I use Balsamiq to create the low-fidelity wireframes. Lo-fidelity/grayscale 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.

<a href="http://ift.tt/2qNpq5Q">http://ift.tt/2qNpq5Q</a>User Flows

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

<a href="http://ift.tt/2qNkhL7">http://ift.tt/2qNkhL7</a>User Flows

2. Final Design and Interactive Prototype

Final Designs In Sketch

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 designs, this feature was removed.

<a href="http://ift.tt/2qNutD5">http://ift.tt/2qNutD5</a>

Summary

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

Interested in working with me?

Please contact me using the link below

Contact – Tara Lee York

Weather Away — UX Case Study was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Weather Away — UX Case Study

Cool stuff, every week

More Articles