Weather App

The 4th project in the UX Design Techdegree. I was tasked to create a mobile app prototype that displays the current and future weather forecast. The challenge? Design the content structure logically and develop a prototype that's easy to use. My weapon of choice? Adobe XD.

Date: April 2019

Role: UX/UI Designer

Course: UX Design Techdegree @ Treehouse

The Users

This app targeted adults between the ages of 18-35 years who were interested in simple reports on the weather. They're characterized as direct, straight-forward people who have an appreciation for simplicity and clarity.

My Process

Two screens needed to be designed. Current Day (overview screen), and Day Detail. Each screen contained common weather information you'd expect to see in a weather app. Once the content was laid out, I started sketching some ideas.

User persona profiles

Early sketch process.

The most effective ideas were highlighted and wireframed. It didn't take long for me to stumble upon the strongest concept out of the batch. From there, I iterated dozens of times. When taking a step back to look at each design, the "KISS" acronym kept buzzing in my head. Keep It Simple. Stupid.

Wireframes. Wireframes. Wireframes.

Wireframes. Wireframes. Wireframes.

After the simplifying process, visual design kicks into high gear. The focus was, once again, to keep things simple. A monochromatic color scheme made sense in this case. Dark hues received shades of blue mixed with gray. Color was exclusively given to the current weather icons on the main screen and navigation. All this was to help the user easily identify important information and understand which elements were selected.

The final design.

The final design.

Mocking up the prototype.

Mocking up the prototype.

The Outcome

By designing and prototyping this weather app, I dipped my feet into the world of information architecture. Learning concepts like navigation, labeling, hierarchy, and content structure. I got to see first-hand how data and logic intertwine. On top of that, I flexed my user interface design skills. Understanding rationale behind the decisions I made visually and applying them to heighten information clarity. Despite this project's generic name, this was no generic problem to solve.

Want to try out the prototype? Hit me!

Reach out to me

Interested in my work? Resonate with what I believe in? Let's have a conversation!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.