Nood Design iPhone App by Luis Francisco Baroni Coutinho

Title Page

NOOD DESIGN WIREFRAMES – iPhone App VERSION 1.0

March 28, 2011

THIS DOCUMENT HAS BEEN PREPARED FOR LIMITED DISTRIBUTION. THIS DOCUMENT CONTAINS MATERIALS AND INFORMATION THAT NOOD DESIGN AND LUIS FRANCISCO CONSIDERS CONFIDENTIAL, PROPRIETARY AND SIGNIFICANT FOR PROTECTION OF ITS BUSINESS.

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

About This Document This documents the Information Architecture and structure of <project name> design concept. Wireframes Wireframes illustrate the information architecture and interaction design elements of a site. This document defines the page structure (information), interaction, and navigation. It does not influence the nomenclature, colours, stylesheets, shapes, aesthetics, and other visual design parts of the website concept. Wireframes provide a rationale behind the page structure, the interaction and the navigation. This vital information helps the development, design, and UE teams to scope out the project. New additions and changes, including functionality and page elements, are documented and reviewed into each wireframe. Wireframe alterations are documented in the â&#x20AC;&#x153;Revision History.â&#x20AC;?

Table of Contents About This Document Loading Screen Home Category Sub Category Item Image detail Search Gift Ideas Cart More Stores Wishlist User Account Settings

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Revision History Version 1.0 (February 1, 2010) - First draft based off of

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Loading Screen Page Notes

1.0 Loading Screen This is the basic screen that is showed while the application is being loaded. An animation of a rotating circle is showed to give functionally feedback to the user.

Carrier

12:00 PM

1.0

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Home Page Notes

1.0 Loading Screen This placeholder shows the name of the current signed in user. If there is no user signed in, this will be a clickable link taking the user to the Settings page as seen on Pg. 16.

2.0 Nood Logo This is a placeholder for the Nood logo/branding. Future such instances will be similar in functionality. Carrier

3.0 Categories Buttons

12:00 PM

These buttons are images placeholders with the category name written on it. Clicking on these buttons will take users to the following categories sections, as seen on Pg.5.

1.0 Welcome back,

2.0 Furniture

Kitchen & Table

Bags & Luggage

Clocks & Accents

Bed & Bath

Gadgets & Toys

3.0

4.0 Main Toolbar This is the main toolbar and stays on the screen on every section except when the user is on User Account or Settings. The sections on it are: Home, Search, Gift Ideas and More. For more details on each section see Pg.4, Pg.9, Pg.10 and Pg.12 respectively. Future such instances will be similar in functionality.

Clearence or Featured item

4.0

home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Category Page Notes

1.0 Top Menu This small menu works as a quick link to the User Account, Home and Cart sections, as seen on Pg.15. Pg. 4 and Pg.11. Future such instances will be similar in functionality.

2.0 Categories Breadcrumbs

Carrier

1.0

12:00 PM

This placeholder are breadcrumbs showing the current structure of pages to help the user locate himself. Future such instances will be similar in functionality.

3.0 Featured Placeholder

2.0

This placeholder will display the items that is currently being featured on the current category. It shows a short description of the product, name and picture. Clicking on this placeholder will take the user to the item page. Future such instances will be similar in functionality.

furniture home > furniture

LOREM IPSUM DOLOR SIT AMET COLORES

3.0

awesome sofa

4.0 Sub-Categories Buttons Image These are images placeholder for the sub-category. Clicking on these iamges will take users to the following sub-categories sections, as seen on Pg.6. Future such instances will be similar in functionality.

 bedroom

4.0

4.1 Sub-Categories Buttons  chairs

4.1

Clicking on these buttons will take users to the following subcategories sections, as seen on Pg.6. Future such instances will be similar in functionality.

 contemporary  couches

 danish modern

home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Sub Category Page Notes

1.0 Items Filter These are filters that sorts the results based on the user selected choice. This filter must have a colored active state.

2.0 Item Image This is a placeholder for the item image. Clicking on these images will take users to the selected item page, as seen on Pg.7. Future such instances will be similar in functionality. Flicking on this area will scroll through the items. Carrier

12:00 PM

3.0 Item Description These are text placeholders showing the item name, online availability and price. It shows the availability with colored bullet and text (red for not available and green for available.). The price is displayed on the currency selected on the Settings section ass seen on Pg. 16. Future such instances will be similar in functionality.

chairs

home > furniture > chairs

SORT BY:

1.0

newest

top sellers

name

price

4.0 Items Scroller This is a scroller to have a smoother navigation through the items.

2.0

ada ply dining chair

3.0

NOT AVAILABLE ONLINE

$ 399.00 CAD

