DIY Heaven architecture proposal

Initial Proposal REVISED Top-Down and Bottom-Up Architecture

IAKM 60112 | Jennifer Stuart Lesch 12.13.2013

IAKM 60112 / Jennifer Stuart Lesch 12.13.13

TOP-DOWN ARCHITECTURE

• Blueprint of top-level categories • Blueprints of two additional sample

categories • Wireframe of home page


Top-Down Architecture / Blueprint for Top-Level Categories

DIY HEAVEN HOME

Ask a Pro

Hire a Pro

For Pros Only

ACCOUNT Sign In/Register

CART

HELP

SEARCH

SOCIAL CONTACT US COMPANY INFO OUR POLICIES

GLOSSARY OF TERMS

Appliances

Bath

Building Materials

Decor

Doors & Windows

Electrical

Flooring

Heating/Cooling

Kitchen

Outdoors

Paint

Plumbing

Storage & Organization

Lighting

Tools & Hardware

Locate a Store

Find an Item In-Store

Pick-Up Service

Tool & Truck Rental

Local ad

Store events

Footer navigation

Top-level navigation

Utility navigation

SHOP DEPARTMENTS

PROJECT IDEAS & HOW-TO

CONNECT WITH A PRO

CONNECT WITH A STORE

NOTES

1. All items within the dotted lines are persistent throughout the site – see wireframe for layout.

2. Shop Departments and Project Ideas & How-To share the listing of departments

3. Footer has potential to be built out in future iterations; there will likely be overlap between some of the footer items and those higher in the layout

4. Items in the utility nav are actually separated in the layout; see wireframe for detail.

1

2

3

4

3

1

2

4

Top-level categories

Subcategories

Content groups

Relationship between pages

KEY


Top-Down Architecture / Blueprint for Doors & Windows

DOORS & WINDOWS

DOORS WINDOWS

TYPES OF WINDOWS

AWNINGS/SHUTTERS

WINDOW ACCESSORIES

WINDOW DECOR

TYPES OF DOORS

DOOR ACCESSORIES

NOTES

1. At this upper level, item types are listed first, then any further divisions are alphabetized. It would be ideal if this could be applied across as many categories as possible (e.g., in Storage and Organization, the immediate subcategories are Type of Storage first, then alphabetical by Bookshelf, Boxes, Hooks, Shelves).

1

Category subsection

Category division

Category page


KEY

1



DOORS & WINDOWS

DOORS

Cellar & Basement Doors

Front Doors

Patio Doors

Screen Doors

Security Doors

Garage Doors & Parts

Garage Door Openers and

Remotes

Garage Door Accessories

Interior/Closet Doors

Accordion Doors

Bi-Fold Doors

Café Doors

French Doors

Pocket Doors

SlabDoors

SlidingDoors

Entry Doors Garage Doors &

Accessories

Storm Doors

Door Mounted Pet Doors

Factory Installed Pet Doors

Patio Door Panel Pet Doors

Wall Mounted Pet Doors

Window Pet Doors

Types of Pet Doors

Pet Door Accessories

Pet Doors

Closet & Pocket Door Hardware

Deadbolts

Door Lock Accessories

Handles

Knobs

Levers

Door Accessories

Frames & Parts

Pre-Framed Screens

Retractable Door Screens

Rolled Door Screening

Door Flashing

Flashing Tools & Accessories

Window Flashing

Door/Window Flashing Door Locks & Accessories

Door Screens, Tools & Accessories

TYPES OF DOORS DOOR ACCESSORIES

Category subsection

Category division

Category page


KEY

1. Pet Doors was divided much like the larger Doors category, that is, Types of Doors and Door Accessories. Here the types have to do with where or how they are installed.

2. Garage Doors were kept as a separate category, even though they are a kind of Entry Door, since they have both a specialized set of accessories (openers, remotes) and are a common enough item to not want to ‘hide’ them as a type of Entry Door.

3. As screening is an element in both Doors and Windows, there will be some overlap in the category pages, but in this instance Door Screening appears under Door Accessories.

1

NOTES

1

2

3

2

3

Sets



Basement

Casement

Garden

Shaped

Screen

Security Bars

Window Wells & Accessories

Blinds & Shades

