This presentation by Doug Riches was a part of Dx3 2017.

1. Create Enhanced Customer
Experiences With React
Rangle.io
129 Spadina Ave,
Suite 500,
Toronto, ON
M5V 2L3, Canada
(416) 737-1555
info@rangle.ioMarch 2017

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

3. Douglas Riches
Group 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

4. Enabling Retailers
to Build Their Vision
Rangle 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.

5. Retail Challenges

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

7. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

8. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

9. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

10. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

11. Now is the Time
We Have Passed an Inflection Point
RATEOFMODERNWEBTRANSFORMATION
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.0
Agile
Takes Off
Mobile
Adoption Surges
Rise of
Lean Startup
HTML5
Adoption at 93%
Augmented
Reality
2014
Omnichannel
Applications
2017
Rangle.io / 11
Retail Challenges
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

12. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

13. Next-Generation
eCommerce Solutions

14. Rangle.io / 14
“Agile development is not the goal.
The goal is agile products.”
Edmond Mesrobian CTO Tesco
NRF Conference 2017
Retail Challenges
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

15. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

16. 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 & Delivery
that’s cross-functional
User Validation,
consistently integrated
Continuously Delivering High Quality Software
following a Build-Measure-Learn process
Rangle.io / 16
Retail Challenges
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

17. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

18. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

19. 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 B
Web Experience
Brand C
Experience
Brand X
Experience
...
Customer
Experience
Layer
Transactional
Platforms
Front-end
technologies
Back-end
technologies
Rangle.io / 19
(Browser)
(Server)
Retail Challenges
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

20. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

21. React Creates Value for
Retail Customers

22. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

23. React
Built 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

24. Rangle.io / 24
Retail Challenges
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps
“Use the least number of
technologies to provide the highest
level of value.”
CTO Teradata
NRF Conference 2017

25. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

26. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

27. Rangle.io / 27
Retail Challenges
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
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.

28. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps
Speed Benefits

29. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

30. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps
Component Driven

31. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

32. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

33. 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps

34. Rangle.io / 34
The Result
Using 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
Next-Generation
eCommerce Solutions
React Creates Value for
Retail Customers
How Rangle Helps