dx3: react for retail

Create Enhanced Customer Experiences With React

Rangle.io

129 Spadina Ave, Suite 500,

Toronto, ON M5V 2L3, Canada

(416) [email protected] 2017

Who are we?The world’s leading retailers work with us to help them transform and innovate. By enabling retail companies to optimize their digital strategy we can achieve amazing business outcomes together.

Douglas RichesGroup Technology Director

Doug is the Group Technology Director at Rangle. With extensive knowledge building analytics-driven user experiences, Doug creates scalable software for leading retail companies. He has worked with Aldo, Progressive Insurance, Adidas, Moen USA, Hyatt Hotels, Dell, Rolex, Best Buy, Panasonic, Citi Bank and NASA.

@froosh_ca

Rangle Presents

Enabling Retailers to Build Their VisionRangle is the end-to-end partner of choice for innovative retailers focused on digital services and solutions.

By leveraging our expertise in next-generation web and mobile products, Agile and Lean practices, and omnichannel eCommerce solutions, Rangle can take your customers’ experiences to the next level.

Retail Challenges

Current Retail Landscape● Established retailers struggle to adapt to rapid

changes in technology and consumer expectations.

● Customers crave high-touch brick and mortar experiences combined with omnichannel eCommerce.

● Your customers want a personalized eCommerce experience.

● More nimble startups and disruptive competitors fill market needs before larger retailers can respond.

Industry Trends

Mobile payments and cryptocurrency

Augmented Reality, Artificial Intelligence, Virtual Reality

Omnichannel Customer Experience

Real-time analytics

Lean eCommerce

Persistent Identity

Personalization and loyalty

Geo-targeting and Beacons

Retail Challenges

Next-Generation eCommerce Solutions

React Creates Value for Retail Customers

How Rangle Helps

Rangle.io / 6

Challenges with Traditional eCommerce

● Projects that take several years to complete are outdated upon launch.

● Scaling across multiple devices, regions and languages introduces overwhelming complexity.

● The solution bureaucracy that emerges makes it impossible to respond effectively to customer or market feedback.

● Retailers struggle with implementing new technology in a timely manner due to legacy solutions.

Rangle.io / 7

Retail Challenges



How Rangle Helps

Implications of Not Transitioning to Next-Generation eCommerce

● Reduced conversion rates due to an outdated eCommerce offering.

● Digital offerings look stale if built on an inflexible platform (affecting premium brands especially because of customers’ high expectations).

● Stalled growth and reactive corporate strategies don’t address the actual customer experience.

● New competitors segment the market and steal customers with differentiated digital offerings.

Rangle.io / 8

Retail Challenges



How Rangle Helps

Business Requirements for Next-Generation eCommerce

● Be everywhere: Define and deliver an evolving omnichannel strategy.

● Be personal: Differentiate each consumer’s experience.

● Be fast: Respond to market opportunities in weeks, rather than months or years.

● Be unique: Enable business units to respond appropriately to their own needs.

Rangle.io / 9

Retail Challenges



How Rangle Helps

Technical Requirements for Next-Generation eCommerce

● Two Tiers: Separate the customer experience front-end from the transactional back-end.

● Mobile-first: Optimize your offerings for your customer’s top access point.

● Fast: High responsiveness is critical across all platforms.

● Cross-platform: Maintain a single codebase that is well-written, well-tested and SEO ready.

● Secure: Payments must be seamless, using the latest encryption and payment technology.

● Integrated: Connections to customer profiles, CMS and back-end product databases are essential.

● Global: Regionalization, language, currency, shipping, and tax law variations must be implemented.

Rangle.io / 10

Retail Challenges



How Rangle Helps

Now is the TimeWe Have Passed an Inflection Point

RATE

OF

MO

DERN

WEB

TRA

NSF

ORM

ATI

ON

2002 2003 2007 2013 2016

Rich web user experiences (Microsoft, Outlook, Gmail)

iPhone launches Applications can run without a server

One code base for web, mobile-web, and mobile apps

HTML 2.0Agile Takes Off

MobileAdoption Surges

Rise ofLean Startup

HTML5Adoption at 93%

Augmented Reality

2014

OmnichannelApplications

2017

Rangle.io / 11

Retail Challenges



How Rangle Helps

Payoffs of Next-Generation eCommerce

● Enabling creative teams to launch new experiences and innovations quickly.

● Seeing results that are direct and measurable between strategy and execution.

● Developing loyalty through strong differentiation.

● Responding rapidly to competitors and disruptors.

● Reducing costs significantly due to simplified processes and tech stack.

Rangle.io / 12

Retail Challenges



How Rangle Helps

Rangle.io / 14

“Agile development is not the goal. The goal is agile products.”

Edmond Mesrobian CTO TescoNRF Conference 2017

Retail Challenges



How Rangle Helps

Strategic Principles for Next-Generation eCommerce

● Split your technology stack into the customer experience (on the front-end), and the transaction platform (on the back-end).

● Promote radical innovation by applying a ‘Build, Measure, Learn’ cycle.

● Structure your organization around a continuous delivery software development model.

● Apply Lean design and software delivery practices to reduce cycle time and limit work-in-progress.

Rangle.io / 15

Retail Challenges



How Rangle Helps

Lean/Agile Across the Organization Strategy, Design, Delivery

