EVOLVE'15 | Maximize | Ted Billups | Taming AEM

1

TAMING AEM

I. User Centered DesignII. Super BriefIII. Tips for Creative in AEMIV. Emerging TrendsV. Summary

Simplifying Design and Creative for Big Brands

TED BILLUPS | 8/17/15

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

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 Marketing2. User Experience3. Creative and Messaging4. Technology

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

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

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!


7

Author ControlsAuthors 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.


8

Author Controls


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.


10

visuals


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.


12

MegaMenus and Drawers


13

asd


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.


15

eCommerce components


16

Components, Templates and PatternsAllow 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


17

Components, Templates and Patterns- Previews


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.


19

ADA ComplianceADA (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.


20


21

Heuristic ReviewA quick way to Identify and prioritize the problems before design begins.


“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

Heuristic ReviewUX 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.


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


>

• or expand into content and functionality such as checkout

>

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


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

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

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

• 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) "Fixed Side”• 12) Book Preview• 13) Open/Close Menus

29

PATTERNS AND STYLES

30

Ted BillupsExecutive Creative Director

[email protected]

Linkedin.com/tedbillups

Mark KelleySenior Client Manager

[email protected]/markkelley

(919) 368-2748

THANK YOU!

�

�

�

