Date post: | 23-Mar-2016 |
Category: |
Documents |
Upload: | luis-francisco-baroni-coutinho |
View: | 219 times |
Download: | 0 times |
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Home
Page Notes
not indicative of final design or nomenclature
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Category
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM
furniturehome > furniture
LOREM IPSUM
DOLOR SIT AMET
COLORES
awesome sofa
bedroom
chairs
contemporary
couches
danish modern
home search moregift ideas
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
instances will be similar in functionality.
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Sub Category
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM
chairshome > furniture > chairs
SORT BY:
home search moregift ideas
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Item
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM
chairshome > furniture > chairs
ada ply dining chair
home search moregift ideas
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
instances will be similar in functionality.
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
will be similar in functionality.
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Image detail
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM
chairshome > furniture > chairs
ada ply dining chair
2.0
3.0
home search moregift ideas
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Search
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM Carrier 12:00 PM
Search NoodCancel
What could we help you find? ×
2.0
home search moregift ideas
“<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
instances will be similar in functionality.
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Gift Ideas
Page Notes
not indicative of final design or nomenclature
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
home search moregift ideas
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Cart
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM
home search moregift ideas
My Cart Check OutBack
wire easy IN STOCK ONLINE
$ 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
will be similar in functionality.
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
More
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM
home search moregift ideas
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Stores
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM Carrier 12:00 PM
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Wishlist
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM
My Wishlist EmailBack
wire easy IN STOCK ONLINE
$ 199.00 CAD
diy stool IN STOCK ONLINE
$ 79.00 $19.50 CAD
1.0
home search moregift ideas
+
+
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
User Account
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM Carrier 12:00 PM
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.)
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
Document: Wireframes
Last Edited: 3/28/2011 Author: Luis Francisco
Settings
Page Notes
not indicative of final design or nomenclature
Carrier 12:00 PM Carrier 12:00 PM
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.