Best Practices for UX designers working with Adobe Experience Manager

Have you found your­self thrown into the ini­tial dis­cov­ery phase of a project, nav­i­gat­ing a whirl­wind of knowl­edge shar­ing and introductions? The exec­u­tive spon­sor has the launch dead­line already ring­ing in their ear, and you’ve just found out that you’re respon­si­ble for dri­ving the com­po­nent re-use strat­e­gy to make your con­tent authors’ and devel­op­ers’ lives eas­i­er. Wait, what? Chances are, the team is two steps ahead of you start­ing a project plan, the term ‘lift-and-shift’ is being thrown around, and you’re still mur­mur­ing — Why hasn’t the user expe­ri­ence strat­e­gy been con­sid­ered ear­li­er on and instead becomes an after-thought? There’s always risk to iden­ti­fy — this is the real­i­ty of any project. But how can we work with­in these chal­lenges and main­tain a suc­cess­ful UX strat­e­gy?

I keep hearing the term lift-and-shift and an emphasis on no redesign, what does this mean?”

Migrat­ing con­tent while redefin­ing tech­ni­cal archi­tec­ture with a new con­tent man­age­ment sys­tem in mind is no small task — it requires swift team coor­di­na­tion and ample devel­op­ment time. There’s no redesign from a visu­al design per­spec­tive, but HTML can­not just be moved over as-is. The HTML mark-up is going to change in order to accom­mo­date the new tem­plate and com­po­nent break­down and han­dle the new flex­i­bil­i­ty for Expe­ri­ence Man­ag­er authoring. It would be wise to take a step back to focus on your con­tent strat­e­gy and infor­ma­tion architecture. Separating your con­tent from code will allow for more adapt­abil­i­ty on com­po­nents that can be updat­ed lat­er, as your orig­i­nal code may need to be decom­posed and recon­struct­ed dur­ing the migra­tion process — the break­down of tem­plates may dif­fer, the num­ber of com­po­nents may be con­sol­i­dat­ed into few­er ones, and con­tent might be broke up into sev­er­al dif­fer­ent com­po­nents break­ing style continuity. Additionally, as changes in the URL struc­ture will most like­ly occur, the rela­tion­ship between pages may break and CSS will need to be reor­ga­nized to accom­mo­date these updates. While your visu­al design­er may have less of a role, there will be more coor­di­na­tion between your front-end devel­op­er tasked with cre­at­ing the HTL markup lan­guage and the tech­ni­cal archi­tect lead­ing the back-end devel­op­ment team that is cre­at­ing the AEM Tem­plates and com­po­nents.

There’s no time for prototyping and usability testing.”

Inte­gra­tion between Expe­ri­ence Man­ag­er, Adobe Tar­get and Adobe Ana­lyt­ics allow oppor­tu­ni­ties for user test­ing as soon as you launch your web­site. This deep­er cross-solu­tion inte­gra­tion pro­vides authors with tools to edit per­son­al­ized con­tent direct­ly with­in Expe­ri­ence Man­ag­er and dis­cov­er the most engag­ing dig­i­tal expe­ri­ences through tai­lored cam­paigns and test­ing. Adobe Ana­lyt­ics will help to track page views, engage­ment, and trans­ac­tion-lev­el infor­ma­tion while pro­vid­ing met­rics to mon­i­tor where your traf­fic is com­ing from. Through Adobe Tar­get, you can import pre­vi­ous­ly-defined audi­ences and a vari­ety of cre­ative expe­ri­ences, per­son­al­ized pages, and even Geo-tar­get­ed con­tent. Adobe can help you put togeth­er a foun­da­tion where you can mea­sure engage­ment and traf­fic and opti­mize the site based on these learn­ings to deliv­ery the right expe­ri­ence to the right cus­tomer with the goal of increas­ing user adop­tion.

Designers need to expedite their process in order for development to move forward.”

As a design­er and a front-end devel­op­er, I believe that design cycles could be stream­lined by con­sid­er­ing an Atom­ic Design method­ol­o­gy rather than cre­at­ing entire ful­ly-detailed design comps up front. A respon­sive design sys­tem com­pro­mised of the build­ing blocks (oth­er­wise known as AEM tem­plates and com­po­nents) can help define the struc­ture for the glob­al look and feel and var­i­ous lay­out alter­ations with­out hav­ing to design every sin­gle page. In addi­tion, when any changes are required, updat­ing a sin­gle com­po­nent style guide can save a huge amount of time in design cycles, ver­sion con­trol and file man­age­ment in order for the team to focus on the imple­men­ta­tion effort — thus, expe­dit­ing the design process to move for­ward more quickly. A com­po­nent style guide can also pro­vide the blue­print for your front-end devel­op­ers to build on-the-fly, re-usable code from glob­al vari­ables and a foun­da­tion­al frame­work such as Boot­strap. In turn, this can fos­ter col­lab­o­ra­tion with your SEO expert and val­i­date design deci­sions with real time frames based on imple­men­ta­tion com­plex­i­ty in order to adhere to dead­lines and bud­gets. The aim of atom­ic design is to be able to estab­lish a set of build­ing blocks to enable your authors to cre­ate new pages from a range of re-usable tem­plate, com­po­nent, lay­out and con­tent type vari­a­tions. There’s enough flex­i­bil­i­ty to cre­ate what they need, with­out restrict­ing them into very spe­cif­ic use cas­es. Adobe’s knowl­edge of Expe­ri­ence Man­ag­er can help you make the right call on what can be designed as OOTB com­po­nents ver­sus what is a ful­ly cus­tom built com­po­nent.

With a vast num­ber of vari­ables out of our con­trol, the role of the UX design­er can feel like a bat­tle field at times. We should be adapt­able as cre­ative prob­lem solvers; Approach­ing Adobe Expe­ri­ence Man­ag­er with a clear head and well informed around the var­i­ous tools at our dis­pos­al can help tweak your design process and approach with­out com­pro­mis­ing the user expe­ri­ence, while mak­ing your con­tent authors and devel­op­er lives’ eas­i­er. Work­ing togeth­er, Adobe can help you lead a seam­less design solu­tion strat­e­gy for a suc­cess­ful mar­ket­ing cloud expe­ri­ence.