What I did @ ADT

Roles

UI Design

AEM Content Authoring

AEM Components (both native and custom)
Page Templates
Experience Fragments
Live Copies

Digital asset management

Crop & edit images
image tagging

Tools & Skills

CMS Platform

Adobe Experience Manager Touch UI 6.5
Adobe Experience Manager Classic
CRXDE

UI Design:

Sketch
Zeplin
InVision

Editing tools:

Photoshop
CSS compiler
HTML

The Highlight

AEM Reskin:

About 3 months into my role as an AEM Content Author, the company initiated a complete reskin and redesign of the company website. I was fortunate to be able to be part of that process and further developed both my skills as an author and UI designer.

My roles at ADT

Examples of AEM Authored Pages

These are just a few of the pages I’m most proud of:

To me, they represent a number of hard and soft skills I was able to work on individually and as a team member:
Visual Design, AEM Content Authoring, hand-coding CSS & HTML; working with design-to-development component & content fragment issues.

ADT Control page

ADT Command page

ADT Product Page

AEM Content Authoring

Over the course of 13 months, I authored 500+ landing pages, promotional pages, and product pages.

I was tasked with taking designs and visuals from Sketch and InVision, and translate them to AEM pages, component structures, experience and content fragments, as well as tagging and formatting SEO metadata into pages.

I was also tasked with documenting any design opportunities and challenges within the AEM framework.

ADT Reskin

Platform-wide Upgrade

I was fortunate to be part of ADT’s upgrade to AEM Touch UI 6.3 (now 6.5), from AEM Classic.

As part of that initiative, the company also went through a complete redesign (we called it a “reskin”). I was part of an AEM Audit Team, whose task was to inventory the existing AEM component library, determine which components could remain “as-is”, which needed to be edited, and which had to be retired in favor of new components that would match the new designs.

Along with that, I would assist the Senior Designers in establishing and testing designs that would translate into AEM components, experience fragments and content fragments, and that would behave the way the designs envisioned.

UI & Visual Design

At times, I updated & edited visual assets. Often this was done through Adobe Photoshop & Lightroom.

I was often called on to update and maintain the new ADT Design System, created through Sketch, and later Adobe XD. I was able to modify design system assets, icons, symbols & components, and publish to other design instances.

Many of the visual design edits involved imagery and site layouts for the new spokesperson relationship ADT had with the Scott Brothers.

McCann sample - Design System library using Sketch and later Adobe XD

AEM Content Authoring Screen

Components: Editing & Modifications

My day-to-day activities included editing & modifying AEM Components by hand-coding the component’s CSS & HTML. This was done to ensure the components behaved properly on all devices, as well as for readability and ADA & WCAG 2.0 compliance.

Since this is not an ideal authoring goal, I would also coordinate with designers and developers to develop new and/or improve existing components in order to enhance the user experience, and to eliminate the need to hand-code.

QA & Creating Accessible Content (WCAG 2.0 Conformance)

I would work through test cases and conducted multi-device QA testing, for a consistent user experience, and report and track bugs through Jira. The goal was always to meet Level AA WCAG requirements – at a minimum.

Basic review included proper page structure, use of H1, H2 etc headings, color contrast, font size and spacing and accessibility of images, effect of page scrolling, and more.

This basic review was supplemmented with iterating AEM pages up to refine for such accessibility options as proper “alt tags” and video captions and even video alternatives. I would work with copywriters and Project Leads to supply text alternatives and to be sure that overly long copy was avoided.

example of meeting WCAG 2.0 in AEM

$ADT Partnerships \ AEM Content Author$

Led Product & Partnership Specific AEM Deployments

I was able to work with some wonderful folks across the company, and with other companies, to bring targeted landing pages to life for both ADT services and ADT partnership initiatives, such as Chubb, MetLife and USAA.

Another highlight was that I was the product owner on the initial AEM & visual design updates for ADT’s Command & Control App launch in June 2019. This launch worked in tandem with the overall site redesign and its staggered deployment.