Monday, April 25, 2011

iPhone App Project (ThreeTreeTea): ~Interface1~

Labels:
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~
Posted by Kayano Tokuzato at 12:11 AM

8 comments:

  1. AnonymousApril 25, 2011 at 8:04 AM

    Nice clean design and easy to understand steps! I just think it would be better if you put a little design on the second and third steps, just change text colors or something.

    ReplyDelete
  2. Kayano TokuzatoApril 25, 2011 at 11:49 AM

    @mizukiyaginuma

    Do you mean changing text colors on my blog or my interface design?

    ReplyDelete
  3. UnknownApril 26, 2011 at 6:26 PM

    Kayano, it looks really clean and understandable. If you're able, it'd be nice if you could keep the background color consistent even in the 'choose' part so that it's the same color and not the white background.

    ReplyDelete
  4. Kayano TokuzatoApril 26, 2011 at 7:05 PM

    @ Ayen

    I may try that in my product list page!

    ReplyDelete
  5. AnonymousApril 27, 2011 at 2:36 PM

    I meant the interface design. Also I agree what Ayen suggested. I think maybe it would need something consistent.

    ReplyDelete
  6. Kayano TokuzatoApril 27, 2011 at 3:18 PM

    @mizukiyaginuma

    Thanks for the suggestions, Mizuki!

    ReplyDelete
  7. Masayo KimuraMay 13, 2011 at 11:50 AM

    I am waiting for coming interactive version!! (I don't know if you make or not) But I think if you make the interactive version, it would be great!!

    ReplyDelete
  8. Kayano TokuzatoMay 13, 2011 at 1:14 PM

    @Masayo Kimura

    This project ends as interface design for now since I don't know how to code apps for phone for now.
    I hope I will be learning to make one in the future!

    ReplyDelete

Subscribe to: Post Comments (Atom)