As the list of product, design and development options continues to grow it becomes more difficult for businesses to understand all of the considerations and to decide on the appropriate path for them in relation to their unique objectives, capabilities and resources. Also, once a business has embarked on a specific path it will likely be committed for a number of years (amortising sunk costs). For example, in selecting a product path you could create a Website or Mobile App; to design a Website you could use dedicated, responsive or adaptive design; and to develop a Mobile App you could use Web technology or Native code. Google’s Stephen Griffiths helps navigate the tricky territory of which paths a business could and should take to meet its objectives.
Step One: Decide on a Product Path
The two main product paths that a business could pursue are creating a Website or a Mobile App. And where a business needs to satisfy different or multiple use cases, creating both a Website and Mobile App as differentiated propositions may be necessary (products are not mutually exclusive). The salient points in navigating the different product paths are as follows:
Start with the customer and become customer obsessed
- Your product path decision should be informed by understanding what problems you are trying to solve for customers. This requires customer engagement, empathising with their problems and contexts, which your product path will aim to satisfy
Re-think your proposition for each product's unique capabilities
- Acknowledge that each product has unique capabilities and plays a different role along the customer lifecycle, i.e. a desktop site is not an mSite which is not an App
Acknowledge your objective for reach or features
If your objective is reach, a Website will leverage the vast reach of the Web and enable you to capture the majority of casual sales from search and social channels.
- You can extend your existing site further by adding basic - Google Polymer - Web components that improve conversion and increase engagement.
If your objective is features, a Native App will leverage the latest sensors and services, and enable you to capture the majority of repeat sales and rich engagement.
- You can re-engage customers proactively on the Smartphone - and bypass your own App - with timely and relevant widget or notification content.
If your objective is a blend of reach and features consider the Web App path
- You can add rich Web components to your site to make it more ‘App-like’ (or build a bespoke Web App), e.g. work offline, push notifications, add to homescreen, etc.
- This could substitute a Native App if you don’t need the latest features.
Step Two: Decide on a Design Path
Device proliferation and growing screen fragmentation make designing for digital more complex than ever. Alongside new platforms including smart TV and smartwatches, there’s a need to support new input types and contexts. Users view and touch platforms at different distances and postures, while screen dimensions and orientations offer almost limitless combinations. The salient points in navigating the different design paths are as follows:
Device and user behaviour fragmentation and complexity is a design problem
- We have fragmentation in platforms (e.g. desktop, Smartphone, Smartwatch), devices (e.g. iOS and Android Smartphones), screen sizes, orientations and resolutions, input methods (e.g. mouse, touch, voice), and postures (e.g. many ways to hold / interact with a Smartphone), etc.
- Users use multiple devices and screens on any given task and expect a consistent experience
- Complexity is the painful new reality that needs to be embraced in order to design with consumer behaviour in mind
Responsive or adaptive design is the most flexible and sustainable site design path
- Responsive design is a flexible and sustainable approach that leverages fluid grids to reformat and position elements – including images, media and content – according to the user’s device. Responsive sites detect / adapt to each device and are a relatively future-proofed UX system.
- An interim path, for businesses not wanting to adopt responsive for all devices at once, is to responsively design a dedicated mSite, then scale-up to tablet and desktop once the conversion rate and experience stabilises
- Adaptive design extends responsive further to provide the ultimate user experience for each device. Using fluid grids and breakpoints it adapts to each device, screen and resolution, where different content can be served where a device needs to support a different use case
Material Design is a UI path to unify experiences across devices, Web and Native App
- Smartphone fragmentation also affects Native App design, with multiple native platforms contributing further intricacies. Responsive and adaptive design principles provide the solution
- The Material Design visual language enables each device to reflect a different view of the same underlying system, to consistently unify the user interface across devices, Websites and Native Apps
Take a Mobile First approach to design
- Take advantage of the smartphone’s innate limitations like screen space to prioritise and display primary content, and leave secondary content off-screen (or remove it)
- Design and code for the smallest device first to make smartphones the baseline experience, before scaling-up to larger platforms (it’s easier to add than take away!)
Step Three: Decide on a Development Path
Development boils down to two key paths: web technology (coding with HTML, CSS and JavaScript) and native code (coding with Java, Objective C, etc.). Websites and Web Apps accessible from browsers employ web technologies, whereas Mobile Apps installable from app stores can employ either native code (for Native Apps) or web technologies (for Hybrid Apps). The salient points in navigating the different development paths are as follows:
Optimise Website technical performance with the latest development tools
- Web development is mature, so a huge developer population already exists to make this development path relatively straightforward
- While most businesses focus on UX / UI optimisation, it’s crucial to focus on technical performance to further improve the user experience and increase conversion (and overcome legacy performance challenges). Google’s web performance tools help you optimise startup and load performance, etc.
- To extend an existing site and increase conversion, try adding Google Polymer basic elements and Web components to it, such as Optimise Form Entry or Auto Complete
Adopt modern Web developer tools like Google Polymer to make your site more App-like or build bespoke Web Apps
- Developers can extend a Website’s richness and engagement by implementing app-like features, such as offline working, splash screens, background syncing, push notifications and adding to the user’s home screen
- Google’s Polymer is one tool for developing Web Apps that unifies the user experience across devices and screens. It uses modular, reusable, standards-based elements and Web components that are both tiny and fast, and work across modern web browsers
- The Polymer elements catalogue is large and expanding, and while some have Material Design styling, they can be customised to fit any brand
- Elements can be added to a site incrementally or be used to develop a new Web App
Develop rich Native Apps by leveraging a large developer population and mature tools
- With developer priorities for native code and two platforms - Android and iOS - you only need to develop two apps to reach the majority of the market
- If the business objective is for an optimum feature set and performance, native apps provide the answer. With native code running on the operating system they can deliver the most responsive and robust experience, the richest user interface, and access to the latest sensors and services / APIs
Avoid the Hybrid App path unless you only need to develop simple apps
- If the business prioritises speed and cost over customer experience, or it only needs to develop simple consumer / employee apps or prototypes, the hybrid development path could be more appropriate than native
- But Hybrid Apps involve many compromises and are inferior to native in: technical performance (web tech wrapped in a native shell); user experience (Android and iOS UIs are diverging visually); testing complexity (webview fragmentation); and threat of vendor lock-in
Summary: Choose your paths carefully
- Once you pursue a path you’ll likely be committed for a number of years
- Consider your requirements for reach and / or functionality both short and long-term
- Consider your effort and costs both initially (up to launch) and ongoing (business as usual)
- Ensure you have the right mix and maturity of design, development and testing capabilities
