Best Practices for UX designers working with Adobe Experience Manager

Have you found yourself thrown into the initial discovery phase of a project, navigating a whirlwind of knowledge sharing and introductions? The executive sponsor has the launch deadline already ringing in their ear, and you’ve just found out that you’re responsible for driving the component re-use strategy to make your content authors’ and developers’ lives easier. Wait, what? Chances are, the team is two steps ahead of you starting a project plan, the term ‘lift-and-shift’ is being thrown around, and you’re still murmuring — Why hasn’t the user experience strategy been considered earlier on and instead becomes an after-thought? There’s always risk to identify — this is the reality of any project. But how can we work within these challenges and maintain a successful UX strategy?

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

Migrating content while redefining technical architecture with a new content management system in mind is no small task — it requires swift team coordination and ample development time. There’s no redesign from a visual design perspective, but HTML cannot just be moved over as-is. The HTML mark-up is going to change in order to accommodate the new template and component breakdown and handle the new flexibility for Experience Manager authoring. It would be wise to take a step back to focus on your content strategy and information architecture. Separating your content from code will allow for more adaptability on components that can be updated later, as your original code may need to be decomposed and reconstructed during the migration process — the breakdown of templates may differ, the number of components may be consolidated into fewer ones, and content might be broke up into several different components breaking style continuity. Additionally, as changes in the URL structure will most likely occur, the relationship between pages may break and CSS will need to be reorganized to accommodate these updates. While your visual designer may have less of a role, there will be more coordination between your front-end developer tasked with creating the HTL markup language and the technical architect leading the back-end development team that is creating the AEM Templates and components.

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

Integration between Experience Manager, Adobe Target and Adobe Analytics allow opportunities for user testing as soon as you launch your website. This deeper cross-solution integration provides authors with tools to edit personalized content directly within Experience Manager and discover the most engaging digital experiences through tailored campaigns and testing. Adobe Analytics will help to track page views, engagement, and transaction-level information while providing metrics to monitor where your traffic is coming from. Through Adobe Target, you can import previously-defined audiences and a variety of creative experiences, personalized pages, and even Geo-targeted content. Adobe can help you put together a foundation where you can measure engagement and traffic and optimize the site based on these learnings to delivery the right experience to the right customer with the goal of increasing user adoption.

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

As a designer and a front-end developer, I believe that design cycles could be streamlined by considering an Atomic Design methodology rather than creating entire fully-detailed design comps up front. A responsive design system compromised of the building blocks (otherwise known as AEM templates and components) can help define the structure for the global look and feel and various layout alterations without having to design every single page. In addition, when any changes are required, updating a single component style guide can save a huge amount of time in design cycles, version control and file management in order for the team to focus on the implementation effort — thus, expediting the design process to move forward more quickly. A component style guide can also provide the blueprint for your front-end developers to build on-the-fly, re-usable code from global variables and a foundational framework such as Bootstrap. In turn, this can foster collaboration with your SEO expert and validate design decisions with real time frames based on implementation complexity in order to adhere to deadlines and budgets. The aim of atomic design is to be able to establish a set of building blocks to enable your authors to create new pages from a range of re-usable template, component, layout and content type variations. There’s enough flexibility to create what they need, without restricting them into very specific use cases. Adobe’s knowledge of Experience Manager can help you make the right call on what can be designed as OOTB components versus what is a fully custom built component.

With a vast number of variables out of our control, the role of the UX designer can feel like a battle field at times. We should be adaptable as creative problem solvers; Approaching Adobe Experience Manager with a clear head and well informed around the various tools at our disposal can help tweak your design process and approach without compromising the user experience, while making your content authors and developer lives’ easier. Working together, Adobe can help you lead a seamless design solution strategy for a successful marketing cloud experience.