alexander dining chair IN STOCK ONLINE

$ 359.00 CAD

4.0 home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Item Page Notes

1.0 Item Name Placeholder This is a placeholder for the current item name.

2.0 Back and Forward Arrows Clicking on these arrows will cycle the user through back and forth the items on the current sub-category.

3.0 Miniature Image Placeholder Carrier

chairs

4.0 Image

2.0

home > furniture > chairs



1.0

This are images placeholder for other items images. Clicking on this images will take users to Image detail, as seen on Pg.8. Future such instances will be similar in functionality.

12:00 PM

ada ply dining chair

 3.0

This is a image placeholder for the item. Clicking on this image will take users to Image detail, as seen on Pg.8. Future such instances will be similar in functionality.

5.0 Add to Cart Button 4.0

5.0

6.0 +

CAD $399.00 NOT AVAILABLE ONLINE

Clicking on this button will add the current item to the user’s cart, as seen on Pg.11. If the current item is not available online, this icon should be greyed as show on this wireframe. Future such instances will be similar in functionality.

6.0 Color Selector

7.0

Clicking on these buttons will select the desired color for the current item.

19.5 x 21 x 28.5 (W x D x H")

8.0

7.0 Add to Wishlist Button

Slow down. Curves ahead. Some chairs are so inviting you just have to sit on them. Case in point? Our Ada Ply Dining Chair. Inspired by the much-celebrated Eames DCW

9.0

Clicking on this button will add the current item to the user’s wishlist, as seen on Pg.14. Future such instances will be similar in functionality.

8.0 Price Placeholder home

gift ideas

This is a placeholder for the price. The price displayed should be written with the currency selected on the Settings section, as seen on Pg. 16. Future such instances will be similar in functionality.

9.0 Description Placeholder This is a placeholder for the item description. This is a scrollable area.

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Image detail Page Notes

1.0 Top Arrow Clicking on this arrow will take the user back to the item page.

2.0 Image This placeholder is the image detail for the item. Flicking on the image will scroll to the next.

3.0 Image Navigation Carrier

This show the current image being showed. clicking on one of the dots will take the user to the respective image.

12:00 PM

chairs

ď&#x20AC;´

home > furniture > chairs

ada ply dining chair

1.0

2.0

3.0

home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Search Page Notes

1.0 Cancel Button This small menu works as a quick link to the User Account, Home and Cart sections, as seen on Pg.15. Pg. 4 and Pg.11. Future such instances will be similar in functionality.

2.0 Search Field

1.0

Carrier Cancel

4.0

12:00 PM

This is a search field. The default copy for the field should be “What could we help you find?”. Carrier Search

Search Nood

3.0 Defaut Keyboard

“<Search Entry>”

Default Keyboard.

4.0 Back to Search Button

eiffel dining chair

What could we help you find?

12:00 PM

Clicking on these buttons will take users back to the search section.

IN STOCK ONLINE

2.0

$ 129.00 $51.50 CAD

ella ply dining chair NOT AVAILABLE ONLINE

$ 359.00 CAD

wire easy IN STOCK ONLINE

$ 199.00 CAD

3.0

home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Gift Ideas Page Notes

1.0 Gift Ideas Categories Buttons These are images placeholder for the gift ideas categories. Clicking on these images will take users to the following sections, as seen on Pg.6.

Carrier

12:00 PM

gift ideas

for those undecided

LOREM IPSUM DOLOR SIT AMET COLORES

awesome toy

1.0

 for her  for him  for kids  housewarming  view all

home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Cart Page Notes

1.0 Back Button Clicking on this will take the user to the previously viewed section. Future such instances will be similar in functionality.

2.0 Check Out Button This link will take the user to the Check out page on Nood website. An alert should appear saying that the user will leave the app.

1.0

Carrier

3.0 Remove from Cart Button

12:00 PM

Back

Check Out

My Cart

IN STOCK ONLINE

diy stool $ 79.00 $19.50 CAD

3.0

2.0

Clicking on this button will subtract one from the total amount of the current item in the cart. Future such instances will be similar in functionality.

4.0 Remove All from Cart Button

4.0 x2

Clicking on this button will remove all of the current item from the cart. Future such instances will be similar in functionality.

5.0 Image Placeholder

5.0

wire easy IN STOCK ONLINE

6.0

$ 199.00 CAD

5.1

7.0

Cart Subtotal $238.50 CAD

x1 shipping fee total $50.00 CAD

5.1 Color Placeholder This is a placeholder for the selected color of the current item.

8.0 6.0 Item Quantity Placeholder

after taxes $322.56 CAD 9.0

This is a placeholder for the item quantity text. Future such instances will be similar in functionality.

Please note that for large or heavy items, a delivery surcharge will be added in addition to our regular shipping fee.

home

This is a placeholder for the item image. Clicking on these images will take users to the selected item page, as seen on Pg.7. Future such instances will be similar in functionality. Flicking on this area will scroll through the items.

gift ideas

7.0 Subtotal Placeholder This is a placeholder for the subtotal price. The price displayed should be written with the currency selected on the Settings section, as seen on Pg. 16. Future such instances will be similar in functionality.

8.0 Shipping Fee Placeholder This is a placeholder for the shipping fee. The price displayed should be written with the currency selected on the Settings section, as seen on Pg. 16. Future such instances will be similar in functionality.

9.0 Total Placeholder This is a placeholder for the total price. The price displayed should be written with the currency selected on the Settings section, as seen on Pg. 16.

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

More Page Notes

1.0 Sections Buttons These buttons are images placeholders with more sections names written on it. Clicking on these buttons will take users to the respective categories sections, as seen on Pgs. 13-16.

Carrier

12:00 PM

Back

1.0

More...

store locations

wishlist

user account

settings

home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Stores Page Notes

1.0 Image Slideshow This image placeholder will feature an animated slideshow of the current stores.

2.0 Store Description This placeholder will show the store address and work hours.

3.0 View Map Link Carrier

Carrier

12:00 PM

This link will take the user to the respective store address on googlemaps website. An alert should appear saying that the user will leave the app.

12:00 PM

stores



check them out!

nood downtown calgary

1.0

monday - saturday 10.00am - 6.00pm sunday & holidays 11.00am - 6.00pm after hours by appointment

2.0 820 11th Avenue S.W. calgary, ab T2R 0E5 P +1 403 233 9022

view map

3.0

 alberta

nood deerfoot meadows  british columbia

home

gift ideas

home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Wishlist Page Notes

1.0 Email Button Clicking on these buttons will take users to the Mail app to send the current wishlist by e-mail.

Carrier Back

12:00 PM

My Wishlist

IN STOCK ONLINE

diy stool

1.0

$ 79.00 $19.50 CAD

wire easy IN STOCK ONLINE

$ 199.00 CAD

home

gift ideas

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

User Account Page Notes

1.0 Name Fields These are fields for the user enter his first and last name.

2.0 Email Field This is a field for the user enter his email. The E-mail field should verify if the entered e-mail is a valid one by checking its structure.

3.0 Change Password Field Carrier Back

Carrier

12:00 PM

Back

Settings

This is a field for the user enter a new password. This field should hide the entered password.

12:00 PM

Settings

3.1 Confirm Password Change Field Account & Contact Information

1.0

Your Address Book

first name

6.0

my primary billing address

General Settings

last name

4.0 Phone Field

add shipping address

These are fields for the user enter his phone number.

2.0

e-mail

6.1

7.0

my primary shipping address

3.1

7.1

confirm your password change phone ok to email? *

5.0

3.0

5.0 Ok to Email Option This gives user the option to select if he desires or not to receives e-mails from Nood.

change your password (At least 5 characters long.)

This is a field for the user confirm the entered new password. This field should hide the entered password and verify if it matches the previously entered password on ft.3.0.

add shipping address

6.0 Primary Billing Address Field

Update Account

4.0

This is a field for the user enter his primary billing address.

8.0

6.1 Add billing Address Button Clicking on this button will add another billing address field.

YES

* (Can we contact you with product updates/information, etc.)

7.0 Shipping Address Field This is a field for the user enter his primary shipping address.

Your Address Book

7.1 Add Shipping Address Button Clicking on this button will add another shipping address field.

8.0 Update Account Button Clicking on this button will update the current user account.

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco

Settings Page Notes

1.0 Account Information Field These are fields for the user enter his account. The E-mail field should verify if the entered e-mail is a valid one by checking its structure. The password field should hide the entered password.

2.0 Sign Up Button This link will take the user to the Sign up page on Nood website. An alert should appear saying that the user will leave the app. Carrier

Carrier

12:00 PM

Back

12:00 PM

Back

Settings

Account Information

1.0

Password

E- mail Password

3.0 CAD

â&#x20AC;ş

General Settings Money Currency

CAD

â&#x20AC;ş

About

About Version

Display Settings Currency

Clicking on this field will pop the option of selecting the currency as Canadian Dollar or U.S. Dollar.

Account Information

E- mail

2.0

3.0 Currency Field

Settings

1.0.0

Version

Canadian Dollar

1.0.0

U. S. Dollar

not indicative of final design or nomenclature

NOOD DESIGN APP Document: Wireframes Last Edited: 3/28/2011

Author: Luis Francisco