Menu Sheet Overlay
Search Sheet

Mobify Platform from a Designers Perspective

An introduction to Progressive Mobile and how it affects your team’s approach to design.

Connecting User Experience with the Mobify Platform

The Mobify Platform is comprised of two main components: Progressive Mobile, and Engagement Marketing.

The Mobify Platform
The Mobify Platform is 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:

iOS or Android app specific features include:

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:

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:

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.”

Mobify Development Workflow
Waterfall (top, green) versus Iterative (bottom, orange)

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.