Drapes & Curtains

Scarves & Valances

Shutters

Exterior Shutters

Interior Shutters

Faux Wood Shutters

Wood Shutters

Board & Batten

Louvered

Quarter Rounds

Raised Panel

Shutter Locks & Decorative Hardware

Storm & Hurricane Shutters

Transom Tops

Exterior

Privacy Liners

Replacement Parts

Drapery Hardware

Holdbacks

Newels & Finials

Rings & Clips

Rods & Rod Sets

Flashing Tools & Accessories

Window and Skylight Flashing

DOORS & WINDOWS

WINDOWS

TYPES OF WINDOWS AWNINGS/SHUTTERS WINDOW TOOLS &

ACCESSORIES

Fixed

Tubular

Vented

Slider

Specialty

Skylights

Awnings

Awning Accessories

Retractable Awnings

Stationary Awnings

WINDOW DECOR

Roller

Roman

Temporary

Vertical

Skylight

Category subsection

Category division

Category page


KEY

1. Compared to the competitor’s IA, most of the work here was in combining categories rather than eliminating. Skylights become a Type of Window, and the specialized flashing moves to Accessories (and would appear as a Related result in a product search).

2. Security Bars, which were a separate subcategory initially, made more sense as an Accessory, since they are just the bars and not a type of already-barred window.

1

NOTES

2

1

2


Top-Down Architecture / Blueprint for Paint

PAINT

PAINT TYPES PAINT SUPPLIES/TOOLS PAINT COLOR SAMPLE

BOOKS

Category subsection

Category division

Category page


KEY

The competitor’s IA had a large number of subcategories under Paint, and getting down to the lower levels it became apparent why that was probably an easier choice; there is a lot of overlap and yet too much variation to narrow it down well. The information scent of these headings is hopefully clear enough to get users quickly to the correct path.

1

1

NOTES



Craft Tools & Accessories

Scrapbooking Supplies

Barn & Fence Paint

Exterior Paint & Trim

Exterior Wood Stain

Masonry & Stucco Paint

Paint Additives

Pool & Marine Paint

Track & Sport Paint

Waterproofing

Ceiling Paint

Tints & Additives

Wall Paint & Trim

Wood Stain & Finishes

Automotive & Marine

Concrete Primer

Drywall Primer

Metal Primer

Primer Sealer

Wood Primer

All Purpose Spray Paint

Appliance Spray Paint

Automotive Spray Paint

Decorative Spray Paint

Rust Preventative

Traffic & Field Marking Martha Stewart

Crafts

Mod Podge

Plasti-Dip Rubber Paint

Chalkboard, Whiteboard & Magnetic Paint

Metallic, Glitter & Glow in the

Dark Paint

Fabric Paint

Faux Finish Paint

Brand Name Craft Paint

Exterior Paint & Stain Interior Paint & Stain Concrete, Basement,

Garage Floor Primers Spray Paint

Craft Paint, Tools & Accessories

Appliance Paint Water Repellent/

Fabric Paint Paint Kits

PAINT

PAINT TYPES

Category subsection

Category division

Category page


KEY

1. These are obviously the ideal paths through the information, but the overlap is considerable and should be addressed by using good metadata “related” tools in the category and product pages. Decorative Spray Paint, for example, is made part of a Spray Paint Category, but might also show up as a Related option in a search for Craft items.

2. As an example of where contextual filtering could help with this large field, Spray Paint could be faceted by application (e.g., Household / Decorative / Industrial)

3. I debated a lot about what to do with the three brand-name categories; only Martha Stewart and Mod Podge are solidly “craft” items, the Plasti-Dip should also be related to Spray Paint, as most of it comes that way, and a category like Tools & Hardware, since they also make the liquid rubber to dip tool handles. But since it was also dependent on name recognition, it was added here.

1

2

3

1

2

3

NOTES



PAINT

PAINT SUPPLIES/TOOLS

Apparel/ Safety Painting Prep

Tools/Supplies Paint Application

Tools/Supplies Paint Removal Tools/Supplies

Patching/Repair Tools and Supplies

Rags & Drop Cloths

Tarps & Plastic Sheeting

Tape

Caulking/Sealants

Glue/Adhesives

Buckets/Pails

Mixers/Stirrers

