Peek Behind the Sneaks: Connecting Designers and Marketers to Create Next-Generation Mobile Experiences

4-14sneaks_main

Creating a successful mobile experience takes more than great design.  It requires fast and seamless collaboration across teams of people — the designers as well as the content experts, marketers, developers and other stakeholders.

The relationship between designers and marketers, as well as the tools they each use, has provided a focus point for our engineers and researchers as they explore ways to improve collaboration.

During their Sneaks presentation at Summit: The Digital Marketing Conference, Adobe engineers Manuel Castellanos Raboso and Andra Elena Iacov showcased how the new capabilities of Adobe XD, a new all-in-one UX tool for designers, might be integrated with other key elements of the Marketing Cloud — such as Adobe Experience Manager Mobile — to streamline the app design and building process with new possibilities for collaboration and rapid, iterative prototyping.

“We’re hoping to enable experience designers to create real, native mobile applications in just a few quick steps.  In the traditional workflow you’d start with mock-ups in Photoshop or another design tool.  You’d see how it looks and get approvals on the visual design, but then you’d have to have an app developer build a prototype and get that approved before you could actually start work on it. Typically, it is very late in the process before you get to see an actual working application that consumes real content.  We’re trying to remove all those time consuming layers and streamline the entire process,” Manuel says.

For example, one of the most powerful features of Adobe XD is a new tool called Repeat Grid. With Repeat Grid, designers can select any element in a wireframe and quickly replicate it horizontally and vertically as many times as they want — while all their styles and spacing stay intact.

img

An example of a UX template with Repeat Grid

Repeat Grid is a powerful feature for integrating repetitive design elements, but it really shines when it’s populated with real content and data, as opposed to placeholders and Lorem Ipsum – while not in the current release of Adobe XD, that’s something our engineers are working on already (an early version of these ideas were  demonstrated during Sneaks at MAX 2015).

At Summit, Manuel and Andra took that idea to the next level by connecting a design with multiple layers of templated “artboards” to real marketing assets stored in Adobe Experience Manager (an enterprise-grade content management system), automatically populating hundreds of content assets and dozens of links into a fully working native mobile app in just minutes.

img2

Multiple artboards automatically populated and linked.

“This technology allows the marketer to collaborate with the designer right from the design phase in the context of real data from their asset library.  You can design your navigational structure in a way that makes the most sense from the very beginning.  Some companies may have thousands of articles, and they need to be able to handle all that content properly, not just see how their navigation works in the context of two or three articles in an idealized mock-up,” explains Andra.

Manuel adds, “From the designer’s perspective, they are able to load real data from Adobe Experience Manager and utilize it in the design flow.  They can see how things will look right away, identify and fix problems with edge cases and create the navigation structure for the entire application.  Then they can automatically build real native applications that can be tested, and ultimately, deployed across multiple platforms like iOS, Android and Windows.”

In addition to the rapid population of content, Andra explained how a marketing manager can use the combination of Adobe XD and Adobe Experience Manager Mobile, to make adjustments or edits to content directly in the design, see the changes real time and have those edits be reflected instantly in their content management system.

“For a marketer to go into a design tool and update something directly may seem a bit controversial, but we wanted to explore how we could reduce the overhead of the time it takes for the different personas to go back and forth on a collaboration.  If we can make it less time consuming, working teams can get to approvals and production faster.  And, if we can make things simple enough, it totally makes sense for a marketer to be able to adjust the product placement and navigation flow in the app design directly. It shouldn’t matter if it’s a marketing tool or a design tool,” she says.

Andra and Manuel are excited to see how designers and marketers can both take advantage of the new workflows that can be made possible by combining Adobe XD and Adobe Experience Manager.  “Adobe has always been about moving the industry forward.  We’re already starting to imagine how we can extend these kind of capabilities to multiple types of applications, such as e-commerce, or how we may tie Adobe XD to Adobe Experience Manager extensions for Cordova to create even richer applications,” notes Manuel.

This story is part of a series that will give you a closer look at the people and technology that were showcased as part of Adobe Sneaks. Watch other Sneaks and videos here.