As website developers working in a Content Management System like Drupal, WordPress or Magento we are poised with 2 main challenges. 1.) How can we get the project to work well on the front-end 2.) How can we get the project to work well on the back-end As front end designers, we are excited at the opportunity sharpen our Photoshop and Illustrator skills. We map out wireframes with those silly annotations, create frivolous color pallet options, fine tune our SVG graphics and geek out on the subtle bits of over the top creativity. As back end developers, we make sure we pre-process our fields data just before theme rendering, we hook into every possible core function, we provide variables only front end nerds are going to need. But what about the person we actually built the website for? Was this for the end-user? - your average web browsing hipster with Stumptown Coffee stains on his laptop? Maybe. But aren't we forgetting the most important person here in the project? It's not you. It's the client. You know... the one who actually has to use this beautifully crafted website after you are done fiddling with it. Yeah that guy. What about the client experience? So he just paid a grip of cash for this bad ass website and you are ready to hand over the keys only to tell him, "oh by the way, here is the bible I created for you to understand how this damn thing actually works. Please give this manual to your IT staff so they can decipher it and hopefully not screw it up." Okay - okay - so that was a bit overboard, but let's take a look at how we can create an awesome admin experience for the client and really WOW your them on your next Drupal project.

2. QUICK INTRODUCTION
People call me “GONZ”

3. QUICK INTRODUCTION
1. Never went to Art School

4. QUICK INTRODUCTION
1. Never went to Art School
2. Never took Computer Science class

5. QUICK INTRODUCTION
1. Never went to Art School
2. Never took Computer Science class
3. Never won an Award

7. QUICK INTRODUCTION

8. SOME CLIENTS

9. SOME CLIENTS

10. SOME CLIENTS

11. SOME CLIENTS

12. SOME CLIENTS

13. SOME CLIENTS

14. SOME CLIENTS

16. QUICK INTRODUCTION
We’re Hiring
(shameless plug)

18. WARNING:

19. WARNING:

21. So why this session?

23. As website developers working in a
Content Management System like
Drupal, WordPress or Magento we
are poised with 2 main challenges.

24. As website developers working in a
Content Management System like
Drupal, WordPress or Magento we
are poised with 2 main challenges.
1. How can we get the project to work well on
the front-end

26. As website developers working in a
Content Management System like
Drupal, WordPress or Magento we
are poised with 2 main challenges.
1. How can we get the project to work well on
the front-end
2. How can we get the project to work well on
the back-end

30. What we will cover:
 Think Like an Admin

31. What we will cover:
 Think Like an Admin
 Building Admin UX

32. What we will cover:
 Think Like an Admin
 Building Admin UX
 Common Mistakes

33. What we will cover:
 Think Like an Admin
 Building Admin UX
 Common Mistakes
 Personal Mission

34. As DevSigners – It is
our responsibility to
create the total web
experience.

35. THINK LIKE AN ADMIN
THINK LIKE AN ADMIN

36. THINK LIKE AN ADMIN
1. Admin’s 1st Impression

38. THINK LIKE AN ADMIN
VS.

40. THINK LIKE AN ADMIN
1. Admin’s 1st Impression
– Branded vs Blah UI

41. THINK LIKE AN ADMIN
1. Admin’s 1st Impression
– Branded vs Blah UI
– Keep it Simple (KISS)

42. THINK LIKE AN ADMIN
1. Admin’s 1st Impression
– Branded vs Blah UI
– Keep it Simple (KISS)
– Customer Login vs Admin Login

43. THINK LIKE AN ADMIN
2. Admin’s Key Objectives

44. THINK LIKE AN ADMIN
2. Admin’s Key Objectives

45. THINK LIKE AN ADMIN
2. Admin’s Key Objectives

46. THINK LIKE AN ADMIN
2. Admin’s Key Objectives

47. THINK LIKE AN ADMIN
2. Admin’s Key Objectives

48. THINK LIKE AN ADMIN
2. Admin’s Key Objectives

49. THINK LIKE AN ADMIN
2. Admin’s Key Objectives

50. THINK LIKE AN ADMIN
3. Provide Training

51. THINK LIKE AN ADMIN
3. Provide Training
– Video Tutorials

52. THINK LIKE AN ADMIN

53. THINK LIKE AN ADMIN
3. Provide Training
– Video Tutorials
– Blog Posts (restricted access)

54. THINK LIKE AN ADMIN
3. Provide Training
– Video Tutorials
– Blog Posts (restricted access)
– Book Module (old school)

55. THINK LIKE AN ADMIN
3. Provide Training
– Video Tutorials
– Blog Posts (restricted access)
– Book Module (old school)
– Keep Front & Center

56. THINK LIKE AN ADMIN

61. AWESOME CUSTOM ADMIN MENU

62. SUPER HELPFUL HINTS

63. BUILDING ADMIN UX
BUILDING ADMIN UX

64. BUILDING ADMIN UX
BUILDING ADMIN UX
( Using Drupal Core )

65. Drupal Dashboard Module

66. Drupal Dashboard Module

67. Drupal Dashboard Module

68. Drupal Dashboard Module
Get Creative Here

69. Drupal Shortcuts Module

70. Drupal Menu
BUILDING ADMIN UX

71. Drupal Menu Block
BUILDING ADMIN UX

72. BUILDING ADMIN UX
Some Helpful Tips:

73. BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Populate

74. BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Pupulate

75. BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Populate
– Keep Logic on the Backend

76. BUILDING ADMIN UX

77. BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Populate
– Keep Logic on the Backend
Favorite Modules:

78. BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Populate
– Keep Logic on the Backend
Favorite Modules:
– Good ol’ Taxonomy

79. BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Populate
– Keep Logic on the Backend
Favorite Modules:
– Good ol’ Taxonomy
– Field Collection Module

80. BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Populate
– Keep Logic on the Backend
Favorite Modules:
– Good ol’ Taxonomy
– Field Collection Module #thankyou

81. BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Populate
– Keep Logic on the Backend
Favorite Modules:
– Good ol’ Taxonomy
– Field Collection Module #thankyou
– Entity Reference

82. BUILDING ADMIN UX
Huge Fan of
Landing Page Editors

83. BUILDING ADMIN UX

84. BUILDING ADMIN UX
Keep the Admin
in one place &
make it easy as possible

85. BUILDING ADMIN UX
Admin input fields
should have meaningful
instructions.

86. BUILDING ADMIN UX

87. BUILDING ADMIN UX
<?php global $user;
if (is_array($user->roles) && in_array('administrator', $user-
>roles)) {
print '<a href="/node/' . $node->nid . '/edit"
class="blogEdit">Edit</a>';
}
?>
Quick Edit Links for Admin
Edit Link

88. BUILDING ADMIN UX
<?php global $user;
if (is_array($user->roles) && in_array('administrator', $user-
>roles)) {
print '<a href="/node/' . $node->nid . '/edit"
class="blogEdit">Edit</a>';
}
?>
Quick Edit Links for Admin

89. BUILDING ADMIN UX
Take it a Step Further

90. BUILDING ADMIN UX
Take it a Step Further
– Design Your Own Admin Dashboard

91. BUILDING ADMIN UX
Take it a Step Further
– Design Your Own Admin Dashboard
– Wireframe it Out

92. BUILDING ADMIN UX
Take it a Step Further
– Design Your Own Admin Dashboard
– Wireframe it Out

93. BUILDING ADMIN UX

94. BUILDING ADMIN UX
Take it a Step Further
– Design Your Own Admin Dashboard
– Wireframe it Out
– /user-template.tpl.php

95. BUILDING ADMIN UX
Take it a Step Further
– Design Your Own Admin Dashboard
– Wireframe it Out
– /user-template.tpl.php
<?php global $user;
if (is_array($user->roles) && in_array('administrator', $user-
>roles)) {
print ’YOUR ADMIN HTML HERE';
}
?>

96. BUILDING ADMIN UX
Custom Admin Dashboard

97. BUILDING ADMIN UX
Custom Admin Dashboard
– Create a Custom Module

98. BUILDING ADMIN UX
Custom Admin Dashboard
– Create a Custom Module

99. BUILDING ADMIN UX
Custom Admin Dashboard
– Create a Custom Module

100. BUILDING ADMIN UX
Custom Admin Dashboard
– Create a Custom Module

101. BUILDING ADMIN UX
Custom Admin Dashboard
– Create a Custom Module

102. BUILDING ADMIN UX
Custom Admin Dashboard
– Create a Custom Module

103. BUILDING ADMIN UX
Custom Admin Dashboard
– Create a Custom Module

104. BUILDING ADMIN UX
Custom Admin Dashboard
– Create a Custom Module

105. BUILDING ADMIN UX
Custom Admin Dashboard
– Render a User Login Form

106. BUILDING ADMIN UX
Custom Admin Dashboard
– Render a User Login Form

107. BUILDING ADMIN UX
Redirect Admin to Dashboard

108. BUILDING ADMIN UX
Redirect Admin to Dashboard
– Login Destination URL

109. BUILDING ADMIN UX
Redirect Admin to Dashboard
– Login Destination URL
• If User Role = Admin

110. BUILDING ADMIN UX
Redirect Admin to Dashboard
– Login Destination URL
• If User Role = Admin
– Rules

111. BUILDING ADMIN UX
Redirect Admin to Dashboard
– Login Destination URL
• If User Role = Admin
– Rules
• After Login -> If User Has Role = Admin => URL

112. BUILDING ADMIN UX
Restricted Access

113. BUILDING ADMIN UX
Restricted Access
– Drupal ACL + Content Access Modules

114. BUILDING ADMIN UX
Restricted Access
– Drupal ACL + Content Access Modules
– Training Videos
– Book Pages
– Etc.

115. COMMON MISTAKES
COMMON MISTAKES

116. COMMON MISTAKES
COMMON MISTAKES
Robots.txt
User-agent: *
Crawl-delay: 10
# Directories
Disallow: /i/

117. COMMON MISTAKES
– Not Everything Needs to be Editable

118. COMMON MISTAKES
– Not Everything Needs to be Editable
• Menus
• Website Logo
• Views
• Taxonomy
• Etc.

119. COMMON MISTAKES
– Not Everything Needs to be Editable
• Menus
• Website Logo
• Views
• Taxonomy
• Etc.

120. COMMON MISTAKES
– Set Permissions

121. COMMON MISTAKES
– Set Permissions
– Set Per Admin Role Permissions

122. COMMON MISTAKES
– Set Permissions
– Set Per Admin Role Permissions
– Test as if YOU were the Admin

123. COMMON MISTAKES
<?php if ($user->uid): ?>
LOGOUT HERE
<?php endif; ?>

124. PERSONAL MISSION
PERSONAL MISSION

125. PERSONAL MISSION
Allocate project budget
for Admin UX design &
development
$$$

126. PERSONAL MISSION
Create the total
web experience.

127. PERSONAL MISSION
Make it AWESOME!