Presented at 3|SHARE's EVOLVE'15 - The Adobe Experience Manager Community Summit on Monday August 19th, 2015 at the Hard Rock Hotel in San Diego, CA. http://evolve.3sharecorp.com

1. 1
TAMING AEM
I. User Centered Design
II. Super Brief
III. Tips for Creative in AEM
IV. Emerging Trends
V. Summary
Simplifying Design and Creative for Big Brands
TED BILLUPS | 8/17/15

2. 2
Q: How do we get great “creative” results,
especially when referring to a big system
like AEM?
A: First, it’s critical to start with User
Centered Design to meet user, business,
creative and technology goals.
UCD gives extensive attention to users at
each stage of the design process, and
builds consensus.
I. USER CENTERED DESIGN

3. 3
A solid foundation is needed so that creative can flourish.
A Super Brief documents assumptions, goals and a lot more, to bring
the following areas together for all stakeholders to use:
II. SUPER BRIEF
1. Business and Marketing
2. User Experience
3. Creative and Messaging
4. Technology

4. 4
Why do we combine all these into one Brief?
It allows us to define what success looks like across the board, so that:
• Users will accomplish their goals more easily, which lead to…
• more positive and on-target brand experiences, which lead to...
• better business and marketing performance, which allow…
• deeper focus on forward-thinking innovation and sync between
systems and teams.
II. SUPER BRIEF

5. 5
1. Do think of design in terms of components. Design a LOT of
components. They solve user and/or author needs.
2. Don’t lock down templates unless governance is a big challenge.
3. Do create Author Controls to customize and get more creative
mileage out of existing templates.
III. TIPS FOR CREATIVE IN AEM

6. 6
4. Components should follow mental models, aka “Design Patterns".
e.g. eCommerce, Editorial/Blogs, Marketing Landing Pages.
5. Transition to Responsive simply at first, then improve and expand.
6. Use interactions to improve the experience, build brand equity
and be memorable!
III. TIPS FOR CREATIVE IN AEM

7. 7
Author Controls
Authors can create unlimited sites based on one or two templates.
CSS has really grown up and can do so much now! For example,
you can create author-selectable controls for different looks, such
as:
• fonts, colors, photos, patterns
• graphics (especially vector)
• shapes, animations, interactions and more can all be
customized via CSS and a little Javascript.
III. TIPS FOR CREATIVE IN AEM

8. 8
Author Controls
III. TIPS FOR CREATIVE IN AEM

9. 9
Components, Templates and Patterns
- MegaMenus and Drawers: great solution for desktop. Very useful
when navigation needs visuals to help users recognize information
more quickly à this reduces cognitive overload and friction.
III. TIPS FOR CREATIVE IN AEM

10. 10
visuals
III. TIPS FOR CREATIVE IN AEM

11. 11
Components, Templates and Patterns
- Search: Search is very powerful. It deserves the users' entire
attention. A large % of users are site searchers. We recommend
you design accordingly.
III. TIPS FOR CREATIVE IN AEM

12. 12
MegaMenus and Drawers
III. TIPS FOR CREATIVE IN AEM

13. 13
asd
III. TIPS FOR CREATIVE IN AEM

14. 14
Components, Templates and Patterns
- Leverage the eCommerce experience. Users know how eCommerce
works.
- What does this mean? Take the BtoC retail experience, remove the
checkout, and leverage the flows, layouts and components.
- Patterns to leverage: Search, Category, List, Detail, filters, Cart (which
can be used as “Save for Later” to jog users’ memory, like we see on
Amazon and similar), and many more.
III. TIPS FOR CREATIVE IN AEM

15. 15
eCommerce components
III. TIPS FOR CREATIVE IN AEM

16. 16
Components, Templates and Patterns
Allow users to more easily recognize and understand content at a glance:
• Use document thumbnails of actual pages that authors can set
• Display important metas and functionality on Hovers/Taps
• Allow users to view by doc types and languages
III. TIPS FOR CREATIVE IN AEM