Scrapers

Paint Thinner & Removers

Sanding Tools & Accessories

Paint Sprayers & Accessories

Hand Held Sprayers

Sprayer Accessories

Power Rollers

Brushes

Rollers & Roller Covers

Extension Poles

Foam

Trim & Edger Pads

Sponges

Frames, Liners & Trays

Category subsection

Category division

Category page


KEY

1. After trying to condense things down to Paint Tools, Paint Supplies and Paint Accessories, but unable to define the difference well, I divided it into buckets that might better follow a user’s mental model of preparation, application and removal, with two shallow categories as outliers.

There was a category that was eliminated of “Professional Painting Supplies,” which was really just multi-packs of the same items, so the decision was made to make that a filtering option (“Multi-Packs”) but not a category on its own.

1

1

NOTES Bristle



PAINT

PAINT COLOR SAMPLE BOOKS

Category subsection

Category division

Category page


KEY

NOTES

1. Although there were several spots with two-item sections in the original IA that have been condensed down, it was usually obvious at those lower levels where the items could appropriately be placed. When that was not the case at the higher levels, I was comfortable leaving those items on their own in the structure, rather than trying to graft them onto an inappropriate grouping. It makes for a less than perfectly balanced but still clear structure. It was also considered to put this heading in the Projects section and leave it as a contextual option that would appear in category or product pages, but thinking about the large amount of floor space paint samples occupy in the physical stores, and how often it might be a starting point for project planning, it remains part of the Paint category. Additionally, the sample-size jars that were previously part of a similar category will be part of the filtering at the product level, e.g., a user could go to Interior Paint and filter by Gallons or 8oz. Samples.

1

1


Top-Down Architecture / Wireframe for Home Page

1

2

2

4

5 Search

A-Z Glossary of Terms 3


Top-Down Architecture / Notes for Home Page

1. Shop Departments and Project Ideas/How-To are adjacent on the page and share the sub-menu of departments; depending on which one is selected, user then selects department. This satisfies both targeted shopping/info seeking behaviors and more casual browsing.

2. Some sub-items may be shared across top-level categories, e.g., the Help link at the top of the page and the Contact Us in the footer can both have e-mail links to the same place.

3. A Glossary of Terms is located adjacent to the Search box; this can either be a helpful first stop for someone who is unsure of the name of the item they need (e.g., “that bit that goes in the toilet tank”) or, as a persistent navigation item, users can access it at any point in their visit.

4. Once a Department is selected, a large flyout would contain the sub-categories and maybe the top two searched-for items in each of those (this is similar to how the current Home Depot site operates – see image at right).

5. Search box text is intended to default to a friendly prompt question but become predictive when someone starts typing

1

2

3

4

5


Top-Down Architecture / Reflection on Revisions

Overall I was comfortable with the first IA as workable, and there were only minor edits suggested by peer reviwers, and those are noted in the blueprints and explained below. Most of the revisions were in further consolidating or eliminating categories. I removed references to the “original IA” in the notes as it was correctly noted that it created confusion for the reader. The Home Depot IA used in the tree testing is in fact irrelevant here and so that was changed to simply IA or Competitor IA. One of the things I found most interesting was the question of balancing between trying to “innovate” and still thinking about what would be most accessible to users. Creativity in IA seems to be much more about good interactions, cross-referencing and tools than going crazy with a metaphor-based navigation scheme or odd layouts. On the Blueprints Removed shading differences in the key for the top-level categories – the blues and purples were to differentiate the different navigation groups, but it didn’t apply to the rest of the blueprints and was removed. One reviewer noted they thought the blueprint was a little deep in some places; I looked for opportunities to further combine or winnow down category headings. Two places where this is most evident is in the Types of Doors and Types of Windows – some categories could be made into filters (Prehung and Commercial, Double Hung and Single Hung) rather than be their own subcategories. In the Window Décor category, I realized that it could be made much simpler by eliminating those categories that had to do with the material, and make that a filter instead, thus the category went from 14 to 8 sections.

