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

AIGA Event: Pixel Punchout Round 2 "The Final Four"

http://www.aigaseattle.org/events/pixel-punchout-round2

There was "Pixel Punchout" Round 2 this past Friday, April 15th from 6:30-8:30 at the Art Institute of Seattle. There were four competitors who had won the Round 1 last week.

The four competitors were:
Nate Johnson of frog vs. Anasazi Wade of Starbucks
Brian Piper of Tether vs. Zach Pfriem of Ascentium

I went to the event again, and had a great time. It is really inspiring to watch these talented designers could come up with ideas and execute them in one hour!

Championship will be hosted on Friday, May 6 from 6:30-8:30 at Adobe HQ in Fremont. It would be very exciting to see the Adobe office as well. I am not sure how to sign up or cost for this championship, but I am interested in attending this event.

Get Direction to Adobe HQ in Fremont


My Other Post about Pixel Punchout Event:

1. AIGA EventPixel Punchout Round 1 "The Elite Eight"
2. AIGA EventPixel Punchout Round 2 "The Final Four"