Marketing Cloud Mobile App - Android

Weaving 2 Design Systems to Deliver a Product

The Marketing Cloud Mobile Application is a free product that allows users to monitor their key Marketing Cloud assets and take essential action on those assets. The problem was that this was only available for iOS. I and an intern needed to design a good, feasible application for android in a month. This project required a ton of collaboration between my cohort Kaustubh Barde (amazing designer, btw), the developers, and the product owner.

Role: Design Strategy, Lead Design, Visual Design, Design Partner

Project 2

"How might we answer our users' needs with a lite android version of the Marketing Cloud mobile application?"

Learn by Borrowing

We relied heavily on what was already created for the iOS application, as it had already had valuable users and a good base for data. Since we had a month to craft the designs, we focused on the key functions of the app: monitoring the assets, making key changes here and there. We constantly referred back to the product team responsible for the iOS app to understand why and how they accomplished things in there app, and applied the same to ours.

Balancing two Design Systems against Two Platforms

The problem required an understanding of Material Design as well as our Salesforce Lightning design system. Kaustubh and I took the time to study each system in depth: their design philosophies, their structure, their similarities, their differences. How do certain interactions work in Material Design vs Lightning Design? What are the differences in design and interactions between android and ios?

All these questions we sought to identify in these documentation Using our knowledge from both the Salesforce Lightning Design System and Material Design, we crafted a reusable styleguide based on that current iteration of Material Design and SLDS to use on the app.

What did we need to deliver?

We needed a solid foundation on what we should deliver vs what we could deliver. In an ideal world, we would've liked to include each important piece from the iOS app into the android version. However, that isn't always the case in an Enterprise environment, at least at first. While designing, I worked out an Information Architecture map to understand exactly what was it the users would be interacting with, and identify where it was we needed to add to...or remove.

We worked out the 4 most important apps of the Marketing Cloud suite to include: Calendar, Email, Automations, and Journeys. These in the iOS world are the most used applications and very important applications our audience used to track their important assets in the Marketing Cloud. Calender is used to track whatever is scheduled wholistically in the system. Email is used to track scheduled emails and their metrics on sent emails. Automations is used to track automation assets from the application Automation Studio. Journeys is for tracking Journey Builder activity.

Rapid iteration & Design Partnership

We were Design Partners throughout this project. During collaboration time with our product partner stakeholders, we would review what we had designed to make sure all user and business requirements were met for this iteration. The partners we worked with also had key insights about our users, and that knowledge we invaluable in knowing what to add and remove in this mvp iteration. It was important for us to be reasonable in our designs, and understand the time and limited developers available.

Since we had all the assets for visual design available, we used Sketch and rapidly iterated on pieces of the application. Our goal was to finish one key portion of the app each by the end of a week. We would repeat the cycle of iterate, review, and iterate amongst ourselves and key stakeholders to make sure we were in fact on the right path and in sync the entire way through. We tested interactions amongst people and relied on best case interactions in the company to make sure what we had made sense

Design Snapshot

Our first pass of designs focused on using our standard Marketing Cloud colors in tandem with our global Salesforce styling. Clarity was present, and the design reflected what we wanted to convey. We were on the right path.

The next iterations focused deeper on clarity, keeping in mind the accessibility of colors used, and brought more color to what was more important.

Delivery & Continued Work

We successfully delivered the MVP version of the app, however our work was not done. Post-inital release Kaustubh and I continued to collaborate closely with this product team to deliver rapid updates in an agile environment to the application based on user need, experience need, and business need.

Project B.E.L.T

A project focused directly on improving empty states across the app, iOS and Android.

Android Home

Designed a dedicated Dashboard for the most important stats.

Better Statuses in Automations

Improved status and error handling in Automations.

Lessons Learned

A designer will craft a good looking usable product. A Design Partner will ensure that product becomes reality.

Iterate fast, and closely with your developers in the know, and don’t fear changing things.

Share your design principles and rules with your developers. Do not design in a black box.

Design rules sometimes need to be broken for a better experience. Don’t become bogged down by the rules.

Trust in your design juniors. They themselves have wonderful and valuable insights

All done here? Head back to the Portfolio