Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
31 intranet homepage
design examples, with
screenshots
Analysis of entries from
My Beautiful Intranet 2014
Twitter: @DWG
www.digitalworkplacegroup.com
6 ways to present quick links
on your intranet homepage
Twitter: @DWG
www.digitalworkplacegroup.com
Adobe – “Popular resources”
Twitter: @DWG
www.digitalworkplacegroup.com
Adobe –
“Popular Resources”
• Left-hand side of the page
• Called “Popular Res...
Twitter: @DWG
www.digitalworkplacegroup.com
ACCA – “Key Links” / “Popular Pages”
Twitter: @DWG
www.digitalworkplacegroup.com
ACCA –
Dynamic and static links
• Right-hand side of the page
• Two different ...
Twitter: @DWG
www.digitalworkplacegroup.com
AmBank – “Launch application”
Twitter: @DWG
www.digitalworkplacegroup.com
AmBank –
“Launch Application”
• Right-hand side of the page
• Drop-down list o...
Twitter: @DWG
www.digitalworkplacegroup.com
ARI – “I would like to”
Twitter: @DWG
www.digitalworkplacegroup.com
ARI –
“I would like to”
• Right-hand side of the page
• Simple task-based lang...
Twitter: @DWG
www.digitalworkplacegroup.com
Suncor – Quicklinks dropdown menu
Twitter: @DWG
www.digitalworkplacegroup.com
Suncor –
“Quick Links” dropdown menu
• Right-hand side of the page
• Drop-down...
Twitter: @DWG
www.digitalworkplacegroup.com
UNUM – sorted links
Twitter: @DWG
www.digitalworkplacegroup.com
UNUM –
Sorted links
• Left-hand side of the page
• Links sorted into labelled ...
Twitter: @DWG
www.digitalworkplacegroup.com
5 examples of icons for listing
tasks on intranet homepages
Twitter: @DWG
www.digitalworkplacegroup.com
Vinarco –
Simple icons
Twitter: @DWG
www.digitalworkplacegroup.com
Vinarco –
Simple icons
• Top right of page
• Consistent, minimalist design
• S...
Twitter: @DWG
www.digitalworkplacegroup.com
Oddball – Icons
Twitter: @DWG
www.digitalworkplacegroup.com
Spectrum Association Management –
Branded, stylized icons for tasks & info
• T...
Twitter: @DWG
www.digitalworkplacegroup.com
Wheatley Group – Big buttons
Twitter: @DWG
www.digitalworkplacegroup.com
Wheatley Group –
Big simple buttons in brand colors
• Top right of page
• Larg...
Twitter: @DWG
www.digitalworkplacegroup.com
Business Environment – Big icons
Twitter: @DWG
www.digitalworkplacegroup.com
Business Environment –
3D icons for tasks & tools
• Top right of page, horizon...
Twitter: @DWG
www.digitalworkplacegroup.com
Children’s Trust –
Keyboard buttons
Twitter: @DWG
www.digitalworkplacegroup.com
Children’s Trust –
Keyboard styled icons/buttons
• Top left of page
• Color va...
Twitter: @DWG
www.digitalworkplacegroup.com
10 ways to bring social onto
your intranet homepage
Twitter: @DWG
www.digitalworkplacegroup.com
Twitter: @DWG
www.digitalworkplacegroup.com
Dorel Juvenile –
Persistent right-hand social column
• Action-oriented right-h...
Twitter: @DWG
www.digitalworkplacegroup.com
Suncor –
Show number of comments for news stories
Twitter: @DWG
www.digitalworkplacegroup.com
Suncor –
Shows number of comments for news stories
• Shows popularity of artic...
Twitter: @DWG
www.digitalworkplacegroup.com
Mediterranean Shipping Company –
Sort news by most commented and liked
Twitter: @DWG
www.digitalworkplacegroup.com
Mediterranean Shipping Company –
Sorts news by most commented and liked
• Sort...
Twitter: @DWG
www.digitalworkplacegroup.com
ACCA –
Show popular pages
Twitter: @DWG
www.digitalworkplacegroup.com
ACCA –
Shows popular pages
• Simple way to surface popular news
• Includes new...
Twitter: @DWG
www.digitalworkplacegroup.com
Roland Berger –
List “My Communities”
Twitter: @DWG
www.digitalworkplacegroup.com
Roland Berger –
List and link to “My communities”
• Drop-down list to select a...
Twitter: @DWG
www.digitalworkplacegroup.com
Roland Berger –
List “My Communities”
Twitter: @DWG
www.digitalworkplacegroup.com
Roland Berger –
Well formatted social feed
• Simple, well spaced format
• Easy...
Twitter: @DWG
www.digitalworkplacegroup.com
Adobe –
Status update box
Twitter: @DWG
www.digitalworkplacegroup.com
Adobe –
Provide status update box
• Simple option to participate
• Invites sta...
Twitter: @DWG
www.digitalworkplacegroup.com
Quality Practice –
Social activity feed
Twitter: @DWG
www.digitalworkplacegroup.com
Quality Practice –
Shows social activity feed
• Personalized social activity f...
Twitter: @DWG
www.digitalworkplacegroup.com
Children’s Trust –
Blogs with authors’ images
Twitter: @DWG
www.digitalworkplacegroup.com
Children’s Trust –
Lists blogs with authors’ images
• Highlights user-generate...
Twitter: @DWG
www.digitalworkplacegroup.com
ACCA –
Link to edit profile
Twitter: @DWG
www.digitalworkplacegroup.com
ACCA –
Includes a link to edit profile
• Makes homepage feel personal
• Allows...
Twitter: @DWG
www.digitalworkplacegroup.com
10 examples of reinforcing company
culture on the intranet homepage
Twitter: @DWG
www.digitalworkplacegroup.com
PUB –
Playful background
Twitter: @DWG
www.digitalworkplacegroup.com
PUB –
Playful background
• Playful design sets relaxed tone
• Builds sense of ...
Twitter: @DWG
www.digitalworkplacegroup.com
ARI –
The company’s charity events
Twitter: @DWG
www.digitalworkplacegroup.com
ARI –
Company’s charity events
• “Local events” feels relevant and
relatable f...
Twitter: @DWG
www.digitalworkplacegroup.com
Arcor –
Links to community pictures/activities
Twitter: @DWG
www.digitalworkplacegroup.com
Arcor –
Community involvement activities
• Highlights employee involvement
• T...
Twitter: @DWG
www.digitalworkplacegroup.com
UNUM –
Corporate social responsibility (CSR) info
Twitter: @DWG
www.digitalworkplacegroup.com
UNUM –
Corporate social responsibility (CSR) info
• Daily reminder of company’...
Twitter: @DWG
www.digitalworkplacegroup.com
PUB –
“We can serve” spotlight
Twitter: @DWG
www.digitalworkplacegroup.com
PUB –
“We can serve” spotlight
• Employee recognition tied to CSR
• Conveys co...
Twitter: @DWG
www.digitalworkplacegroup.com
Business Environment –
“Congrats” and “Say goodbye” news
Twitter: @DWG
www.digitalworkplacegroup.com
Business Environment –
“Congrats” and “Say goodbye” news
• Welcoming and emplo...
Twitter: @DWG
www.digitalworkplacegroup.com
World Travel Holdings –
“Who’s being recognized” news
Twitter: @DWG
www.digitalworkplacegroup.com
World Travel Holdings –
“Who’s being recognized” news
• Non-monetary employee ...
Twitter: @DWG
www.digitalworkplacegroup.com
Children’s Trust –
“Picture of the week” & social pictures
Twitter: @DWG
www.digitalworkplacegroup.com
Children’s Trust –
“Picture of the week” & event pictures
• Friendly, welcomin...
Twitter: @DWG
www.digitalworkplacegroup.com
Charles Schwab –
Q&A with executives
Twitter: @DWG
www.digitalworkplacegroup.com
Charles Schwab –
Q&A with executives
• Humanizes executives
• Reframes communi...
Twitter: @DWG
www.digitalworkplacegroup.com
Suncor –
Company’s external social activity
Twitter: @DWG
www.digitalworkplacegroup.com
Suncor –
Company’s external social media activity
• Keeps employees informed
•...
Twitter: @DWG
www.digitalworkplacegroup.com
That’s 31!
Twitter: @DWG
www.digitalworkplacegroup.com
So…
Twitter: @DWG
www.digitalworkplacegroup.com
So… do you like intranets?
Twitter: @DWG
www.digitalworkplacegroup.com
So… do you like intranets? Are you working
on improving your own digital workp...
Twitter: @DWG
www.digitalworkplacegroup.com
So… do you like intranets? Are you working
on improving your own digital workp...
End
Upcoming SlideShare
Loading in …5
×

