TEMP by Saurabh

TEMP by Saurabh - student project

I guess to give a little background on myself, I'm primarly an audio professional and have been doing that for about 20 years. Before that I did have a little background in graphic, web and interactive media visual design and dabble in those areas from time to time. But I'm really rusty and this class is a good way to sharpen and expand my skills in something new that I haven't done before (app UX). My long term goal is to be able to design the front end and sound for an audio app idea that I have.

Ok, well so far I have a design brief with a logotype, fonts and color palette. Here it is:

(Edit 4/29/13: I adjusted my final color paletted based off my final designs below). 

TEMP by Saurabh - image 1 - student project

I decided to go with a different logotype, fonts and color palette than the instructors. Here's my reasoning why: those are the fundamentals of any design. I understand that what we were given might be a good jumping off point for some people but I wanted this to be my own design and I wanted to start from scratch with a bolder look overall. I hope that is not against the rules or something, if it is, I can change it back. This said, I used the branding toolbox we were given to present my brief (and yes, I know it's not really a full creative brief, i just don't know what to actually call it).

Here's my wireframe which explains navigation elements and has basic placement and screen real estate:

TEMP by Saurabh - image 2 - student project

I wanted something clean and simple but had all the information I could want from a weather app. The sceen is split into two halfs, the top showing the current day temparture and the second showing night temparature for that particular date. The very bottom shows the temparature every two hours, but tapping the screen reveals the temparature for each day of the week. Swiping left on either screen moves you to the native city selection/swap screen where you can change cities, add more cities, etc. Sorry I didn't have time to mock that up in the wireframe but we all know what that looks like, right? Anyway, one of the features I wanted was the "feels like" section that more accurately reflects how it actually feels outside based on wind chill factor, etc. Temparatures here are in Faranheit but would change to Celsius depending on city setting (forgot to add the little F next to the tempartures). Also, the icons (Flat Weather Icon set by Lavana on DeviantArt) are not indicative of the final design except for one factor: lunar cycle, something that is woefully missing from most weather apps. After all, don't we want to know when the full moon is so we can avoid all those freaks and weirdos out there raising hell? (Who am I kidding, I am one of those freaks). Last note, the degree symbols in the final design will be square instead of circle to tie into branding and logotype.

Here are the mockups for my final app design:

TEMP by Saurabh - image 3 - student project

As you can see I stuck fairly close to my wireframe. Navigation works the same, swiping left moves you to the fully native city selection screen. I did not have time to mock that up, sorry. But again, since it's native I'm assuming everyone will understand what that looks like. Tapping the hourly tempartures brings you the weekly temparatures, as seen below:

TEMP by Saurabh - image 4 - student project

Double-tapping on one of the weekly temparatures/days would bring up the day and night weather information for that day. Tapping once takes you back to the previous hourly temparture screen for the current day.

TEMP by Saurabh - image 5 - student project

For iconography I chose the Photo Realistic Weather Icons Set by Gianluca Giacoppo. i really liked this set because I wanted bold yet elegant and easily understood icons. I think the icons match my design scheme and color pallette pretty well.

TEMP by Saurabh - image 6 - student project

Overall I'm pretty happy with my design. Hopefully the color scheme makes it pretty clear and demarcated what the day and nighttime temparatures and weather is, since it seemed like people were confused about that from my wireframes. As a raitonale, all I can say is that 99% of the time I look a the weather app on my phone it's to find out the weather for that day or evening so I can plan ahead on what to wear, whether to take an umbrella, etc. I didn't want too much advanced functionality; just wanted some clean, nice, bold and simple, with clean lines and a strong color palette and iconography. I think I succeeded in this regard, but I'm hoping to get some feedback.

TEMP by Saurabh - image 7 - student project

Thanks for taking the time to review my project. I really enjoyed this process and hope to continue designing apps in the future.

Saurabh Bose

producer/audio engineer/remixer/sound designer