sweeteeth app wireframes

14
SWEETEETH CHOCOLATE WIREFRAMES - iPhone App Version 3.0 January. 16, 2012

Upload: halley-chung

Post on 26-Mar-2016

221 views

Category:

Documents


0 download

DESCRIPTION

wireframes for sweeteeth

TRANSCRIPT

Page 1: Sweeteeth App Wireframes

SWEETEETH CHOCOLATEWIREFRAMES - iPhone AppVersion 3.0 January. 16, 2012

Page 2: Sweeteeth App Wireframes

2

not 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 3

Loading Screen 4

Home 5

Selection 6

Item 7

Order Form 8

Payment Form 9

Confirmation Form 10

Confirmation Number 11

Profile 12

Application Settings

Application Functions

Discover 13

Friends 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 HistoryVersion 1.0 (9/22/11)Version 2.0 (12/22/11)Version 3.0 (1/16/11)

Page 3: Sweeteeth App Wireframes

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 4: Sweeteeth App Wireframes

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 5: Sweeteeth App Wireframes

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 6: Sweeteeth App Wireframes

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 7: Sweeteeth App Wireframes

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 user’s cart as seen on Pg.8.

Item

Page 8: Sweeteeth App Wireframes

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 9: Sweeteeth App Wireframes

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 10: Sweeteeth App Wireframes

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 11: Sweeteeth App Wireframes

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 12: Sweeteeth App Wireframes

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 user’s 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 13: Sweeteeth App Wireframes

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 14: Sweeteeth App Wireframes

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 user’s friends on the user’s 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