31 intranet homepage design examples, with screenshots

158,555 views

Published on

This slideshow presents 31 examples of intranet homepage design concepts, with example screenshots.

We've pulled the screenshots from the entries in the My Beautiful Intranet 2014 competition.

Published in: Technology

31 intranet homepage design examples, with screenshots

  1. 1. 31 intranet homepage design examples, with screenshots Analysis of entries from My Beautiful Intranet 2014
  2. 2. Twitter: @DWG www.digitalworkplacegroup.com 6 ways to present quick links on your intranet homepage
  3. 3. Twitter: @DWG www.digitalworkplacegroup.com Adobe – “Popular resources”
  4. 4. Twitter: @DWG www.digitalworkplacegroup.com Adobe – “Popular Resources” • Left-hand side of the page • Called “Popular Resources” • Some links are the same for all employees • Some links are personalized based on location and role
  5. 5. Twitter: @DWG www.digitalworkplacegroup.com ACCA – “Key Links” / “Popular Pages”
  6. 6. Twitter: @DWG www.digitalworkplacegroup.com ACCA – Dynamic and static links • Right-hand side of the page • Two different sections • “Popular pages” auto-generated based on intranet page views • “Key links” and “Admin links” maintained by Intranet Manager
  7. 7. Twitter: @DWG www.digitalworkplacegroup.com AmBank – “Launch application”
  8. 8. Twitter: @DWG www.digitalworkplacegroup.com AmBank – “Launch Application” • Right-hand side of the page • Drop-down list of common apps • Title uses action-oriented language • More specific than just “Links”
  9. 9. Twitter: @DWG www.digitalworkplacegroup.com ARI – “I would like to”
  10. 10. Twitter: @DWG www.digitalworkplacegroup.com ARI – “I would like to” • Right-hand side of the page • Simple task-based language • Users can relate to “I would like to:” title
  11. 11. Twitter: @DWG www.digitalworkplacegroup.com Suncor – Quicklinks dropdown menu
  12. 12. Twitter: @DWG www.digitalworkplacegroup.com Suncor – “Quick Links” dropdown menu • Right-hand side of the page • Drop-down menu saves space • Standard “Quick Links” heading
  13. 13. Twitter: @DWG www.digitalworkplacegroup.com UNUM – sorted links
  14. 14. Twitter: @DWG www.digitalworkplacegroup.com UNUM – Sorted links • Left-hand side of the page • Links sorted into labelled groups
  15. 15. Twitter: @DWG www.digitalworkplacegroup.com 5 examples of icons for listing tasks on intranet homepages
  16. 16. Twitter: @DWG www.digitalworkplacegroup.com Vinarco – Simple icons
  17. 17. Twitter: @DWG www.digitalworkplacegroup.com Vinarco – Simple icons • Top right of page • Consistent, minimalist design • Simple design lets icon text stand out • Tab name contributes context to tasks • Section title positions user as actor • Multiple tabs allow for shorter lists, greater use of available space
  18. 18. Twitter: @DWG www.digitalworkplacegroup.com Oddball – Icons
  19. 19. Twitter: @DWG www.digitalworkplacegroup.com Spectrum Association Management – Branded, stylized icons for tasks & info • Top middle of page • Large simple iconography • Consistent colors & design • Mix of specific tasks and more general information
  20. 20. Twitter: @DWG www.digitalworkplacegroup.com Wheatley Group – Big buttons
  21. 21. Twitter: @DWG www.digitalworkplacegroup.com Wheatley Group – Big simple buttons in brand colors • Top right of page • Large, simple, easy-to-read “buttons” • Short list makes selection easy • Different colors support memorability • Text stronger visually than icons • Large size & placement suggest high priority or very common tasks
  22. 22. Twitter: @DWG www.digitalworkplacegroup.com Business Environment – Big icons
  23. 23. Twitter: @DWG www.digitalworkplacegroup.com Business Environment – 3D icons for tasks & tools • Top right of page, horizontal list • Large, simple icons aid recognition • Visuals much larger than text • Visual variety helps with memorability
  24. 24. Twitter: @DWG www.digitalworkplacegroup.com Children’s Trust – Keyboard buttons
  25. 25. Twitter: @DWG www.digitalworkplacegroup.com Children’s Trust – Keyboard styled icons/buttons • Top left of page • Color variety aids in memorability • Use of color ties in with mission • Mix of specific and general info
  26. 26. Twitter: @DWG www.digitalworkplacegroup.com 10 ways to bring social onto your intranet homepage
  27. 27. Twitter: @DWG www.digitalworkplacegroup.com
  28. 28. Twitter: @DWG www.digitalworkplacegroup.com Dorel Juvenile – Persistent right-hand social column • Action-oriented right-hand column • Persistent throughout intranet • Lets users keep up with conversations without returning to a dashboard page over and over
  29. 29. Twitter: @DWG www.digitalworkplacegroup.com Suncor – Show number of comments for news stories
  30. 30. Twitter: @DWG www.digitalworkplacegroup.com Suncor – Shows number of comments for news stories • Shows popularity of articles • As big a draw as articles themselves • Compels users to read the story • Invites more participation
  31. 31. Twitter: @DWG www.digitalworkplacegroup.com Mediterranean Shipping Company – Sort news by most commented and liked
  32. 32. Twitter: @DWG www.digitalworkplacegroup.com Mediterranean Shipping Company – Sorts news by most commented and liked • Sorts by most popular news/discussions • Sorts by comments or “Likes” • Surfaces what people are interested in • Invites participation • A good compliment to chronological and more official news
  33. 33. Twitter: @DWG www.digitalworkplacegroup.com ACCA – Show popular pages
  34. 34. Twitter: @DWG www.digitalworkplacegroup.com ACCA – Shows popular pages • Simple way to surface popular news • Includes news from all locations • Popularity based on “Likes” and age of pages • “Social” because generated by user behavior
  35. 35. Twitter: @DWG www.digitalworkplacegroup.com Roland Berger – List “My Communities”
  36. 36. Twitter: @DWG www.digitalworkplacegroup.com Roland Berger – List and link to “My communities” • Drop-down list to select a community • Offers alternate route to site navigation • Personalized list makes homepage relevant • Recommendations invite further involvement
  37. 37. Twitter: @DWG www.digitalworkplacegroup.com Roland Berger – List “My Communities”
  38. 38. Twitter: @DWG www.digitalworkplacegroup.com Roland Berger – Well formatted social feed • Simple, well spaced format • Easy to scan and read • Actions and actors stand out • “Follow up” filter elevates utility of social to be an active task list
  39. 39. Twitter: @DWG www.digitalworkplacegroup.com Adobe – Status update box
  40. 40. Twitter: @DWG www.digitalworkplacegroup.com Adobe – Provide status update box • Simple option to participate • Invites status updates at start of day • High up on homepage for easy access
  41. 41. Twitter: @DWG www.digitalworkplacegroup.com Quality Practice – Social activity feed
  42. 42. Twitter: @DWG www.digitalworkplacegroup.com Quality Practice – Shows social activity feed • Personalized social activity feed • Shows only posts from a user’s network • Relevant, work-related social updates
  43. 43. Twitter: @DWG www.digitalworkplacegroup.com Children’s Trust – Blogs with authors’ images
  44. 44. Twitter: @DWG www.digitalworkplacegroup.com Children’s Trust – Lists blogs with authors’ images • Highlights user-generated posts • Richer content than just discussions • Author images bring the posts to life • Clean and simple design • Links to author profile pages enable connections with thought leaders
  45. 45. Twitter: @DWG www.digitalworkplacegroup.com ACCA – Link to edit profile
  46. 46. Twitter: @DWG www.digitalworkplacegroup.com ACCA – Includes a link to edit profile • Makes homepage feel personal • Allows quick access to own profile • Update profile with one click
  47. 47. Twitter: @DWG www.digitalworkplacegroup.com 10 examples of reinforcing company culture on the intranet homepage
  48. 48. Twitter: @DWG www.digitalworkplacegroup.com PUB – Playful background
  49. 49. Twitter: @DWG www.digitalworkplacegroup.com PUB – Playful background • Playful design sets relaxed tone • Builds sense of friendliness • Good use of otherwise blank page margins
  50. 50. Twitter: @DWG www.digitalworkplacegroup.com ARI – The company’s charity events
  51. 51. Twitter: @DWG www.digitalworkplacegroup.com ARI – Company’s charity events • “Local events” feels relevant and relatable for users • Highlighting charity sponsorships shows company values • Homepage focus on charitable activities highlights their importance • Community involvement increases sense of purpose for employees
  52. 52. Twitter: @DWG www.digitalworkplacegroup.com Arcor – Links to community pictures/activities
  53. 53. Twitter: @DWG www.digitalworkplacegroup.com Arcor – Community involvement activities • Highlights employee involvement • Ties company’s values to employee recognition
  54. 54. Twitter: @DWG www.digitalworkplacegroup.com UNUM – Corporate social responsibility (CSR) info
  55. 55. Twitter: @DWG www.digitalworkplacegroup.com UNUM – Corporate social responsibility (CSR) info • Daily reminder of company’s values • Homepage spotlight shows importance of CSR to the company • Helps employees hold company and executives accountable
  56. 56. Twitter: @DWG www.digitalworkplacegroup.com PUB – “We can serve” spotlight
  57. 57. Twitter: @DWG www.digitalworkplacegroup.com PUB – “We can serve” spotlight • Employee recognition tied to CSR • Conveys company values through employee stories
  58. 58. Twitter: @DWG www.digitalworkplacegroup.com Business Environment – “Congrats” and “Say goodbye” news
  59. 59. Twitter: @DWG www.digitalworkplacegroup.com Business Environment – “Congrats” and “Say goodbye” news • Welcoming and employee-focused news • Puts people in the spotlight • Highlights service & tenure • Helpful, needed information
  60. 60. Twitter: @DWG www.digitalworkplacegroup.com World Travel Holdings – “Who’s being recognized” news
  61. 61. Twitter: @DWG www.digitalworkplacegroup.com World Travel Holdings – “Who’s being recognized” news • Non-monetary employee recognition • Communicates company good practices • Lets employees’ actions do the talking • Gives every employee a chance at the spotlight
  62. 62. Twitter: @DWG www.digitalworkplacegroup.com Children’s Trust – “Picture of the week” & social pictures
  63. 63. Twitter: @DWG www.digitalworkplacegroup.com Children’s Trust – “Picture of the week” & event pictures • Friendly, welcoming faces on the intranet • Puts people at the forefront • Helps people recognize colleagues • Demonstrates company values
  64. 64. Twitter: @DWG www.digitalworkplacegroup.com Charles Schwab – Q&A with executives
  65. 65. Twitter: @DWG www.digitalworkplacegroup.com Charles Schwab – Q&A with executives • Humanizes executives • Reframes communications as conversation • Makes leaders seem approachable
  66. 66. Twitter: @DWG www.digitalworkplacegroup.com Suncor – Company’s external social activity
  67. 67. Twitter: @DWG www.digitalworkplacegroup.com Suncor – Company’s external social media activity • Keeps employees informed • Shows how company engages with public • Says that proper social media use is good • Lets people connect with company through personal networks
  68. 68. Twitter: @DWG www.digitalworkplacegroup.com That’s 31!
  69. 69. Twitter: @DWG www.digitalworkplacegroup.com So…
  70. 70. Twitter: @DWG www.digitalworkplacegroup.com So… do you like intranets?
  71. 71. Twitter: @DWG www.digitalworkplacegroup.com So… do you like intranets? Are you working on improving your own digital workplace?
  72. 72. Twitter: @DWG www.digitalworkplacegroup.com So… do you like intranets? Are you working on improving your own digital workplace? Visit the Digital Workplace Group website for more resources and information: My Beautiful Intranet 2014 Screenshots, live tours & more Downloadable reports http://www.digitalworkplacegroup.com
  73. 73. End

×