Sweeteeth App Wireframes

  • View
    212

  • Download
    0

Embed Size (px)

DESCRIPTION

wireframes for sweeteeth

Text of Sweeteeth App Wireframes

  • SWEETEETH CHOCOLATEWIREFRAMES - iPhone AppVersion 3.0 January. 16, 2012

  • 2not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    Table of Contents

    About This Document

    About This Document 2

    Launch Application 3Loading Screen 4Home 5Selection 6Item 7Order Form 8Payment Form 9Confirmation Form 10Confirmation Number 11

    Profile 12Application Settings

    Application Functions

    Discover 13Friends 14

    This documents the Information Architecture and structure of Sweeteeth App design concept.

    Wireframes illustrate the information architecture and interaction design elements of the App. This document defines the page structure (information), interaction, and navigation. It does not influence the nomenclature, colors, stylesheets, shapes, aesthetics and other visual design of the actual design for the Sweeteeth Chocolate Bars.

    Wireframes provide a rationale behind the page structure, the interaction and the navigation. This vital information helps the development, design and UE team layout the foundation for the project.

    New changes, including functionality and page elements are documented and reviewed into each wireframe. All changes

    Wireframes

    Revision History

    Version 1.0 (9/22/11)Version 2.0 (12/22/11)Version 3.0 (1/16/11)

  • Page Notes

    3

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 App Icon on IPhone interfaceWhen clicked on, the application will launch automatically.

    Launch Application

  • Page Notes

    4

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Loading ScreenThe basic loading screen when the application is launched. A small rotating animation is shown to give functionality feedback to the users.

    Loading Screen

  • Page Notes

    5

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    2.0 Home, User and Shopping Cart IconThese 3 icons will be on every section through the application. This will allow the user easy access to the homepage, user information and their shopping cart if they wish to make changes anywhere during their shopping process.

    1.0 Placeholder for Sweeteeth LogoThis is a placeholder for the Sweeteeth logo and branding.

    3.0 Placeholder for Sweeteeth LogoThis placeholder shows the name of the user that is currently signed in. If is a new user using the app, this will be a clickable link that directs the user to the sign up page which can be view on Pg.12.

    4.0 Placeholder for News feedThis area will have the latest news about Sweeteeth, keeping the user up to date with the newest flavours and happenings.

    5.0 Flavour Selection ButtonsThese buttons allow the users to pick their flavor of interests. Clicking on these buttons will direct the users to a sub section where a detailed description of each flavor is given.

    6.0 Settings SelectionsThese buttons allow the users access to the different settings such as Profile, Share, Friends and Discover in the app. Their functionality can be seen on Pg.9-12.

    Home

  • Page Notes

    6

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Placeholder for ImagesPlaceholder for the flavored chocolate bar images. The image will tell the users which bar they are looking at.

    2.0 Cursor for Selecting Chocolate BarsWhen clicked, a different chocolate bar flavor and their description will appear on screen, giving the user the ability to scroll through and look at different chocolate bars.

    3.0 Placeholder for Item DescriptionThis placeholder will have the name and a detail description of the ingredients for the chocolate bars and how much each cost.

    4.0 Quantity FieldThis is a field for user to input their desire quantity ( in numbers) they wish to purchase for the chocolate bar on screen.

    5.0 Add to Cart ButtonWhen this button is clicked, the quantity input by the user in the quantity field of the bar on screen will be added to the shopping cart. A detailed view of the shopping cart can be seen on Pg.8.

    Selection

  • Page Notes

    7

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Image placeholder These are images placeholder for the different chocolate bars.2.0 Quantity input PlaceholderThis is a input box that allow users to review and adjust the quantity they have entered in the previous page if any changes are necessary.3.0 Price Placeholder This is a placeholder for the total price for each flavored bars.

    4.0 Total Quantity PlaceholderThis is a placeholder for the total input quantity by the users of the 3 bars quantity added together.

    5.0 Total Price Placeholder This is a placeholder for the updated quantity total price of the 3 bars added together excluding taxes and shipping fees.

    6.0 Add to Cart Button Clicking on this button will add the current items to the users cart as seen on Pg.8.

    Item

  • Page Notes

    8

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Delivery Date FieldUser can input their desire delivery date after the required 2 day processing day.

    2.0 Contact Number FieldThis is the field for the user to enter his/her contact number.

    3.0 Shipping Address FieldThis is the field for the user enter their desire shipping address.

    4.0 Email Address FieldThis is the field for the user to enter their email address.

    5.0 Ok to Email OptionThis gives the option for the user to select whether they want to receive special offers email from Sweeteeth Chocolate.

    6.0 ProceedClicking on this button, the user will be directed to the payment section.

    Order Form

  • Page Notes

    9

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Credit Card SelectionHere the user can select their desire credit card for payment.

    2.0 Name FieldsThis is the field for user to enter their first and last names.

    3.0 Credit Card InformationThis is the field for user to enter their credit card information for payment.

    4.0 Billing Address FieldThis is the field for user to enter their billing address information.

    5.0 Same as Shipping Address OptionThis button gives the user the option to have the billing address automatically filled out to be the same as the shipping address.

    6.0 Proceed ButtonClicking on this button, the user will be directed to the order confirmation page.

    Payment Form

  • Page Notes

    10

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Quantity and Price ReviewHere the user can review their selected quantity and price before final payment is confirmed.

    2.0 Shipping methodsHere the user can select their desire shipping method.

    3.0 Grand Total FieldHere the user can review the final total price of their order.

    4.0 Place Order ButtonHere the user can complete their order by clicking the button.

    Confirmation Form

  • Page Notes

    11

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Confirmation NumberHere the user can find their order confirmation number.

    2.0 Facebook Share ButtonHere the user can click and share their ordered on facebook.

    3.0 Twitter Tweet ButtonHere the user can tweet about their ordered on twitter.

    Confirmation Number

  • Page Notes

    12

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Name FieldsThese fields are for the users first and last names.

    2.0 Email FieldThis is the field for the user to enter their email address.

    3.0 Password FieldThis is the field for the user to enters their password.

    4.0 Confirm Password FieldThis field allow the user to confirm the password they entered.

    5.0 Contact Number FieldThis is the field where the user enter their contact number.

    6.0 Scroll down to Address BookHere the user can click and scroll down to the bottom of the form to the address section of the form.

    When Clicked

    Profile

  • Page Notes

    13

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Placeholder for descriptionWhen clicked on the discover button, the user will be directed to the discover page where a brief history of the Sweeteeth company will be given to the user.

    When Clicked

    Discover

  • Page Notes

    14

    not indicative of final design or nomenclatureSWEETEETH DESIGN APPDocument: WireframesLast Edited: 1/16/2012 Author: Halley Chung

    1.0 Friend Image PlaceholderImages of the users friends on the users phone contacts.

    2.0 Friends contact numberFriend contact number.

    3.0 Share with friend check boxBy checking the box, you are inviting your friends to get the Sweeteeth chocolate application.

    When Clicked

    Friends