Connecting User Experience with the Mobify Platform
The Mobify Platform is comprised of two main components: Progressive Mobile, and Engagement Marketing.
About Progressive Mobile
You’re a designer that is focused on creating mobile experiences. It might seem logical to think of web and native apps as unique to each other as two different languages might seem. Mobify’s Progressive Mobile approach is one that will challenge your assumptions around building for two distinct mediums. As the web’s performance capabilities grow to match that of native apps, your approach to design must evolve from being about communicating effectively through a medium, to communicating the essence of a brand across iOS, Android and the web.
Progressive Mobile includes both mobile web and native apps — the features are the same across web and apps. A few exceptions are app features that leverage native integrations and device hardware:
- Extend Upon Web Content: Existing web content is pulled in and optimized for mobile customers, without the need to duplicate content.
- Payments: Mobify’s payments plugin integrates with common eCommerce backends and payment gateways. Support is available for Apple Pay in iOS apps, and Android Pay in Chrome browsers across mobile and desktop.
- High-speed performance: faster page load times, both real and perceived, by keeping common UI elements (like navigation bars) displayed while new content loads.
- Offline Mode: Browse previously viewed pages when Wi-Fi or cellular signal is temporarily lost.
- Home Screen Icon: Customers are prompted to add an app-style shortcut icon to their homescreen, encouraging repeat visits. Visiting the site via the home screen icon will activate fullscreen mode.
- Fullscreen Mode: Browser elements like the URL bar are hidden, keeping users immersed in the site and reducing bounce rates.
iOS or Android app specific features include:
- In-Store Mode: Using existing proximity technology, we can extend in-store experiences to mobile customers, including:
- Barcode scanning that takes customers directly to the product page, or have that product automatically added to a list (e.g. gift registry). Supports 1D and 2D bar codes.
- Restyle pages to address in-store needs (e.g. bringing barcode scanner and loyalty cards).
- Display personalized content that reflects customer’s in-store location.
- Deep Linking: Links to specific pages (shared over social or email for example) will automatically open within the native app.
- App Store Review Optimizer: Prompts users for reviews only once they have accumulated specific engagement tiers within the app. This might result in better ratings and higher search rankings.
About Engagement Marketing
Engagement Marketing uses contexts such as geo-location and behavioural data to deliver personalized content to users. As a designer, your task is to leverage these features to provide optimal value to the user, by empathizing with the personas involved. By keenly understanding the shopper you’re designing for, you can positively affect the shopper’s relationship with the brand and make their shopping experience more meaningful. Some features relevant from a design perspective include:
- Push Notifications: Personalized push notifications sent directly to a shopper’s desktop or mobile device. Support for both app and web browser (desktop and mobile) push notifications.
- Smart Content: Personalized content that can be implemented strategically throughout a customer’s site.
- Store Drivers: For retailers with brick and mortar stores, Engagement Marketing includes a suite of location-based features.
- Localization: Support for multiple languages, including right-to-left languages.
Designing for the Mobify Platform
Designers are capable of touching every facet of the Mobify Platform. Whether it be creating a visually interesting homescreen icon for a mobile web build, or supplying design requirements for Smart Content slots, there is an opportunity to influence every touchpoint of a shopper’s journey. Some deliverables that you may be required to produce are:
- Static mockups (flat files) for a Progressive Mobile build, compiled into a prototype with the use of InVision.
- Visual Assets, such as icons, logos, and images.
- Design system documentation, used by project developers, future designers, and others to progress on designs made.
- Design retrospective documentation, outlining particular design decisions, challenges, and rationales for specific projects and processes.
- Presentations for clients and stakeholders.
Mobify’s technology stack directly affects how you will design, and the deliverables that you will be required to produce.
There are many ways to get from A to B. The general shift in the web and app design and development process has been to move away from the traditional waterfall approach towards one of constant iteration. This is certainly a positive shift in process as it allows for exploration and alignment in unison (see image below) — however, at Mobify, we do something a bit more “waterfall-esque.”
How Mobify Works with Customers
When a customer signs on with Mobify or with one of Mobify’s partners, they are leasing Mobify’s technology. For example, a mobile web build is created by blocking the rendering of a specific desktop website URL, then by selectively pulling in content and data, loaded with our technology stack (e.g. React,CSS, etc.) via the Mobify bundle. (See Mobify Docs to learn more about how Progressive Mobile works.)
Designing for Customer Content
Designers do not have control over content — the content from the provided customer URL is the maximum amount of content that can be included. In order for developers to know what data to parse, where to place that content, and how to style it, designers must have these decisions pre-planned.
After going through the Discovery Phase, the Kickoff Phase, and the Design Phase (and once the customer signs off said designs) developers will have a clear indication of exactly how they should be dealing with content. Build sprints are for developers to turn the designer’s prototypes into realities with actual content. Build sprints are generally two weeks long.
The waterfall model may be old news, but it’s a process that (with a bit of Mobify’s own flavour on it) allows us to efficiently decide and build out Progressive Mobile builds.