AEM Mobile Hackathon: Adobe Partnership in Action

July 29, 2016

hack·a·thon ˈhakəˌTHän/ nouninformalnoun: hackathon; plural noun: hackathons   an event, typically lasting several days, in which a large number of people meet to engage in collaborative computer programming. 

When Adobe announced the launch of its new and exciting mobility product in February of this year, AEM Mobile, there was a ton of excitement throughout the industry about its potential. The potential now exists to provide streamlined and accessible mobile solutions integrated with the already-industry-leader Adobe Marketing Cloud. The new offering was primarily a solution to a very real problem: How can you provide an organization the ability to create a non-fragmented process to deliver cheaper mobile apps?

The notion that the mobile app development process is fragmented is universally felt. With the need for creative, development and content resources just to produce apps that are twice as expensive as their mobile web counterparts, the process as it stands seems inefficient (Source: Forrester, January 2015).

AEM Mobile allows clients to deploy iOS, Android, Windows and Web apps rapidly by utilizing the Cordova APIs. These apps will be leverage content and integrate with the various tools of the Adobe Marketing Cloud. With this new framework available to clients, the challenge for a digital agency like Valtech is how to quickly develop internal expertise and funnel that back up to their clients. In order to streamline this knowledge shared to our team at Valtech, we held an AEM Mobile Hackathon for Valtech in collaboration with Adobe. The Hackathon was one day of development for three different Valtech teams competing to produce robust and innovative AEM Mobile apps. These teams worked across disciplines and offices alongside Adobe AEM Mobile experts to ideate, solution, design and develop amazing mobile apps to demo at the end of the day.

The main objectives of this Hackathon were to:

• Enable Valtech technical, experience and business resources on AEM Mobile offering.
• Provide deliverables that can be used in Retail, Grocery and Travel & Hospitality verticals.
• Build on this innovative initiative and strengthen Valtech’s partnership with Adobe.

For this competition, we assigned three teams of four resources each. Each team had 1 experience designer, 1 business analyst, 1 frontend developer and 1 AEM developer. Also, to streamline the process and take full advantage of the limited time we had, we assigned a business case for each team, each with a varying degree of detail. Here are the three business cases:

1. Create a mobile app to help improve the in-room and hotel experience of a guest at a hotel.
2. Create a mobile app that provides a mechanism for creating and sharing shopping lists at a grocery store.
3. Create a mobile app for a multi-brand retailer to browse the different products in each brand.

Each team was introduced to AEM Mobile with the help of the Adobe team and was provided proper access and credentials to work with the AEM Mobile framework. Then each team spent some time developing ideas and solutions for the business cases with the help of some detail already provided. After settling on an approach, the teams spent the majority of the time developing and iterating over their final mobile app artifacts.

At the end of the day, we allocated 10-15 minutes for each team to introduce, describe and demo their mobile apps to the audience as well as the judge panel. The judge panel consisted of Valtech and Adobe employees with different discipline backgrounds (Technology, Delivery, QA, Analysis, Creative, etc.). The panel scored each of the final products with a 1-5 score based on its merits according to four categories:

1. Design: Look and Feel, User Experience, and Layout.
2. Applicability: How applicable is this product for clients?
3. Development: How much is developed and automated? How well is the application solutioned?
4. Creativity: How creative and innovative was the product and the user experience?

After the scores were tallied, the team responsible for the Travel & Hospitality app walked away with the top prize. This app had appealing design, real life applicability and was well developed with a creative approach to the solution.

The Retail team finished a very close second. Their mobile app was as high quality solution with an innovative approach. Besides addressing the main business case of being able to browse a multi-brand retailer, the team decided to create an additional custom integration for Augmented Reality. Using AR, this mobile app allows users to insert the retailer’s products into a live video feed being taken by the mobile device’s camera. This feature makes it possible for users to not only imagine the products they want to purchase in their home or office space but in fact visualize it using the app.

Finishing third, not too far behind, was the Grocery mobile app. This team focused their energy on creating a functional template for the shopping list without worrying too much about the look and feel. That decision enhanced their Development and Applicability scores but diminished their Creativity and Design scores.

Learnings

One of the main insights from Hackathon was the benefit gained from pre-collaboration. Despite the fact that prior concepts can create some restrictions on the direction taken by the team during the Hackathon, in this instance prior discussions saved a lot of time and redirected the time spent into execution. This benefit was very visible in the maturity level of the final products demoed.

Another take-away was the advantage of having Adobe in the room to guide and support the Hackathon teams in real-time. Being exposed to a new technology or product carries enough over-head, so for this Hackathon to be successful we needed intimate support by Adobe consultants. Judging by the final artifacts demoed, such support was immensely helpful in accelerating the teams’ ramp up on AEM Mobile.

A final observation was seeing the breadth and range of approaches taken by each team while still utilizing the AEM Mobile framework. With enough autonomy to find the best path to a prototype, each team decided to tackle the implementation of AEM Mobile a little differently. While all approaches were valid implementations of AEM Mobile, they varied greatly in how they were executed. The Retail team decided to use custom plugins for their AR integration, which proved a bit too time consuming for a Hackathon– but they pulled it off. The Grocery team settled for out-of-the-box capabilities of AEM Mobile but integrated with AEM using AEM templates. Finally, the Travel & Hospitality team decided to go with a lightweight and lean implementation of AEM Mobile without any additional integrations.

Overall, this Hackathon proved to be a resounding success by achieving its stated goals and providing tremendous final artifacts for future extension and customization. I would like to thank Adobe for making this possible and our participating teams for being a big part of this innovative exercise. Looking forward to next time.