1  

Cores  and  Paths:  Designing  from  the  Inside  Out  

Imagine  you’re  on  one  side  a  grass  lawn  and  you  want  to  reach  the  bus  stop  on  the  opposite  side.  Do  

you  walk  on  the  sidewalk  around  the  edges  or  cross  in  the  middle?  Assuming  the  grass  is  dry  and  it’s  not  prohibited,  you’d  probably  take  the  shortest  path  and  walk  across  the  lawn  to  the  bus  stop.  If  others  have  done  so  before,  you  may  see  a  beaten  path  that  you  could  follow.    

Such  unplanned  paths  connect  the  shortest  distance  between  two  points,  and  we  can  find  them  

everywhere  in  our  surroundings.  In  urban  planning  they  are  known  as  “desire  paths”  or  “desire  lines.”  (http://en.wikipedia.org/wiki/Desire_path)  They  are  an  indication  of  the  gap  between  natural  human  behavior  and  contrived  routes.    

Architect  Christopher  Alexander  recognizes  desire  lines  in  his  renowned  book  A  Pattern  Language  

(1976).  He  gives  specific  instructions  for  leveraging  them  in  architecture:  

To  lay  out  paths,  first  place  goals  at  natural  points  of  interest.  Then  connect  the  goals  to  one  another  to  form  the  paths.  

In  principle,  Alexander's  approach  is  to  begin  with  the  goals—the  things  people  ultimately  want—and  then  link  them  together  in  the  most  useful  way.    

Typically  in  web  design,  the  opposite  approach  is  usually  the  rule:  designers  begin  with  the  

homepage.  They  then  work  out  a  navigation  scheme,  which  pages  at  the  bottom  automatically  inherit  whether  it's  appropriate  or  not.  And  the  goal—or  the  primary  content  people  are  looking  for—turns  out  to  be  the  last  thing  that  gets  attention  in  the  design  process.  

Inspired  by  "desire  lines,"  we  can  reverse  this  tendency  in  Web  design.  "Cores  and  Paths"  is  a  specific  

technique  to  guide  you  through  this  process.  The  result  is  a  straight  path  to  the  core  offering  on  your  site.      

The  Cores  and  Paths  Model  "Start  with  the  goal"  is  the  clear  recommendation  of  the  Norwegian  information  architect  Are  Halland  in  his  presentation  “Cores  and  Paths:  Designing  for  Findability“  (http://slidesha.re/dnwrLX;  IA  

Summit,  2007).  Here,  he  outlines  an  alternative  approach  for  web  design:  instead  of  beginning  with  the  homepage  and  overall  navigation  scheme,  start  with  the  core  content  and  work  outward  from  there.  It's  that  straightforward  and  simple  

The  technique  is  based  three  key  elements:  

1. The  Core:  The  core  is  the  reason  users  come  to  site.  From  the  provider's  perspective,  the  core  is  

what's  offered  on  the  site.  Note  that  the  core  isn't  always  a  page.  For  YouTube,  the  core  is  a  video  and  not  a  page  on  www.youtube.com.  This  makes  it  possible  to  have  distributable  cores,  or  content  that  may  be  found  on  other  websites.    

The  core  may  be  accompanied  by  supporting  information.  Technical  details,  for  instance,  can  be  considered  an  extension  of  the  core.  On  sites  like  flickr  a  description  of  a  photo  as  well  as  the  tags  user  give  it  are  supporting  information  for  the  core,  which  is  the  photo  itself.    

 

  2  

2. Inward  Paths:  How  do  users  get  to  the  core?  Sometimes  visitors  arrive  at  the  core  via  the  main  

navigation  or  search  of  site.  But  they  might  also  come  directly  from  Google.  Other  paths  are  possible  as  well,  such  as  links  from  other  sites,  teasers,  entering  URLs  directly  in  the  browser,  and  even  via  RSS  feeds  and  newsletters.  Thinking  about  inwards  paths  also  considers  aspects  of  SEO,  

such  as  what  the  trigger  words  are  that  people  are  searching  on.        

3. Outward  Paths:  Assuming  users  found  what  they  were  looking  for,  what  can  they  do  from  there?  

What  are  their  calls  to  action?  Fundamentally  every  subsequent  interaction  should  bring  some  kind  of  value  to  the  business.  This  is  where  conversion  takes  place.  Outward  paths  can  be  everything  from  placing  an  item  in  a  "shopping  cart"  to  recommending  a  product  to  a  friend.  As  

with  inward  paths,  there  are  a  variety  of  options  to  consider,  including  links  that  lead  away  from  the  site.    

 

Each  of  these  three  elements  has  a  different  function.  The  core  is  really  where  value  creation  for  both  users  and  the  business  takes  place.  Persuasion  plays  a  big  role  here:  organizations  ultimately  want  users  to  take  some  specific  action.  The  inward  paths  ensure  findability.  This  is  how  people  come  

to  the  products  and  services  they  are  looking  for  on  the  web.  From  a  business  standpoint,  the  outward  paths  are  what  bring  ROI  to  an  organization.    

Below  is  an  illustration  of  the  Cores  and  Paths  model,  using  Amazon  as  an  example  (Figure  1).  The  core  is  a  product,  represented  here  by  an  image  of  a  book  cover  and  its  key  details,  indicated  in  the  red  box.  Users  find  that  book  in  numerous  ways,  listed  on  the  left.  These  are  the  inward  paths.  

Amazon  sees  a  return  on  investment  when  users  take  action  on  the  core,  seen  on  the  right  as  possible  outward  paths.    

 Figure  1:  The  Cores  and  Paths  model  for  www.amazon.com  

The  Cores  and  Paths  Process  The  following  section  shows  how  the  Cores  and  Paths  method  can  be  used  in  a  practical  situation  based  on  a  hypothetical  example.  Imagine  the  following  scenario:  

You  work  for  a  small  agency  and  have  been  contracted  by  a  bicycle  shop  to  improve  their  website.  The  shop  currently  only  has  a  "brochure-­‐like"  website  with  address  and  opening  

  3  

times.  They'd  now  like  to  get  into  ecommerce  and  be  able  to  sell  online.  The  product  line  

consists  of  high-­‐end  racing  bikes  and  mountain  bikes,  along  with  the  appropriate  accessories  for  each.  There  are  about  1000  products  in  total  they  want  to  sell  online.  The  shop's  main  target  groups  are  professional  cyclists  and  highly  motivated  amateurs.  As  a  result,  the  bikes  

sold  are  primarily  from  premium  brands.  The  design  of  the  website  should  highlight  the  high  quality  of  their  products.    

Following  the  Cores  and  Paths  approach,  here's  how  to  design  the  website  from  the  inside  out:  

STEP  1:  Define  the  core  What  is  the  core  offering?  First,  make  a  list  of  possible  candidates:  bicycles,  accessories,  services,  etc.  

It  starts  with  brainstorming  so  there  are  no  right  or  wrong  answers  initially.  After  compiling  a  complete  list,  decide  on  a  core  and  its  supporting  information.  In  large  teams  this  means  getting  agreement  from  team  members  and  stakeholders  alike.    

In  the  above  scenario,  the  core  is  the  product—a  bike.  A  photo  of  the  product  is  a  central  element  to  

represent  the  core.  The  bike  features,  brand  and  product  line  are  all  types  of  information  that  belong  to  core  in  this  case.  Supporting  information  includes  the  price  and  additional  technical  details.      

After  deciding  on  and  prioritizing  these  details,  sketch  the  core  (Figure  2).  Don't  sketch  the  entire  page  with  navigation  and  a  logo:  just  focus  on  the  core.  Customers  may  want  view  details  of  the  

product  up  close,  so  consider  how  they  will  interact  with  the  images  even  at  this  stage.  Think  about  the  experience  visitors  will  have  with  the  core  once  they  find  it.      

 Figure  2:  Sketch  of  the  core  and  supporting  information  

Keep  in  mind  that  users  will  also  be  visiting  the  site  from  smartphones  and  tablets.  And  they  may  also  

post  an  image  to  facebook  or  Pinterest.  This  is  an  example  of  a  "distributable  core."  So  also  sketch  how  the  core  might  transpose  to  these  different  contexts  (Figure  3).  Again,  do  this  without  sketching  the  page  chrome  or  navigation—just  focus  on  the  core.    

  4  

 Figure  3:  Versions  of  the  core  in  different  possible  contexts.    

From  this  you'll  see  how  the  core  and  supporting  information  behave  in  different  situations.  You  may  have  to  go  back  and  forth  between  the  versions  updating  them  iteratively.    

 STEP  2:  List  all  possible  inward  paths.    

What  are  all  the  ways  that  users  can  reach  your  core?  Obvious  things  come  to  mind  at  first:  site  search,  the  main  navigation,  Google,  and  links  from  other  websites.  But  more  paths  come  into  play  as  

you  brainstorm:  links  from  comparison  shopping  sites  and  even  references  from  offline  media,  such  as  a  printed  catalog.    

For  each  inward  path  in  your  list,  also  write  down  all  of  the  design  requirements  that  must  be  met.  For  instance,  SEO  and  landing  page  optimization  is  necessary  for  visitors  coming  from  Google  and  other  search  engines.  (See  Figure  4)      

 Figure  4:  A  list  of  possible  inward  paths  and  the  key  requirements  for  each  

STEP  3:  List  all  possible  outward  paths.    Determine  the  paths  away  from  the  core.  As  in  STEP  2,  also  include  requirements  for  each  item  in  the  list.  This  helps  to  rank  the  outward  paths  in  terms  of  importance  to  the  business,  providing  clarity  for  

  5  

the  design  in  later  on.  (See  Figure  5).  A  clear  call  to  action  button  brings  the  user  to  the  checkout  process  in  this  example.  And  if  the  customer  can't  decide  right  away,  a  link  to  a  wish  list  or  to  recommend  the  product  to  others  is  a  second  priority.      

 Figure  5:  List  of  outward  paths  with  prioritizations  

Up  to  this  point,  we've  neither  looked  at  the  homepage  nor  have  we  thought  about  the  navigation.  Yet,  we've  addressed  important  design  decisions,  such  what  a  mobile  version  of  the  core  product  might  look  like  and  how  people  will  interact  with  the  primary  content  of  the  site.  After  making  these  into  higher-­‐fidelity  mock-­‐ups,  these  initial  representations  could  even  be  tested  with  users.    STEP  4:  Put  it  all  together.  Only  after  you've  designed  the  core  and  listed  the  inward  and  outward  paths  should  you  start  looking  at  the  homepage  and  at  the  navigation.  The  goal  at  this  point  is  to  bring  the  user  in  the  simplest,  

most-­‐direct  way  possible  to  the  core.    

Design  the  homepage  of  the  site,  as  well  as  gallery  pages  and  search  results.  Sketch  several  alternatives.  While  doing  this,  keep  the  elements  of  Cores  and  Paths  in  mind:  what  is  the  core,  how  do  users  get  to  it,  and  how  will  the  business  see  conversion?  

 

  6  

Figure  6:  Sketch  of  the  homepage  –  a  first  draft  

In  this  scenario,  to  get  users  from  the  homepage  to  the  core  the  three  product  lines  of  the  shop  

appear  in  the  main  navigation:  "racing  bikes,"  "mountain  bikes"  and  "accessories."  Since  brand  is  also  important  to  the  target  groups,  a  separate  point  for  "brand"  is  also  included.  A  prominent  link  to  a  shopping  cart  and  checkout  process  is  also  located  in  the  header.    

 Figure  7:  Sketch  of  the  gallery  page  with  filters  and  sorting  options  

Below  is  a  helpful  template  to  use  to  capture  all  of  the  points  and  steps  described  in  this  article  (Figure  8).  Try  Cores  and  Paths  out  yourself!  

 Figure  8:  A  template  for  Cores  and  Paths  

Summary  The  Cores  and  Paths  process  is  important  for  several  reasons:  

1. Identification  of  gaps.  Upfront  questioning  of  the  purpose  of  the  primary  content  of  helps  

  7  

uncover  gaps  in  the  initial  briefing.  

2. Prioritization  of  elements.  Breaking  down  key  elements  in  this  way  gives  a  clear  prioritization  to  the  overall  design.    

3. Design  focus.  The  approach  gives  a  clear  direction  to  follow  for  the  whole  project  team.  

The  difference  between  Cores  and  Paths  and  other  approaches  may  seem  subtle  at  first.  But  the  

impact  is  great:  now,  the  core  offering  stands  firmly  in  the  middle  of  your  design.  All  other  elements  in  the  site  design  then  serve  the  purpose  of  bringing  both  users  and  the  business  to  their  goal.      

 

 

James  Kalbach  is  the  author  of  the  O'Reilly  book  "Designing  Web  

Navigation"  (2007),  which  has  been  translated  into  six  languages  other  than  English.  He  regularly  gives  presentations  and  holds  workshops  at  international  conference  on  information  architecture  and  navigation  

design.  James  is  currently  Principal  UX  Strategist  at  USEEDS°,  a  Berlin-­‐based  design  and  innovation  consultancy.  He  was  previously  an  Experience  Design  Consultant  at  LexisNexis  and  prior  to  that  Head  of  

Information  Architecture  at  Razorfish,  Germany.  James  holds  a  Masters  in  Library  and  Information  Science  from  Rutgers  University.  He  blogs  at  www.experiencinginformation.com  and  can  be  found  on  

Twitter  under  @jameskalbach.    

Email:  james.kalbach@gmail.com  

LinkedIn:  http://de.linkedin.com/in/kalbach  

 

 

Karen  Lindemann  is  a  psychologist  and  experienced  advertiser  with  years  of  experience  as  a  writer  in  agencies.  In  2005  she  founded  the  

user  experience  agency  NetFlow  and  consults  well-­‐known  companies  on  the  optimization  of  websites,  products  and  services.  Karen  also  advises  clients  on  information  and  product  strategy.  In  addition  to  

standard  user-­‐centered  design  methods  such  as  usability  testing,  expert  reviews,  card  sorting,  personas,  co-­‐creation  and  mental  model  diagrams,  she  also  conducts  ethnographic  studies  and  deep  

emotional-­‐based  interviews.  Karen  is  also  active  in  organizing  workshop  on  user  experience-­‐related  workshops  for  professionals  in  the  field.    

Website:  www.netflow-­‐lindemann.de  

Website:  www.ux-­‐workshops.com  E-­‐Mail:  kl@netflow-­‐lindemann.de  XING:  www.xing.com/profile/Karen_Lindemann  

LinkedIn:  http://de.linkedin.com/in/karenlindemann  Twitter:  twitter.com/karenlindemann/  

 

  8