On the Wireframe Someone else found it confusion that I had some items ‘selected’ in the wireframe, so those were removed. Even though the wireframe was intended to be low-fidelity, one reviewer noticed the lack of an action button in the Search box, so that prompt was added. A reviewer made a good point about the search box being a little lost under the logo on the left side; while this might be alleviated in the visual design phase, I could see the sense of putting a search box closer to its typical location on the right side, and switched the position of the glossary and search box. The search is now most prominent, with the A-Z Glossary being simply a link underneath. While I’m happy with the notion of a user selecting which of the main actions they want to take (Shop Departments v Project Ideas), I’d like to test this as an interactive wireframe to see how it might be used. I think the Shop Departments would be the default action, but maybe it would be helpful to have a little piece of explanatory text above those two buttons (e.g., “What do you want to do? Shop or get Project Ideas?”).


BOTTOM-UP ARCHITECTURE

• Wireframe for a Search page • Wireframe for a Category page • Wireframe for a Product page


Bottom-Up Architecture / Wireframe for Search Results Page

LIST GRID SORT BY SHOW ITEMS Price / High to Low 24

RELATED CATEGORIES • Building Materials • Outdoor • Tools & Hardware RELATED PROJECTS Rover Home Fido Paradise

SORT RESULTS Price Range to FIND Ratings 1 star + (320) 2 stars + (204) 3 stars + (18) 4 stars + (129) Energy-Star Compliant Yes No Size of Pet lbs. Location Online-only (210) Available in stores (112)

$10 $500 Item Name

Price

Compare Item

Item Name

Price

Compare Item

Item Name

Price

Compare Item

Item Name

Price

Compare Item

Item Name

Price

Compare Item

Item Name

Price

Compare Item

1

2

3

4

5

Search

A-Z Glossary of Terms


Top-Down Architecture / Notes for Search Results Page

1. The Search results page is probably the most information-intensive, with the widest range of sorting options and contextual filtering choices. In this example, Pet Doors have a contextual filtering option of whether they are Energy-Star Compliant, as well as a way to specify the weight of the pet the door is for - this would reference a field in the metadata of the item description.

2. Search results would not only reference Related Categories of items, but Related Projects with small images.

3. A range of typical viewing options runs across the top of the results area, to view the results as a list or grid, sort them several different ways (see example at right), etc.

4. The grid displays item images with some of the most important information closest to it; Name, Price, Rating, and an option to check a box to compare it to other items within the results set.

5. Breadcrumbs are determined by an item type’s location in the architecture, not the path the user took to get there (this was a very confusing element of Home Depot’s site – see example at right).

1

2

3

4

5

This was a search done from the Home page; the resulting breadcrumbs give no solid clue as to where in the hierarchy the user has landed.


Bottom-Up Architecture / Wireframe for Category Page

PAINT TYPES PAINT SUPPLIES & TOOLS

PAINT COLORS & SAMPLES PAINT PROJECTS

EXTERIOR WATER

REPELLENT CONCRETE PRIMERS BRUSHES POWER ROLLERS CAULKING SANDERS

BLUES SAMPLE BOOKS REDS GREENS

SAND IT RIGHT

BARN BEAUTY

PAINTED FENCE

PATIO FURNITURE MAKEOVER

RELATED DEPARTMENTS • Décor • Outdoor PAINT TYPES Exterior Paint & Stain Interior Paint & Stain Concrete, Basement & Garage Floor Primers Spray Paint + See all PAINT SUPPLIES & TOOLS Apparel/Safety Painting Prep Tools/Supplies Paint Application Tools/Supplies + See all

1

2

3

4

> See all > See all

> See all > See all

Search



Top-Down Architecture / Notes for Category Page

1. In this case, the Category has three divisions, with the fourth being occupied with a Projects area; this will obviously change depending on the number of divisions within a department, but the grid will remain a two-across. Where more area titles are needed, those might be Special Offers or other promotional items.

2. The subsections highlighted in these areas would be contextual depending on a user's recent site activity (if logged in) or most popular searches, thus in warm weather this example shows Exterior Paint and other appropriate areas.

3. Related Departments appears on the left in this layout, since there is still a wide range of potential objects to a user search at this point.

4. The full list of sections and subsections appears as a list, in this location the regular alphabetized list. It would possibly just have the first few items with a "see all" link below to conserve space.

1

2

3

4


Bottom-Up Architecture / Wireframe for Product Page

