computer screen logo

Nicole Peery

Front-end web developer known for strong design skills and creative problem solving

Weather App UI Prototype

Weather application screens

Project Overview


This prototype was created for the UX Techdegree program at Treehouse.

In this project, I was tasked with creating a user interface for a weather application. My role was to create a prototype that included:

  • A current day overview screen with location, current temperature, chance of precipitation, and 5-day outlook
  • Day-detail overview screen with the day of week, high and low temperatures, and conditions for each part of the day

Process


After reading positive and negative reviews for the top 3 weather applications in the Google Play Store, I made a list of the most common design-related complaints:

  • Too busy and confusing visually; cluttered interface
  • Navigation is unclear
  • Too many advertisements
  • Forecast is inaccurate

Keeping these common criticisms in mind, I sketched a preliminary app layout in Procreate and began fleshing out ideas for the layout, icons, and text.

Weather App UI Sketches

Since many of the complaints from other weather applications mentioned a cluttered and confusing interface, I chose to keep the iconography and text simple with symbols users could easily recognize.

The location pin and settings slider are common app design patterns that users have seen multiple times in other applications, and facilitate the user journey through this weather application's contents.

The use of simple line icons and numbers allow this interface to display helpful information without becoming cluttered, and the content boxes for each day assist with clearly distinguishing daily information visually.

Displaying images from the user's location with colors that reflect the current conditions help to reinforce a sense of information accuracy.

With these considerations and design choices in mind, I created a prototype in Adobe XD.

Weather application ui explanation

Lessons Learned


I learned about the importance of starting with a strong understanding of user needs and expectations and translating those requirements into a clear design before getting started with code. This project taught me how much I enjoy making prototypes in Adobe XD based on user feedback.

During this project, I was taken by surprise by how quickly a user's trust can be broken by trying to present too much information, not giving them clear options, and not providing a sense of forecast accuracy.

There are many free and low-cost weather applications available on a variety of platforms, and users won't spend much time trying to figure out an interface they perceive as cluttered or confusing before uninstalling the application and trying another.

The Result


SEE THE LIVE PROTOTYPE

The final grade I received on this project was exceeds expectations. To obtain the "above and beyond" grade, I:

  • Included an app frame with common navigation items.
  • Added iconography to show the weather conditions for each day and each time of day.

Here are some comments from my project reviewer on my work:

"Great work on your prototype! You created two mockups and connected them with interactivity to make a more realistic version of the design for the client to view. At this stage, you would most likely be making decisions on functionality over layout and design."

"I absolutely love the design of this app! The orange is so calming and beautiful, and it really does reflect the weather shown. I also like the inclusion of the picture in the background, I think that really makes the design complete."

"Fantastic work! I look forward to seeing more from you."