17. 17
Components, Templates and Patterns
- Previews
III. TIPS FOR CREATIVE IN AEM

18. 18
“Quick” Responsive:
Take an existing desktop site and make it responsive with few content
changes
• do a quick-hit Heuristic review of the existing desktop site to isolate
any big issues.
• Mobile First. Design phone and tablet, and work your way back to
the Desktop design to see what works. Otherwise it will be near
impossible to make the front-end of desktop and mobile work
together.
III. TIPS FOR CREATIVE IN AEM

19. 19
ADA Compliance
ADA (Section 508) is possible in AEM, and it can be responsive.
• Yes, it can look great! But requires additional layers of front-end
code and lots of browser and device testing, to ensure rendering
speeds are not compromised.
• All this means navigation can be operated with a keyboard, and
assistive technology can track focus and focus changes.
III. TIPS FOR CREATIVE IN AEM

20. 20
III. TIPS FOR CREATIVE IN AEM

21. 21
Heuristic Review
A quick way to Identify and prioritize the problems
before design begins.
III. TIPS FOR CREATIVE IN AEM
“A heuristic review is a method
used to analyze and evaluate
an existing application or
website against best practices
for usability, accessibility,
design, and functionality.”

22. 22
Heuristic Review
UX professionals assign a severity rating to issues in key areas:
• Consistency and standards
• Flexibility and efficiency of use
• Match between system and the real world
• Recognition rather than recall
• Visibility of System Status
• And more…
Major issues can then be prioritized and addressed in design.
III. TIPS FOR CREATIVE IN AEM

23. 23
Interactions!
Are more important than ever.
Native Apps have paved the way
for better interactions, so websites
must follow. Buttons, can for
example:
• show status
III. TIPS FOR CREATIVE IN AEM
>
• or expand into content and
functionality such as checkout
>

24. 24
Interactions!
SVG
• SVG graphics are lightweight and
scale with no loss in quality on any
device – responsively
• great for logos!
• you can animate SVGs to grab
attention and guide the eye
• just be sure to browser and device
test SVGs thoroughly
III. TIPS FOR CREATIVE IN AEM

25. 25
A few AEM creative
developments that will get
more attention in 2016
1. Evolving Documentation:
“Hybrid” Design Pattern
Libraries + Styleguides. A
natural fit for Component
based design.
IV. EMERGING TRENDS

26. 26
2. Emotional Design: go beyond functional
and usable. Make your site memorable
with a personality. Surprise and delight
users, based on Personas.
What does this user need and want?
How can I use content and interactions to
make them smile?
IV. EMERGING TRENDS

27. 27
When building your team, it’s important they:
• understand the value of User Centered Design and how to get to it.
• Develop the necessary tools to manage creative as it applies to all
members of the team.
• Create relevant, meaningful interactions for users
• Stay on top of what’s next.
If your team can marshal these skills and apply them intelligently to the
AEM project, you stand a good chance of producing a site that fulfills
its mission of elevating the brand and satisfying all users and teams.
V. SUMMARY

28. 28
• 1) Draggable Element:
• 2-4) Color Extraction
• 5) Text Styles Hover Effects.
• Creative Gooey Effects:
• 6) "Selection”
• 7) "Send Loader”
• 8) "Share”
MORE INTERACTIONS!
Tooltips:
• 9) "Round”
• 10) "Line”
Article Intro Effects:
• 11) "FixedSide”
• 12) Book Preview
• 13) Open/Close Menus

29. 29
PATTERNS AND STYLES

30. 30
Ted Billups
Executive Creative Director
ted.billups@icidigital.com
Linkedin.com/tedbillups
Mark Kelley
Senior Client Manager
mark.kelley@icidigital.com
Linkedin.com/markkelley
(919) 368-2748
THANK YOU!