Whether your site is five pages or 500, it needs a strong foundation that plans for growth. We’ll cover site maps, content strategy, user interaction and user experience so you have a plan for your site now, and down the road. We’ll also touch on best practices for doing it all over again for mobile.

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/

21. 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

22. 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

24. https://thedesignteam.io/

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

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

33. 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

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

37. https://thedesignteam.io/

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

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