ServiceNow: Mobile Card Builder
What started as a basic feature within Mobile Studio expanded beyond product design and spanned across systems design in order to come to a solution that sparked interest by other platform teams across the company.
I’m particularly proud of this effort because it not only solved our core user problem but expanded across other teams in SN. I had also done the job of two designers in one project (Product Design, Systems Design) and broke my team’s operating paradigm from a waterfall agile methodology to be more inclusive in order to speed up our go-to-market rapidly.
Project Background
The goal
Allow ServiceNow developers to customize card layouts and information for mobile iOS/Android native apps so that requestors and fulfillers can locate and monitor relevant information.
The design challenge
Design a solution to allow customization for an existing mobile enablement product with a limiting design system.
Success metrics
ServiceNow developers and BUs can customize the full power of cards.
Duration
7 months
Team
1 UXD (Product/UX Designer & architect) (My Role)
1 Product Manager
2 Engineers
Software
Adobe XD
VS Code (HTML, CSS, JavaScript)
Miro
Design Process
To start off: what currently exists?
Mobile Studio
ServiceNow developers have the ability of configuring native mobile list screens using Mobile Studio.
Card template selection
For each list screen, users have the ability to choose one of 20 predefined card templates — each with their own unique layout and displayed information:
Validating User Problem
Since I was new to ServiceNow, I surveyed and interviewed 6 internal BU ServiceNow developers and 2 BU product managers to learn about the challenges these users were facing with using Mobile Studio. The highest voted feature turned out to be developers wanting the ability to create new card templates in order to meet their own business needs — but have ran into several challenges doing so.
problem 1: existing selection may not account for all use cases
Choices for card templates were limited despite new ones getting added every 6 months, the provided preset templates still didn’t meet BU developer needs. Many users have expressed they wanted to “tweak” these cards.
problem 2: card template creation is tedious
To create a new card template, users must navigate to system-level records outside Mobile Studio and design their card using purely JSON code with special mobile attributes. Documentation walks users through the process, but neglects to mention how to handle special cases.
problem 3: support for customized templates is incompatible
Upon creating a new card template, navigating back to a list screen configuration within Mobile Studio results in a “broken preview” bug due to a tightly coupled architecture that Mobile Studio was built on. If a user makes any changes to that list screen configuration that references a customized card template, the card template will be overwritten with garbage data and users will lose their customizations.
Design Inspiration
Comparative analysis for Mobile Card Builder
Final designs
Results
Positive NPS - 100% of 12 internal participants (SN app dev among Employee Experience and inbound/outbound BUs) expressed high satisfaction of the product. Because of the nature from editing JSON to visually constructing layouts, attracted a wider net of users (Citizen Developer tools). Users are able to gracefully construct cards and templates within minutes, and their confidence rating matched the goals they set out to accomplish. 100% subjective success rate. (YouTube link - 41 likes, 1 dislike)
Lowered Task Completion - We found users previously spent an average of 1.25 hours creating a card and testing against their environment. Using Mobile Card Builder, that number has decreased down to 16 minutes per card creation.
Wider user adoption and increased discoverability - adding new channels for users to access Mobile Card Builder from Mobile Studio and Platform. A tool for the BUs to create cards on their own without developer resources.
Template completion funnel - 98% completion rate, 92% success rate, roughly 2 minutes per task.
Partnership - Created partnerships with other first-party teams to adopt this layout creation tool.
Mobile App Builder Overview
Mobile App Builder Getting Started Demo
Mobile App Builder Rome Release