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~
   

iPhone App Project (ThreeTreeTea): ~Interface1~

I could finally start posting my interface designs for my iPhone app project for Three Tree Tea Company. I have been posting useful tools for this project, my research and process, and my sketches past several days.

There are three buttons on menu bar that are "products", "steam timer", and "shopping cart". I will be talking about "products" pages today. Top image is the first page of "product" that is technically homepage of this application. I created 6 simple categories users to choose from, and last category is "all product" button, so repeating customers or someone who already know what they want could just go there to get their product. This page should give overall atmosphere of this app and company information.

If you click the image, it will be enlarged for you to see the interface better.



This is a second step where you can find product list under the tea section with images, name, size, and price for size shown the page.

You could go beck to product main page by clicking the left-top button, and get the information of the category by clicking right-top button. You could see part of next item on bottom of the screen, so you know there are more product on this list. Otherwise choose the product you like to go next page!




This would be a step 3 page if you choose "Matcha Genmai Green Tea" from the previous page. This will give you images of tea itself, tin, and bag. Here you could choose different sizes to add to in your shopping cart. You could also find description about this tea. I like to add "steap button" on bottom of the screen (when you scroll down the page all the way).

When you click one of the add to cart button, you will link to first page of shopping cart that I will post here in near future!

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~

iPhone App Project (ThreeTreeTea): ~Sketches~

This is continuous topic from last blog post that was iPhone app project for Three Tree Tea, and I showed research and thinking process. Here I am posting my process sketches. These are not anything pretty or fancy, but quick sketches for my brain to process the ideas, to record before I forget (very important:-), to compare my ideas after this sketches, and.....such. It will be a little bit more clear to you what I'm thinking when you see my project!

What I have in my mind is that there will be three main part to this application that are Product section, Steaping Timer section, and Shopping Cart section for this tea company.
To be continue........:-)

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): ~Interface 1
   
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

iPhone App Project (ThreeTreeTea): ~Research/Process ~

I was talking about my new iPhone App project I have been working on in my previous blog post, and this is a part of my research/process I was doing for this project.
The client is "Three Tree Tea Company" in Seattle. The top image is loading screen when you first click a icon of application from your phone top screen:)
I will continue to post more work!!

----------------------------------------------------------------------------
Project Statement:
Their mission is to present to you our line of superior, hand-picked and carefully blended teas. We sincerely hope that you will enjoy our teas not only to relax but also for their flavor and beauty.

This is small business in Seattle and I am designing Mobile Application to help business to be spread from this app. The business is running online based, and this app should help target audiences to understand more about teas and their products, and it would also give them an option to buy their product from their cell phone.

Research

• The company started in 1995
• They operated a unique and Asian-inspired tea house that blended the natural and organic elements with the tradition of tea, but in a non-intimidating way.
• The logo consists of three tree, again derived from Three Tree Point and very representative of Washington State
• Products: matcha, Tea Tools, Tea Late Powder, Hana-cha, other Japanese tea and more.

Target Audiences

• Wholesale such as coffee and teashops as well as for resale in grocery stores and specialty/ gift shops. However, this project is targeting more towered to individual shoppers.
• People who are into natural and organic product
• Middle age group (mainly women)

Objective
I like to add playful and fun atmosphere, but also give an organic and natural feeling of their product.

Key Benefit
Focus of this iPhone app would be the "steap timer" option that users could use when they make tea from the company, and each tea will have proper length of steaping time. It would also give some tips for each product such as amount and temperature of hot water.

Support Statement
Tea market is glowing in the United States, but it could be better. There are some simple easy steps you could do to make your tea much more enjoyable in everyday life. I hope this application will help users to buy good tea, steap more flavorful tea at home, and making and drinking tea as their part of life style.

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): ~Interface 1
   
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

Another Useful Tool: iPhone GUI PSD Version 4

Yesterday, I mentioned that I have started working on iPhone app interface design and recommended the page "10 Free Printable Web Design Wireframing Templates" from WDL (Web Design Ledger) site.

I really like to share another related page call "11 UI Kits for iPhone and iPad Development" that is also from the WDL, and is my another best friend for the project I am working on right now (I am planing to post the project here when it's done).


On this page, you can find:

1. iPad GUI Kit in PSD Format
2. iPhone GUI PSD 4.0
3. Free iPhone Toolbar Icons
4. Ultimate iPhone Stencil for Omnigraffle
5. iPhone UI Vector Elements
6. Free iPhone Toolbar Icons
7. Yahoo! Design Stencil Kit
8. iPad GUI PSD
9. iPad Vector GUI Elements
10. iPad Stencil for Omnigraffle
11. iPhone PSD Vector Kit

I am using one of the tools listed above call "iPhone GUI PSD 4.0" for my project right now and it is helping my interface design much presentable.
I was showing my iPhone app interface design in my class today, and few people ask me where I found these useful template, so it was another reason I wanted to share this site here. I hope more people will benefit from handy tools like this.

iPhone GUI PSD 4.0

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): ~Interface 1
   
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

Useful Tool: iPhone Wireframe Templates for Sketching

One of my friend introduced me this useful link page "10 Free Printable Web Design Wireframing Templates" from WDL (Web Design Ledger) site.
You could find many sites where give you different type of template, but I fond their wireframing templates very useful, so I decided to share with people who come to read my blog (thank you!), but don't know about this site.
This would also help me going back to the page if I lost the downloaded file.


On this page, you can find:

1. Paper browser
2. iPhone Application Sketch Template v1.3
3. Six page template
4. Wireframe template
5. iPad Application Sketch Template v1
6. iPhone Wireframe Templates for Sketching
7. iPhone App Wireframe Template
8. Concept7 Sketching Grid Paper
9. Paper wireframe templates
10. 960 grid template
    

I have started iPhone app interface design project for a company (I will post it here when I'm done with the design!), so I needed to start sketching my ideas and I am using one of the templates below:


If you are not a designer/web related person, you could still use these template for fun...I bet somehow!


Other related my blog post to this page:

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

Editorial Illustration: 90% of US bills carry traces of cocaine

click here for the article on cnn.com

This is my editorial illustration for the article from CNN Health section that said:

"Research presented this weekend reinforced previous findings that 90 percent of paper money circulating in U.S. cities contains traces of cocaine."

I fond this article has a interesting fact that would get people's attention very easily, and it would be fun for me to create supporting graphic to it.
The issue could be very serious, but the article was not talking about specific crimes or posted as top news, but in mental health section, so I felt I could go to a little bit unrealistic direction with some humor. I also thought idea of unrealistic illustration has connection to the cocaine. It is still a negative story, so I wanted to keep it darker tone. I wanted the illustration to support the catchy topic to pull more audience to read the blocks of texts.

some of my sketches and note