Published on <a href="http://ift.tt/2pLGvzh">| Prototyping: From UX to Front End &mdash; Medium</a> Tara-Lee York 
<h4>Simple and engaging way to personalize your weather forecasts to fit your lifestyle.</h4>
<img alt="" src="http://ift.tt/2p6k4Gy">Weather Away
<h4>Project Overview:</h4>
UI <a href="http://ift.tt/2qNkhuB">CareerFoundry</a> 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.
<iframe src="http://ift.tt/2p6vWbo" width="452" height="901" frameborder="0"><a href="http://ift.tt/2qNutD5">http://ift.tt/2qNutD5</a></iframe>
The main goals of this project were:
<ul>
<li>Determine who Weather Way users are and their needs</li>
<li>Create and document key metrics and finalize a product roadmap</li>
<li>Develop a user flows and site structure for the mobile app</li>
<li>Create iterative wireframes, create interactive prototypes, and test user interface design with users</li>
</ul>
<h4>Discovery Phase</h4>
The project started off by doing market &amp; 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.
<img alt="" src="http://ift.tt/2p6oehH"><img alt="" src="http://ift.tt/2qNaioQ"><img alt="" src="http://ift.tt/2p6k6hE">Mark’s Persona<img alt="" src="http://ift.tt/2qNpEtM">Mark’s Scearnio
<h4>Define Phase</h4>
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.
<ol>
<li>Key Metrics and Product Roadmap</li>
</ol>
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.
<img alt="" src="http://ift.tt/2p6wduZ">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
<img alt="" src="http://ift.tt/2qNBdkJ">Screenshot of card sort done in optimal sort
4.Final Sitemap — the final structure for the application
<img alt="" src="http://ift.tt/2p6xvpL"><img alt="" src="http://ift.tt/2qNh3az"><img alt="" src="http://ift.tt/2p6z3Qs">Weather Away Sitemap
<h4>Design Phase</h4>
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).
<ol>
<li>Iterative Wireframing</li>
</ol>
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.
<img alt="" src="http://ift.tt/2qNkiPb"><img alt="" src="http://ift.tt/2p6vUQO"><img alt="" src="http://ift.tt/2qNkUUO">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.
<iframe src="http://ift.tt/2p6FSlh" width="452" height="901" frameborder="0"><a href="http://ift.tt/2qNpq5Q">http://ift.tt/2qNpq5Q</a></iframe><img alt="" src="http://ift.tt/2p6twJW"><img alt="" src="http://ift.tt/2qNo7DV"><img alt="" src="http://ift.tt/2p6N2Ge"><img alt="" src="http://ift.tt/2qNaMeU"><img alt="" src="http://ift.tt/2p6zYjV"><img alt="" src="http://ift.tt/2qNutTB">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.
<iframe src="http://ift.tt/2p6of5f" width="452" height="901" frameborder="0"><a href="http://ift.tt/2qNkhL7">http://ift.tt/2qNkhL7</a></iframe><img alt="" src="http://ift.tt/2p6H7kj"><img alt="" src="http://ift.tt/2qNx7cd"><img alt="" src="http://ift.tt/2p6Dqve">User Flows
2. Final Design and Interactive Prototype
<img alt="" src="http://ift.tt/2qNoyOy">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.
<iframe src="http://ift.tt/2p6vWbo" width="452" height="901" frameborder="0"><a href="http://ift.tt/2qNutD5">http://ift.tt/2qNutD5</a></iframe>
<h3>Summary</h3>
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:
<ul>
<li>An easy to see weather forecast snapshot upon login to the app</li>
<li>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</li>
<li>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</li>
</ul>
<h4>What I Learned:</h4>
<ul>
<li>Talk to users early and often</li>
<li>Simplifying designs and reducing unnecessary features is a good thing.</li>
<li>Don’t be afraid of coming up with multiple solutions to a problem</li>
</ul>
Interested in working with me?
Please contact me using the link below
<a href="http://ift.tt/2p6xX7C">Contact &#8211; Tara Lee York</a>
<img src="http://ift.tt/2qNx7sJ" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2p6A7UL">Weather Away — UX Case Study</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Weather Away — UX Case Study

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

Project Overview:

Top Stories