nood design iphone app

NOOD DESIGN APP

1

Document: Wireframes

Last Edited: 3/28/2011 Author: Luis Francisco

Title Page

NOOD DESIGNWIREFRAMES – iPhone App

VERSION 1.0

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.

March 28, 2011

NOOD DESIGN APP

2



About This Document

Table of Contents

Revision History

Version 1.0 (February 1, 2010)

- First draft based off of

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 “Revision History.”

About This Document 2

Loading Screen 3

Home 4

Category 5

Sub Category 6

Item 7

Image detail 8

Search 9

Gift Ideas 10

Cart 11

More 12

Stores 13

Wishlist 14

User Account 15

Settings 16

NOOD DESIGN APP

3



Loading Screen

Page Notes

not indicative of final design or nomenclature

Carrier 12:00 PM

1.0 Loading ScreenThis 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.

1.0

NOOD DESIGN APP

4



Home

Page Notes


Carrier 12:00 PM

Welcome back,

<User Name>

FurnitureKitchen &

Table

Bags &

Luggage

Clocks &

Accents

Bed &

Bath

Gadgets

& Toys

Clearence or Featured item

1.0

home search moregift ideas

4.0

3.0

1.0 Loading ScreenThis 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 LogoThis is a placeholder for the Nood logo/branding. Future such

instances will be similar in functionality.

3.0 Categories ButtonsThese 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.

4.0 Main ToolbarThis 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.

2.0

NOOD DESIGN APP

5



Category

Page Notes


Carrier 12:00 PM

furniturehome > furniture

LOREM IPSUM

DOLOR SIT AMET

COLORES

awesome sofa

bedroom

chairs

contemporary

couches

danish modern


4.0

1.0

2.0

1.0 Top MenuThis 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


2.0 Categories BreadcrumbsThis 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 PlaceholderThis 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.

4.0 Sub-Categories Buttons ImageThese 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.

4.1 Sub-Categories ButtonsClicking on these buttons will take users to the following sub-

categories sections, as seen on Pg.6. Future such instances will be

similar in functionality.4.1

3.0

NOOD DESIGN APP

6



Sub Category

Page Notes


Carrier 12:00 PM

chairshome > furniture > chairs

SORT BY:


4.0

3.0

top sellers1.0

newestnewest name price

ada ply dining chair NOT AVAILABLE ONLINE

$ 399.00 CAD

2.0

alexander dining chair IN STOCK ONLINE

$ 359.00 CAD

1.0 Items FilterThese are filters that sorts the results based on the user selected

choice. This filter must have a colored active state.

2.0 Item ImageThis 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.

3.0 Item DescriptionThese 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.

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

NOOD DESIGN APP

7



Item

Page Notes


Carrier 12:00 PM


ada ply dining chair


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

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

4.0

CAD $399.00

8.0

NOT AVAILABLE ONLINE

++

3.0

6.0

7.0

1.0

9.0

1.0 Item Name Placeholder

This is a placeholder for the current item name.

2.0 Back and Forward ArrowsClicking on these arrows will cycle the user through back and forth

the items on the current sub-category.

3.0 Miniature Image PlaceholderThis are images placeholder for other items images. Clicking on this

images will take users to Image detail, as seen on Pg.8. Future such


4.0 ImageThis 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 ButtonClicking 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


6.0 Color SelectorClicking on these buttons will select the desired color for the current

item.

7.0 Add to Wishlist ButtonClicking 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 PlaceholderThis 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 PlaceholderThis is a placeholder for the item description.

This is a scrollable area.

2.0

5.0

NOOD DESIGN APP

8



Image detail

Page Notes


Carrier 12:00 PM


ada ply dining chair

2.0

3.0


1.0

1.0 Top Arrow

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

2.0 ImageThis placeholder is the image detail for the item. Flicking on the

image will scroll to the next.

3.0 Image NavigationThis show the current image being showed. clicking on one of the

dots will take the user to the respective image.

NOOD DESIGN APP

9



Search

Page Notes


Carrier 12:00 PM Carrier 12:00 PM

Search NoodCancel

What could we help you find? ×

2.0


“<Search Entry>”Search

+ +

wire easy IN STOCK ONLINE

$ 199.00 CAD

ella ply dining chair NOT AVAILABLE ONLINE

$ 359.00 CAD

eiffel dining chair IN STOCK ONLINE

$ 129.00 $51.50 CAD

+ +

+ +

4.01.0

1.0 Cancel ButtonThis 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


2.0 Search FieldThis is a search field. The default copy for the field should be “What

could we help you find?”.