Lean philosophies need to span all organizational processes, not just eCommerce delivery projects. Strong service design thinking is essential, in addition to strong devOps.

Corporate Governance driven by customer needs

Product Strategy driven by data

Design & Deliverythat’s cross-functional

User Validation,consistently integrated

Continuously Delivering High Quality Software following a Build-Measure-Learn process

Rangle.io / 16

Retail Challenges



How Rangle Helps

Traditional

● Deploy in months with complex back-end logic.

● Design done upfront, resistant to market change over the course of the project.

● Weeks of testing in staging and testing environments without real data.

● An all-hands-on-deck, white knuckle, high-risk deployment.

● Minimal real-life feedback loop throughout the project lifecycle.

Lean

● Deploy in days with no or minimal back-end logic before deployment, minimizing risk.

● Design merged with development, adapting quickly to emerging consumer needs.

● Testing done throughout development to quickly find bugs and minimize QA cost.

● Test with real users and revert as needed.

● Analytics and user feedback inform future development.

Traditional vs Lean eCommerce Deployment

Rangle.io / 17

Retail Challenges



How Rangle Helps

Iterate Through the Design Process

● Identify customer needs.● Clarify the problems you’re solving for.

● Explore possible solutions.● Determine how to deliver the highest value.

Source: Hubspot.com

Rangle.io / 18

Retail Challenges



How Rangle Helps

Next-Generation eCommerce Application Architecture

Multiple brands can have custom experiences built on a common web component architecture. This is all client-side with few or no expensive and time-consuming server-side updates, all while leveraging your existing IT investments.

Stable Core IT Services Presented through a REST API

Integration Layer (Transactional payment systems / CMS)

Web Components used to develop the Customer Experience

Mobile App (React Native)

Brand A Web Experience (React)

Brand BWeb Experience

Brand CExperience

Brand XExperience...

Customer Experience Layer

TransactionalPlatforms

Front-end technologies

Back-end technologies

Rangle.io / 19

(Browser)

(Server)

Retail Challenges



How Rangle Helps

Transactional Platforms

Mobile App

Mobile Web

Web

In-Store

Front-end technologies

Back-end technologies

Payments

Distribution

Customer Info

Customer Experience

CMS

Product database or catalogue Rangle.io / 20

Retail Challenges



How Rangle Helps

Rangle.io / 22

It is important to choose a technology stack and architecture that enables Agile products, and the goal of providing value and changes to the retail customer quickly.

Retail Challenges



How Rangle Helps

ReactBuilt by Facebook, used by

some of the best & high traffic omni-channel

experiences in the world.

Retail Challenges

Next Generation eCommerce Solutions

How Rangle Helps

Case Studies

Next Steps

Rangle.io / 23

Rangle.io / 24

Retail Challenges



How Rangle Helps

“Use the least number of technologies to provide the highest level of value.”

CTO TeradataNRF Conference 2017

Rangle.io / 25

Utilizing React as your user experience development framework provides high value across all digital channels and allows for high reuse of effort.

Retail Challenges



How Rangle Helps

Rangle.io / 26

Native Mobile Components powered by JavaScript

ReactNative allows you to reuse up to 70% of your React code to power smooth 60 frame per second mobile applications. iOS and Android versions are built under the same codebase. Significantly reducing costs and time to market.

Retail Challenges



How Rangle Helps

Rangle.io / 27

Retail Challenges



How Rangle Helps

The Key Benefit for Retailers:React is a single omni-channel solution that allows retailers to adapt to changing customer needs much more efficiently than traditional development options.

Rangle.io / 28

● Fast to build new UI

● Extremely fast screen rendering

● Retailers can safely make changes without “breaking the site”

● Built correctly, it can be mere hours to deploy new changes to production

Retail Challenges



How Rangle Helps

Speed Benefits

Rangle.io / 29

Omni-Channel

A single UI platform that is highly performant. Allows retailers so have a shared experience across in-store mobile desktop and other platforms

Retail Challenges



How Rangle Helps

Rangle.io / 30

A component library is the at the core of a React project. Allows retailers to quickly create new user experiences that are consistent and fluid.

Component libraries in react allow retailers to move extremely rapidly towards new offerings and customer value.

Retail Challenges



How Rangle Helps

Component Driven

Rangle.io / 31

SEO

Isomorphic (Server-side) React allows a fluid single page experience while retaining deep SEO value. Good SEO is just as essential to the retail web as extraordinary customer experiences. With React, you can easily achieve both.

Retail Challenges



How Rangle Helps

Rangle.io / 32

Lightning Fast Interface

React and ReactNative only re-render small areas of the screen when data changes. The result of this is when changing between screens, or simple data changes is a user experience that is the fastest and cleanest available today.

Retail Challenges



How Rangle Helps

Rangle.io / 33

Easy Analytics

React with Redux state management makes behaviour based data collection much easier to implement. Rangle has developed open source software the make this happen extremely quickly.

Retail Challenges



How Rangle Helps

Rangle.io / 34

The ResultUsing React allows retailers to:

● Adapt quickly to changes in customer behaviour.

● Quickly develop Android and iOS based in-store mobile experiences.

● Create flexible user interfaces that are highly personalizable.

● Be Agile in how you deliver your digital products to retail customers.

Retail Challenges



How Rangle Helps