Wireframing At A Component Level For Adobe Experience Manager

The Traditional Process
In the traditional development process one of the purposes of the wireframe phase is to capture the front end user experience including the functional user interface. Below is an example of what is produced during the wireframe phase.

Slide27
It depicts a particular page of the site that shows the general structure of the page and the various elements it contains. Once wireframes are completed, the visual design typically follows. When working with Adobe Experience Manager, moving on to the design phase right now would be a critical mistake.

Don’t Discount The Importance Of The Author

Slide41
The reason you have a website is to communicate with your customer. The reason you’re using Adobe Experience Manager(AEM) is to enable your marketing team to do that effectively. So don’t leave the author out of your process.

Similar to the traditional approach, we start with a wireframe detailing frontend user interaction with the site. Using our enhanced process (make this link to a jpg of our big process), instead of moving on to visual design we deviate and interject an AEM architect into the process. The AEM architect will collaborate with a UI/UX expert and the marketing stakeholder. Together they will determine how the wireframes can be broken down into digestible components that can be authored by the marketers.

A Real World Example
Slide43
For example, on CMO.com there is a carousel on the homepage that highlights specific articles. This is a perfect example of something that the marketing author will want to change regularly to improve engagement with the site. One great feature of Adobe Experience Manager is the ability to optimize the authoring experience through customized dialogs. Authoring dialogs are the interfaces used by the marketing author to control the content. It is critical that the UI/UX expert is not only involved in the definition of the frontend user interface but also the authoring tools.
Slide40You can see in this example, from CMO.com, that the homepage carousel has a customized dialog that allows the author to easily change it. The customizations we added include the ability to search through all the articles in the system and limit the list down by a date range and tags. This all happens within the custom dialog and enables the author to quickly and easily isolate the articles to include in the carousel.

The result of this phase will not only be the details for the front end user interactions with the site, but also documentation detailing each component and how they are used. Once the wireframes are signed off by the UI/UX experts, AEM architects, and marketing stakeholders, you can move on to the visual design phase.

During the wireframe process, don’t discount the importance of the author. If you have any questions or comments, please contact us at [email protected].