3.0 Defaut KeyboardDefault Keyboard.

4.0 Back to Search ButtonClicking on these buttons will take users back to the search section.

3.0

NOOD DESIGN APP

10



Gift Ideas

Page Notes


Carrier 12:00 PM

gift ideasfor those undecided

LOREM IPSUM

DOLOR SIT AMET

COLORES

awesome toy

for her

for him

for kids

housewarming

view all


1.0

1.0 Gift Ideas Categories ButtonsThese are images placeholder for the gift ideas categories. Clicking

on these images will take users to the following sections, as seen on

Pg.6.

NOOD DESIGN APP

11



Cart

Page Notes


Carrier 12:00 PM


My Cart Check OutBack


$ 199.00 CAD

diy stool IN STOCK ONLINE

$ 79.00 $19.50 CAD

-

-

shipping fee total$50.00 CAD

after taxes$322.56 CADPlease note that for large or heavy items, a delivery surcharge

will be added in addition to our regular shipping fee.

x2

x1

+

Cart Subtotal$238.50 CAD

7.0

9.0

8.0

3.0

2.0

5.0

5.1

1.0 Back ButtonClicking on this will take the user to the previously viewed section.

Future such instances will be similar in functionality.

2.0 Check Out ButtonThis 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.

3.0 Remove from Cart ButtonClicking 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 ButtonClicking on this button will remove all of the current item from the

cart. Future such instances will be similar in functionality.

5.0 Image PlaceholderThis 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.

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

6.0 Item Quantity PlaceholderThis is a placeholder for the item quantity text. Future such instances


7.0 Subtotal PlaceholderThis 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 PlaceholderThis 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.

+

+

4.0

6.0

1.0

+

NOOD DESIGN APP

12



More

Page Notes


Carrier 12:00 PM


More...Back

store locations wishlist

user account settings

1.0 Sections ButtonsThese 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.

1.0

NOOD DESIGN APP

13



Stores

Page Notes



alberta

british columbia

storescheck them out!

storescheck them out!

820 11th Avenue S.W.

calgary, ab T2R 0E5

P +1 403 233 9022

monday - saturday

10.00am - 6.00pm

sunday & holidays

11.00am - 6.00pm

after hours by

appointment

nood downtown calgary

nood deerfoot meadows

2.0

view map 3.0

home search moregift ideas home search moregift ideas

1.0 Image SlideshowThis image placeholder will feature an animated slideshow of the

current stores.

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

3.0 View Map LinkThis 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.

1.0

NOOD DESIGN APP

14



Wishlist

Page Notes


Carrier 12:00 PM

My Wishlist EmailBack


$ 199.00 CAD

diy stool IN STOCK ONLINE

$ 79.00 $19.50 CAD

1.0


+

+

1.0 Email ButtonClicking on these buttons will take users to the Mail app to send the

current wishlist by e-mail.

+

+

NOOD DESIGN APP

15



User Account

Page Notes



SettingsBackSettingsBack

Account & Contact Information

first name

last name

change your password

ok to email? * YES

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

confirm your password change

phone

(At least 5 characters long.)

e-mail

Your Address Book

Your Address Book

General Settingsmy primary billing address

add shipping address+

my primary shipping address

add shipping address+

Update Account

1.0

2.0

3.0

4.0

5.0

6.0

6.1

3.1

7.0

7.1

8.0

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

2.0 Email FieldThis 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 FieldThis is a field for the user enter a new password. This field should

hide the entered password.

3.1 Confirm Password Change FieldThis 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.

4.0 Phone FieldThese are fields for the user enter his phone number.

5.0 Ok to Email OptionThis gives user the option to select if he desires or not to receives

e-mails from Nood.

6.0 Primary Billing Address FieldThis is a field for the user enter his primary billing address.

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

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

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

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

NOOD DESIGN APP

16



Settings

Page Notes



SettingsBack

Account Information

E- mail

Password

Sign In

Display Settings

Currency CAD ›

Sign Up

About

Version 1.0.0

2.0

SettingsBack

Account Information

E- mail

Password

Sign In

General Settings

Money Currency CAD ›

Sign Up

About

Version 1.0.0

Canadian Dollar

U. S. Dollar

3.0

1.0

1.0 Account Information FieldThese 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 ButtonThis 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.

3.0 Currency FieldClicking on this field will pop the option of selecting the currency as

Canadian Dollar or U.S. Dollar.

nood design iphone app

Documents

nood design app3document

nood design app2document

nood design app4document

nood design app1document

nood design app5document

structure of design

interaction design elements

visual design parts