Project Duration: 1 Month
My Role: User Interface Design, Wireframing, Visual Design, Prototyping
Tools: Adobe XD, Invision
For this project, the target audience that I was thinking about while creating this application was pretty universal - pretty much every person with a phone who walks outside their door could use an application that tells them the forecast of the weather in order to know what to expect for today and the upcoming days. This app is inclusive and for everyone.
For the wireframes, I wanted to stay true to the assignments guidelines in needing to keep three screens: a day screen, a weekly screen, and settings screen to set the location. I then created a flow of how the user would interact with the design in thoughts of how they might easily navigate the app. The user would start at the overveiw screen, then select the a date to see more details of the day screen, or they might update their settings in the settings screen.
I then got started in drawing out my initial sketches of how I think the wireframes would flow better in the design. The way I got about doing this is I sketch out many ideas very quickly on different peices of paper for different ideas for designs/features. I try not to erase anything and go with the flow, you never know when a "mistake" might inspire an amazing idea! I then highlighted some of the features I liked from my quick sketches I have made to come up with the ultimate wireframe.
The overview screen includes the user's location, the current temperature, the chance of precipitation, and a list of 5 upcoming days (including the current day). Each upcoming day has the name of the day of the week, and the high and low temperatures. Tapping on an upcoming day brings the user to a "day detail” screen.
Roboto
Aa - Roboto Light
Aa - Roboto Regular
Aa - Roboto Bold
H1 - Roboto Regular (40pt)
H2 - Roboto Regular (31pt)
H3 - Roboto Regular (24pt)
Roboto Regular (18pt)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
#2D87A5
#65CECE
For the Icon designs, I wanted to choose a design set that was clean and simple that would complement the colors and the font that I choose. I Choose an Icon set online by Heeyeun on behance which I thought was perfect for the design.
Check out the Icon Set 🎨
For the Header design, I thought it would be simple to have three compnents to it. The "+" icon adds a city in which the user wants to add another city to the list. The City name that the user is looking at. Finally, a hamburger icon to look at the user settings/menu screen.
The simple button icon which I thought complemented the colors in the palette.
I thought this component was a good idea for users to understand how hot or cold the weather was going to be throughout the day when it was selected. It gives users a nice simple way to see what the temperature will be like.
This is a table which outlines the days of the week and what the temperature will be like. There are a couple of columns in the table: day of the week, weather forecast, high temperature, and low temperature of the days. All of these components combined give the user an idea of what their week will look like from a glance.
After going through my initial sketches, wireframes, and my style guide, I went ahead and created my final product in a high fidelity. Below is what the product looks like. it is very seemless, easy to read and understandable to the user: A simple weather app.
Definatley think that this app could use more user research and expand on what features that users really need in a weather app and expand upon it. The app and its features itself is very simple and does not differentient itself from other weather apps. How could we make this app special and different that other apps that are on the market? What features can we come up with that can help the user's specific needs? What are the additional needs of the user? These are all questions that I would love to explore and dive into for a more holistic picture.
In this project, I learned how designing information effectively can lead to productive design. I really loved working with the colors and planning and executing a nice design. This was one of the first designs I started from pen and paper all the way into a final iteration of a design. I'm really proud of the work that I did for this project and I would personally would use this app!