iPhone App Project (ThreeTreeTea): ~Interface2~

Today's posting would be Part2 of my interface design for Three Tree Tea Company iPhone app. You can click each images to enlarged them for better details.

I am posting all the pages I have designed for "steap timer" on the menu bar today. This section is the funnest part of this application and I think make this app differentiate from others (I hope).



Left image is the second page of the section if you click "go to tea list" on previous page, and I may change its design to unify with rest.........
Well, it is list of tea you can buy from this app and also get steam timer and tips to make your tea!







When you choose your tea from the list, it will come this the page like on the right. I chose Matcha Genmai Tea here:)

Tip would tell you how much tea you need for specific hot water. Here it said you need boiling water, but some tea need lower temperature, so you could find such information from the tip.

It will take a minute and half for this tea, so when you are ready, just click the Steam Your Tea button!




Once you click the Steap Your Tea button, the timer will start ticking. Lady in kimono shows up and keep you company being very polite:) As you see from top left image to right, light glow is getting bigger that is one more way telling you time is ticking. This idea was brought by other students who gave me critique in the class. You can click "cancel" to turn off your alarm music on right image.



This is the last screen when your tea is ready. It is very simple and the lady in kimono is still super polite to tell you to enjoy your tea, and hand the tea to you. Adding the tea cup in her hand was also getting critique in the my class last week from my instructor. I could totally get nervous showing my works to others, but getting critique from others totally helps!

Other related my blog post to this page:

1. Useful Tool: iPhone Wireframe Templates for Sketching
2. Usuful Tool: iPhone GUI PSD Version 4
3. iPhone App Project (ThreeTreeTea): ~Research/Process ~
4. iPhone App Project (ThreeTreeTea): ~Sketches~
5. iPhone App Project (ThreeTreeTea): ~Interface1~
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~