1.
HOUSE WITH NO WALLS:
CREATING A SITE STRUCTURE FOR TOMORROW
Lisa Ghisolf * Gizmo Creative Factory * Chicago
@gizmodesign * gizmo-design.com

2.
WHAT YOU THINK YOU HAVE

3.
WHAT IT MAY REALLY BE

4.
WHY?
➤ After reaching a company's website via a
referral site, 50% of visitors will use the
navigation menu to orient themselves.
(Source: KoMarketing)
➤ 83% say a seamless user experience
across devices is somewhat or very
important. (Source: Salesforce)
➤ 48% of users say they feel frustrated
and annoyed when on sites that are
poorly optimized for mobile. (Source:
Newstar Localize and 15miles)
➤ 52% of users said a bad mobile
experience made them less likely to
engage with a company. (Source:
Animoto Online & Mobile Video Study)

5.
IT’S THE “UN-FUN” STUFF
➤We are long past “brochureware” sites
[sort of]
➤Content strategy: More than just what
you’ll say
➤Navigation: It’s strategic – play
with it
➤Sitemaps: Pages needed, pathways
➤Functionality: Phased functionality
aligned with business objectives
➤Wireframes: What lives on each page
➤Prototypes: Functional model/test site
➤Testing: Confirm/debunk suspicions

6.
BASICALLY...
➤Who (personas/
your audiences)
➤Demographic +
needs + behavior
➤Why (your goals, their
goals)
➤How (click this,
get that)

7.
https://thedesignteam.io/

8.
BUT… WHY?
➤Test processes
(e-commerce),
the “user journey”
➤Test content
➤Bring clients in quickly
➤Iterate quickly
➤User experience starts
early in the process
➤“Design in the browser”

9.
CONTENT STRATEGY
➤User, user, user! Who are
your audiences? Think
about what they —
not you — are expecting
to see.
➤Look at your content:
how ME-centric is it?
➤Good content is: up-to-
date, user-centric, useful,
findable.

10.
SITEMAP TO WIREFRAME
➤Visualize your
structure & how users
will react: Flowchart
it out!
➤What is the process?
What is interlinked?
Link juice
➤Consistency is key

11.
https://thedesignteam.io/

12.
https://thedesignteam.io/

13.
https://thedesignteam.io/

14.
Designer pages:
-Kiton
-Stefano Ricci
-Pal Zileri
-Brunello Cucinelli
-Hugo Boss
-Zilli
-John Lobb
-Zanella
-Brioni
-Jack Victor
-Luciano Barbera
-Dolce Punta
-Babylone
-Angela Caputi
-Il Bisonte
-Alfred Dunhill
-Edward Green
-Inis Meain
Caruso
MORRIS
Privacy Policy Terms & Conditions Search Site map
Home
Designer
index
Designers A- Z
Designers by category
New this season
My designers
What's
new
Shop
all
Clothing
Denim
Outerwear
Leather
Pants
Shorts
Suiting
Sport coats
Shoes Bags Luggage Accessories
Belts
Gloves
Keychains
Sunglasses
Cufflinks
Umbrellas
Wallets
Hats
Scarves/ wraps
Jewelry
Men's Women's About Blog/
travel
diary
Customer
Service
Order status
Shipping
FAQs
Press/
media
My
Account
My
Wishlist
My
Cart
History
Contact
Events
Philosophy
Version 1.3 - JUNE 20, 2011
Globals [on every page]
Blog
Calendar
Regular pages
Dynamically created pages
KEY

15.
logo
what's new/new this season
privacy policy terms & conditions site map customer service contact us home
designers shop all clothing shoes bags luggage accessories men's women's about media travel diary home
latest travel blog post
My Account Register an Account My CartSearch
sign up for our e-newsletter
cabinet w/clothing linking out/rotating imgs

16.
https://thedesignteam.io/

17.
SITEMAP & WIREFRAME TOOLS
➤Sitemaps
➤Powermapper.com
➤Slickplan.com
➤Wireframes
➤Gomockingbird.com
➤Balsamiq.com
➤Both
➤UXpin.com
➤Jumpchart.com [w/WP export!]
➤gliffy.com

18.
PROTOTYPING TOOLS
➤Sketch
(bohemiancoding.com/
sketch/)
➤Genesis Sandbox starter
theme (genesissandbox.com)
➤Foundation
(fwp.drewsymo.com)
➤hotgloo.com
➤marvelapp.com using
wireframes

19.
DON’T IGNORE MOBILE
➤What works on a laptop or even a
tablet doesn’t necessarily work on
a phone
➤K.I.S.S.!
➤One-column themes
➤People are used to scrolling on
mobile, but how much will they
read?
➤Are the buttons big enough to
touch?
➤As with ANY site: Make it easy on
the user

20.
MOBILE TOOLS
➤marvelapp.com
(desktop &
mobile)
➤Proto.io
➤fluidui.com
➤flinto.com

21.
https://thedesignteam.io/

22.
TESTING
➤ crazyegg.com
➤ usertesting.com
➤ uxtesting.io
➤ usabilityhub.com/five-
second-test
➤ trymyui.com

23.
THANK YOU!
Lisa Ghisolf
Gizmo Creative Factory * Chicago
Twitter @gizmodesign
Web gizmo-design.com
slideshare.com/gizmodesign
Cartoon images by thedesignteam.io/