Organizations need to follow a mobile-centric design paradigm to reach today’s customers. Responsive web design is just one element in today’s web designers’ toolbox. This presentation, given at IBM Smarter Commerce Conference 2014 by CoreMedia’s Jochen Toppe discusses the challenges today’s web designers and marketers face, and offers an in-depth look at real-world requirements, potential pain points, and solutions.

1. EMBRACING
MOBILE FIRST
Why listening to your
customers is an imperative
JochenToppe
VP Product Management
CoreMedia
@jochent
linkedin.com/in/jochentoppe

2. A LITTLE BACKGROUND
About CoreMedia
Delivering experience
management solutions for
global brands, e-Commerce,
media, and telcos.
!
About Me
Bringing high-profile brands
online for the past 17 years,
across multiple continents,
companies, and roles.
YEARS OF
INNOVATION
CUSTOMER RETENTION
AFTER 18 YEARS
PERCENT OF GERMAN
MEDIA TRAFFIC

3. INNOVATION CYCLES
Source: Datastream

4. Source: “The Age Of The Customer Redefines Technology Management Archetypes” | April 2014 | Forrester Research, Inc.
THE AGE OFTHE CUSTOMER
Redefining how business is won

5. WHERE ISTHE CUSTOMER?

6. WORLD-WIDE MOBILE SUBSCRIPTIONS
460
million
164
million
422
million
168
million
895
million
303
million
Mobile Broadband Subscriptions Fixed Line Broadband Subscriptions
Data: Mobithinking

7. 3:1
Mobile Outweighs Fixed Broadband

8. JANUARY 1ST, 2007
Images:Wikimedia

9. US
MOBILE USAGE

10. GERMAN
MOBILE
USAGE
!
82 million people
!
113 million mobile
subscriptions
!
Massive growth
!
Data:AGOF

11. Source: comScore

12. 2014
THE INTERNET IS EVERYWHERE
Images:Wikimedia, Motorola, Claudia Regina@Flickr

13. USAGE PATTERNS ONLINE
Source: Mobify

14. ATTENTION SPANS
Source: Mobify

15. THE CUSTOMER JOURNEY
• Customers can be at any point in their journey
• They can pop in and out at any point, any device
• The journey is not completely linear!
• How to move the customer to the next step?
Awareness Engagement Shop/Browse Purchase Service Loyalty
Customer
Experience
Journey

16. Can you identify your
customer across channels?
?

17. Can you target to your customer
!
- by device?
- by place in consumer journey?
- by interest? ?

18. Peter Sheldon and Stephen Powers
Forrester Research, Inc
“It is no longer enough to enable an online
catalog and transactional eCommerce:
Today's marketers want to tell brand and
product stories through the deep
personalization and contextualization of
content and interactive digital experiences.“

19. DRIVINGTRAFFIC
!
Paid Media
Prospects
!
Owned Media
Buyers
!
Earned Media
Advocates

20. !
!
76%
Of consumers will not shop on a bad site
26%
Will not do business with that brand
!
!
!
!
!
!
!
Brian Walker, “Welcome to the Era of Agile Commerce, Forrester, March 2011

21. BRAND CONSISTENCY
Across countries, devices, campaigns, and channels

22. FRENEMIES?
• Web store
• Structured
• Drive sales
• Transact
• Improve ROI
• Repeatable
• Build brand
• Innovate
• Increase Impact
• “One-and-done”
Marketing E-Commerce
• Digital
Marketing
• Unstructured
Customer
Experience

23. BREAK DOWN SILOS
Your Customers don’t want them
Image: Flickr, Doc Searls

24. EMBRACING MOBILE FIRST

25. –Eric Schmidt, 2010
“What’s really important right now is to get the mobile
architecture right. Mobile will ultimately be the way you
provision most of your services. The way I like to put it is, the
answer should always be mobile first. You should always put
your best team and your best app on your mobile app.”

26. DEVICES!? ORIENTATION!?
Where do I start?

27. RESPONSIVE DESIGN
• Embrace fluid layouts
• Create layouts (CSS styles)
that dynamically adapt
themselves to the form
factor
• Native query capabilities
introduced in CSS 2.1 –
Responsive happens on
the front-end!
• Design based on
flexible/fluid grids
Images: CoreMedia

28. TASK FIRST
• What are the main tasks my users perform on my
site?
• Are any tasks more predominant on mobile?
• Focus and then start adding with more screen real
estate

29. ADAPTIVE DESIGN
• Follows Progressive
Enhancement
• Can leverage device and
user information to
personalize user
experience
Images: CoreMedia

30. FLUID GRID LAYOUTS

31. ADAPTTHE DESIGN

32. SETTHE FOCUS

33. APPS
• Responsive web site should
be your starting point
• Apps make sense where
the site is not enough
• Hardware-interaction
• Gamification, etc
• Look at your customer
base!
Source: Forbes / Flurry

34. MOBILE FIRST
• Embrace mobile as your
primary consumer touchpoint
• This touches the entire project lifecycle!
Requirements UXContent Strategy
Implementation Testing

35. WHAT ABOUT EXISTING
SITES?
!
Separate m.
site?
!
Mobile-First
Rebuild?
!
Responsive
Retrofit?

36. WEBSPHERE COMMERCE
Feature Pack 7
(and a little CoreMedia)

37. AURORA IS
RESPONSIVE
Images: IBM

38. UNDERTHE HOOD
• Commerce Composer
• REST API-driven e-
Commerce
• Session Sharing
Image:Wikimedia Commons

39. WIDGET-BASED AUGMENTATION

40. HYBRID CAMPAIGNS AND STORES
• Full session sharing between
store and CMS-driven
experiences
• Real-time integration
including catalog, pricing,
inventory, and
personalization

41. QUESTIONS?
For more information:
• Visit CoreMedia at Booth G-4
• Visit IBM in the Commerce &
Supply Chain, Innovation areas