RELATED SEARCHES • Cat Flaps • Pet Projects RELATED DEPARTMENTS • Décor • Outdoor RELATED PROJECTS • Rover Home • Fido Paradise Project Lists SPECIAL OFFERS • Financing • Shipping ASK A PRO • Installation Services • DIY Advice

REXMATIC 24” Dog Door $PRICE Available o In Store o Online

Add to cart >

Product overview | Reviews Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget dignissim eros, at ullamcorper nulla. Proin semper mauris vitae odio placerat, at malesuada erat fermentum. Quisque eget velit magna. Praesent eu ipsum diam. Aliquam id ante dapibus • Vulputate felis lacinia • Gravida orci • Duis aliquet augue vestibulum

x

1

2

3

4

> Wish list

> Save for later

> Pick up in store

Search



Top-Down Architecture / Notes for Product Page

1. The main Product area summarizes many of the options that would have been selected in the filtering options such as price, rating, availability, etc.

2. For Product pages the layout has just the right rail , containing all the Related options (Searches, Departments, Projects, Special Offers)

1. Contextual Project Lists could provide links to all

needed tools, hardware or supplies typically associated with installing the product Another contextual option could be to link to the Pro services for Installation or the Ask a Pro (virtual assistance, live chat, etc.)

2. Another option for combining pro and ‘amateur’ interactions might be in the Reviews. Registered Pro users might have an icon to denote their status appearing with their reviews (image at right). There might also be an option to sort by type of reviewer (though it raises the question of what to call the non-Pro reviewers – I used the term Consumer, but it would be an item to test with alternatives – Amateur? Non-Pro?)

1

2

3

4

Product overview | Reviews MR. CONTRACTOR Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget dignissim eros, at ullamcorper nulla. Proin semper mauris vitae odio placerat, at malesuada erat fermentum PLAIN PUBLIC USER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget dignissim eros, at ullamcorper nulla. Proin semper mauris vitae odio placerat

Product overview | Reviews (See all Pro / See all Consumer) MR. CONTRACTOR Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget dignissim eros, at ullamcorper nulla. PRO GUY Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget dignissim eros, at ullamcorper nulla. Proin semper mauris vitae odio placerat, at malesuada erat fermentum

OR


Bottom-Up Architecture / Reflection on Revisions

Overall It was noted that having several items ‘selected’ in the wireframe was distracting, so the shadings were removed from any item not directly involved in the concept being presented. On the Category page Peer critiques and reviewing others’ deliverables led to the addition of two small items to the Category page - a 'see all' link in the four feature areas to prompt viewers that there is more to be found, and calling out the +See all link at the bottom of each subcategory in the left rail. On the Search Results page Other peer deliverables contained a feature I had left off my layouts, that was a number of results for each of the sorting options, so users could see, for example, how many results had four-star ratings or were available in-store. I added this to the layout. Breadcrumbs - my wireframe had the breadcrumbs always display location relative to a user's location in the hierarchy, but one reviewer thought that would be a barrier when someone did a direct search and might be unable to step back. I maintain that the browser back button would be more useful for that operation. Particularly since so many times people 'parachute' into a site via a means other than direct search, it is more helpful to show them where they’ve landed in the context of the entire site. The layout also provides contextual links to show related departments where a user might find helpful information.

On the Product page One reviewer felt my product page wireframe was too different from the category page, in that the left rail disappeared to give more real estate to the product. His concern was that the difference in granularity could be jarring for some viewers. I considered adding a left rail back into the layout, but could not see that there were many more useful tools to be added there. I reviewed some competitor and other e-commerce sites, and found it is common practice to lose the left rail at the product page level; from my point of view it not only helps focus attention but allows more information to be displayed ‘above the fold.’ The layout was left with the right rail only. My earlier wireframe had just an Add to Cart button, with an indicator that it could expand; I thought I could tuck other cart-related options all in one place (Wish List, Save for Later, Pick Up in Store). Upon further consideration and from peer critique, I decided it was too obscure and instead broke out all the links onto the page, with the Add to Cart being the only button, and the rest of the options as plain text links underneath. I still think it would be an interesting option to test, and visual design could probably help the interaction, but for this stage it was a little too precious.

Design

DIY Heaven architecture proposal